Remove unused comments
This commit is contained in:
Kamran Ahmed committed
1 parent
b739deba99
commit
cdf2ce6b11
74 files changed
-7230
No files matched your search
@@ -1,15 +0,0 @@
|
||||
export function GitHubReadmeBanner() {
|
||||
return (
|
||||
<p className="mt-3 rounded-md border p-2 text-sm w-full bg-yellow-100 border-yellow-400 text-yellow-900">
|
||||
Add this badge to your{' '}
|
||||
<a
|
||||
href="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 underline hover:text-blue-800"
|
||||
>
|
||||
GitHub profile readme.
|
||||
</a>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
@@ -1,197 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { useCopyText } from '../../hooks/use-copy-text';
|
||||
import { useAuth } from '../../hooks/use-auth';
|
||||
import { RoadmapSelect } from './RoadmapSelect';
|
||||
import { GitHubReadmeBanner } from './GitHubReadmeBanner';
|
||||
import { downloadImage } from '../../helper/download-image';
|
||||
import { SelectionButton } from './SelectionButton';
|
||||
import { StepCounter } from './StepCounter';
|
||||
import { Editor } from './Editor';
|
||||
import { CopyIcon } from 'lucide-react';
|
||||
import { httpPatch } from '../../lib/http';
|
||||
import { useToast } from '../../hooks/use-toast';
|
||||
|
||||
type StepLabelProps = {
|
||||
label: string;
|
||||
};
|
||||
function StepLabel(props: StepLabelProps) {
|
||||
const { label } = props;
|
||||
|
||||
return (
|
||||
<span className="mb-3 flex items-center gap-2 text-sm leading-none text-gray-400">
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function RoadCardPage() {
|
||||
const user = useAuth();
|
||||
const toast = useToast();
|
||||
|
||||
const { isCopied, copyText } = useCopyText();
|
||||
const [roadmaps, setRoadmaps] = useState<string[]>([]);
|
||||
const [version, setVersion] = useState<'tall' | 'wide'>('tall');
|
||||
const [variant, setVariant] = useState<'dark' | 'light'>('dark');
|
||||
|
||||
const markRoadCardDone = async () => {
|
||||
const { error } = await httpPatch(
|
||||
`${import.meta.env.PUBLIC_API_URL}/v1-update-onboarding-config`,
|
||||
{
|
||||
id: 'roadCard',
|
||||
status: 'done',
|
||||
},
|
||||
);
|
||||
|
||||
if (error) {
|
||||
toast.error(error?.message || 'Something went wrong');
|
||||
}
|
||||
};
|
||||
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const badgeUrl = new URL(
|
||||
`${import.meta.env.PUBLIC_APP_URL}/card/${version}/${user?.id}`,
|
||||
);
|
||||
|
||||
badgeUrl.searchParams.set('variant', variant);
|
||||
if (roadmaps.length > 0) {
|
||||
badgeUrl.searchParams.set('roadmaps', roadmaps.join(','));
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mx-0 flex items-start gap-4 border-b px-0 pb-4 pt-2 sm:-mx-10 sm:px-10">
|
||||
<StepCounter step={1} />
|
||||
<div>
|
||||
<StepLabel label="Pick progress to show (Max. 4)" />
|
||||
|
||||
<div className="flex flex-wrap">
|
||||
<RoadmapSelect
|
||||
selectedRoadmaps={roadmaps}
|
||||
setSelectedRoadmaps={setRoadmaps}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-0 flex items-start gap-4 border-b px-0 py-4 sm:-mx-10 sm:px-10">
|
||||
<StepCounter step={2} />
|
||||
<div>
|
||||
<StepLabel label="Select Mode (Dark vs Light)" />
|
||||
|
||||
<div className="flex gap-2">
|
||||
<SelectionButton
|
||||
text={'Dark'}
|
||||
isDisabled={false}
|
||||
isSelected={variant === 'dark'}
|
||||
onClick={() => {
|
||||
setVariant('dark');
|
||||
}}
|
||||
/>
|
||||
|
||||
<SelectionButton
|
||||
text={'Light'}
|
||||
isDisabled={false}
|
||||
isSelected={variant === 'light'}
|
||||
onClick={() => {
|
||||
setVariant('light');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-0 flex items-start gap-4 border-b px-0 py-4 sm:-mx-10 sm:px-10">
|
||||
<StepCounter step={3} />
|
||||
<div>
|
||||
<StepLabel label="Select Version" />
|
||||
|
||||
<div className="flex gap-2">
|
||||
<SelectionButton
|
||||
text={'Tall'}
|
||||
isDisabled={false}
|
||||
isSelected={version === 'tall'}
|
||||
onClick={() => {
|
||||
setVersion('tall');
|
||||
}}
|
||||
/>
|
||||
<SelectionButton
|
||||
text={'Wide'}
|
||||
isDisabled={false}
|
||||
isSelected={version === 'wide'}
|
||||
onClick={() => {
|
||||
setVersion('wide');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-0 flex items-start gap-4 border-b px-0 py-4 sm:-mx-10 sm:px-10">
|
||||
<StepCounter step={4} />
|
||||
<div className="grow">
|
||||
<StepLabel label="Share your #RoadCard with others" />
|
||||
<div className={'rounded-md border bg-gray-50 p-2 text-center'}>
|
||||
<a
|
||||
href={badgeUrl.toString()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`relative block hover:cursor-pointer ${
|
||||
version === 'tall' ? ' max-w-[270px] ' : ' w-full '
|
||||
}`}
|
||||
>
|
||||
<img src={badgeUrl.toString()} alt="RoadCard" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||||
<button
|
||||
className="flex items-center justify-center rounded-sm border border-gray-300 p-1.5 px-2 text-sm font-medium"
|
||||
onClick={() => {
|
||||
downloadImage({
|
||||
url: badgeUrl.toString(),
|
||||
name: 'road-card',
|
||||
scale: 4,
|
||||
});
|
||||
markRoadCardDone();
|
||||
}}
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
<button
|
||||
disabled={isCopied}
|
||||
className="flex cursor-pointer items-center justify-center rounded-sm border border-gray-300 p-1.5 px-2 text-sm font-medium disabled:bg-blue-50"
|
||||
onClick={() => {
|
||||
copyText(badgeUrl.toString());
|
||||
markRoadCardDone();
|
||||
}}
|
||||
>
|
||||
<CopyIcon size={16} className="mr-1 inline-block h-4 w-4" />
|
||||
|
||||
{isCopied ? 'Copied!' : 'Copy Link'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex flex-col gap-3">
|
||||
<Editor
|
||||
title={'HTML'}
|
||||
text={`<a href="https://roadmap.sh"><img src="${badgeUrl}" alt="roadmap.sh"/></a>`.trim()}
|
||||
onCopy={() => markRoadCardDone()}
|
||||
/>
|
||||
|
||||
<Editor
|
||||
title={'Markdown'}
|
||||
text={`[](https://roadmap.sh)`.trim()}
|
||||
onCopy={() => markRoadCardDone()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<GitHubReadmeBanner />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { httpGet } from '../../lib/http';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { pageProgressMessage } from '../../stores/page';
|
||||
import { SelectionButton } from './SelectionButton';
|
||||
import type { UserProgressResponse } from '../Roadmaps/RoadmapsPage';
|
||||
|
||||
type RoadmapSelectProps = {
|
||||
selectedRoadmaps: string[];
|
||||
setSelectedRoadmaps: (updatedRoadmaps: string[]) => void;
|
||||
};
|
||||
|
||||
export function RoadmapSelect(props: RoadmapSelectProps) {
|
||||
const { selectedRoadmaps, setSelectedRoadmaps } = props;
|
||||
|
||||
const [progressList, setProgressList] = useState<UserProgressResponse>();
|
||||
|
||||
const fetchProgress = async () => {
|
||||
const { response, error } = await httpGet<UserProgressResponse>(
|
||||
`${import.meta.env.PUBLIC_API_URL}/v1-get-user-all-progress`,
|
||||
);
|
||||
|
||||
if (error || !response) {
|
||||
return;
|
||||
}
|
||||
|
||||
setProgressList(response);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchProgress().finally(() => {
|
||||
pageProgressMessage.set('');
|
||||
});
|
||||
}, []);
|
||||
|
||||
const canSelectMore = selectedRoadmaps.length < 4;
|
||||
const allProgress =
|
||||
progressList?.filter(
|
||||
(progress) =>
|
||||
progress.resourceType === 'roadmap' &&
|
||||
progress.resourceId &&
|
||||
progress.resourceTitle,
|
||||
) || [];
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{allProgress?.length === 0 && (
|
||||
<p className="text-sm italic text-gray-400">
|
||||
No progress tracked so far.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{allProgress?.map((progress) => {
|
||||
const isSelected = selectedRoadmaps.includes(progress.resourceId);
|
||||
const canSelect = isSelected || canSelectMore;
|
||||
|
||||
return (
|
||||
<SelectionButton
|
||||
key={progress.resourceId}
|
||||
text={progress.resourceTitle}
|
||||
isDisabled={!canSelect}
|
||||
isSelected={isSelected}
|
||||
onClick={() => {
|
||||
if (isSelected) {
|
||||
setSelectedRoadmaps(
|
||||
selectedRoadmaps.filter(
|
||||
(roadmap) => roadmap !== progress.resourceId,
|
||||
),
|
||||
);
|
||||
} else if (selectedRoadmaps.length < 4) {
|
||||
setSelectedRoadmaps([...selectedRoadmaps, progress.resourceId]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import type { ButtonHTMLAttributes } from 'react';
|
||||
import { cn } from '../../lib/classname';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
||||
type SelectionButtonProps = {
|
||||
icon?: LucideIcon;
|
||||
text: string;
|
||||
isDisabled: boolean;
|
||||
isSelected: boolean;
|
||||
onClick: () => void;
|
||||
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
||||
|
||||
export function SelectionButton(props: SelectionButtonProps) {
|
||||
const {
|
||||
icon: Icon,
|
||||
text,
|
||||
isDisabled,
|
||||
isSelected,
|
||||
onClick,
|
||||
className,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<button
|
||||
{...rest}
|
||||
className={cn(
|
||||
'rounded-md flex items-center border p-1 px-2 text-sm',
|
||||
isSelected ? 'border-gray-500 bg-gray-300' : '',
|
||||
!isDisabled ? 'cursor-pointer' : 'cursor-not-allowed opacity-40',
|
||||
className,
|
||||
)}
|
||||
disabled={isDisabled}
|
||||
onClick={onClick}
|
||||
>
|
||||
{Icon && <Icon size={13} className="mr-1.5" />}
|
||||
{text}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
type StepCounterProps = {
|
||||
step: number;
|
||||
};
|
||||
|
||||
export function StepCounter(props: StepCounterProps) {
|
||||
const { step } = props;
|
||||
|
||||
return (
|
||||
<span
|
||||
className={
|
||||
'flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-300 text-white'
|
||||
}
|
||||
>
|
||||
{step}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user