github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: implement profile form

Browse Source
pull/5494/head
Arik Chakma 9 months ago
parent c72b0b2cf2
commit d95d30caf8
4 changed files with 322 additions and 315 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/api/user.ts
  2. 524
      src/components/UpdateProfile/UpdatePublicProfileForm.tsx
  3. 67
      src/components/UserPublicProfile/UserPublicProfilePage.tsx
  4. 45
      src/components/UserPublicProfile/UserPublicProgresses.tsx

1
src/api/user.ts
Unescape View File

@ -85,6 +85,7 @@ export type GetPublicProfileResponse = Omit<
> & {
activity: UserActivityCount;
roadmaps: ProgressResponse[];
isOwnProfile: boolean;
};
export function userApi(context: APIContext) {

524
src/components/UpdateProfile/UpdatePublicProfileForm.tsx
Unescape View File

@ -28,6 +28,7 @@ export function UpdatePublicProfileForm() {
const toast = useToast();
const [publicProfileUrl, setPublicProfileUrl] = useState('');
const [isAvailableForHire, setIsAvailableForHire] = useState(false);
const [headline, setHeadline] = useState('');
const [username, setUsername] = useState('');
@ -101,6 +102,7 @@ export function UpdatePublicProfileForm() {
publicConfig,
} = response;
setPublicProfileUrl(`/u/${username}`);
setUsername(username || '');
setGithub(links?.github || '');
setTwitter(links?.twitter || '');
@ -136,6 +138,31 @@ export function UpdatePublicProfileForm() {
setIsLoading(false);
};
const updateProfileVisibility = async (
visibility: AllowedProfileVisibility,
) => {
pageProgressMessage.set('Updating profile visibility');
setIsLoading(true);
const { error } = await httpPatch(
`${import.meta.env.PUBLIC_API_URL}/v1-update-public-profile-visibility`,
{
profileVisibility: visibility,
},
);
if (error) {
setIsLoading(false);
toast.error(error.message || 'Something went wrong');
return;
}
setProfileVisibility(visibility);
setIsLoading(false);
pageProgressMessage.set('');
};
// Make a request to the backend to fill in the form with the current values
useEffect(() => {
Promise.all([loadProfileSettings(), loadProfileRoadmaps()]).finally(() => {
@ -148,14 +175,18 @@ export function UpdatePublicProfileForm() {
);
const publicRoadmaps = profileRoadmaps.filter((r) => !r.isCustomResource);
const publicProfileUrl = `/u/${username}`;
const isAllCustomRoadmapsSelected =
customRoadmaps.length === publicCustomRoadmaps.length ||
customRoadmapVisibility === 'all';
const isAllRoadmapsSelected =
roadmaps.length === publicRoadmaps.length || roadmapVisibility === 'all';
return (
<form className="mt-16 space-y-4 pb-10" onSubmit={handleSubmit}>
<div className="flex items-center justify-between gap-2">
<>
<div className="mt-16 flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<h3 className="text-3xl font-bold">Public Profile</h3>
{profileVisibility === 'public' && username && (
{profileVisibility === 'public' && publicProfileUrl && (
<a href={publicProfileUrl} target="_blank" className="shrink-0">
<ArrowUpRight className="h-6 w-6 stroke-[3]" />
</a>
@ -168,52 +199,53 @@ export function UpdatePublicProfileForm() {
text="Public"
isDisabled={profileVisibility === 'public'}
isSelected={profileVisibility === 'public'}
onClick={() => setProfileVisibility('public')}
onClick={() => updateProfileVisibility('public')}
/>
<SelectionButton
type="button"
text="Private"
isDisabled={profileVisibility === 'private'}
isSelected={profileVisibility === 'private'}
onClick={() => setProfileVisibility('private')}
onClick={() => updateProfileVisibility('private')}
/>
</div>
</div>
<form className="mt-6 space-y-4 pb-10" onSubmit={handleSubmit}>
<div className="flex w-full flex-col">
<label
htmlFor="headline"
className="text-sm leading-none text-slate-500"
>
Headline
</label>
<input
type="text"
name="headline"
id="headline"
className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="Full Stack Developer"
value={headline}
onChange={(e) => setHeadline((e.target as HTMLInputElement).value)}
required={profileVisibility === 'public'}
/>
</div>
<div className="flex w-full flex-col">
<label
htmlFor="username"
className="text-sm leading-none text-slate-500"
>
Username
</label>
<div className="mt-2 flex items-center overflow-hidden rounded-lg border border-gray-300">
<span className="border-r border-gray-300 bg-gray-100 p-2">
roadmap.sh/u/
</span>
{profileVisibility === 'public' && (
<>
<div className="flex w-full flex-col">
<label
htmlFor="headline"
className="text-sm leading-none text-slate-500"
>
Headline
</label>
<input
type="text"
name="headline"
id="headline"
className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="Full Stack Developer"
value={headline}
onChange={(e) =>
setHeadline((e.target as HTMLInputElement).value)
}
required={profileVisibility === 'public'}
/>
</div>
<div className="flex w-full flex-col">
<label
htmlFor="username"
className="text-sm leading-none text-slate-500"
>
Username
</label>
<input
type="text"
name="username"
id="username"
className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
className="w-full px-3 py-2 outline-none placeholder:text-gray-400"
placeholder="johndoe"
value={username}
onChange={(e) =>
@ -222,232 +254,226 @@ export function UpdatePublicProfileForm() {
required={profileVisibility === 'public'}
/>
</div>
</div>
<div className="rounded-md border p-4">
<h3 className="text-sm font-medium">Show my Learning Activity</h3>
<div className="mt-3 flex items-center gap-2">
<SelectionButton
type="button"
text="All Roadmaps"
isDisabled={roadmapVisibility === 'all'}
isSelected={roadmapVisibility === 'all'}
onClick={() => {
setRoadmapVisibility('all');
setRoadmaps([]);
}}
/>
<SelectionButton
type="button"
text="Hide my Activity"
isDisabled={roadmapVisibility === 'none'}
isSelected={roadmapVisibility === 'none'}
onClick={() => {
setRoadmapVisibility('none');
setRoadmaps([]);
}}
/>
</div>
<h3 className="mt-4 text-sm font-medium">
Only Following Roadmaps
</h3>
{publicRoadmaps.length > 0 ? (
<div className="mt-3 flex flex-wrap items-center gap-2">
{publicRoadmaps.map((r) => (
<SelectionButton
type="button"
key={r.id}
text={r.title}
isDisabled={false}
isSelected={roadmaps.includes(r.id)}
onClick={() => {
if (roadmapVisibility !== 'selected') {
setRoadmapVisibility('selected');
}
if (roadmaps.includes(r.id)) {
setRoadmaps(roadmaps.filter((id) => id !== r.id));
} else {
setRoadmaps([...roadmaps, r.id]);
}
}}
/>
))}
</div>
) : (
<p className="mt-2 rounded-lg bg-yellow-100 p-2 text-yellow-700">
You are not following any roadmaps yet.{' '}
<a href="/roadmaps" className="text-black underline">
Start following roadmaps
</a>
</p>
)}
<div className="rounded-md border p-4">
<h3 className="text-sm font-medium">Show my Learning Activity</h3>
<div className="mt-3 flex items-center gap-2">
<SelectionButton
type="button"
text="All Roadmaps"
isDisabled={isAllRoadmapsSelected}
isSelected={isAllRoadmapsSelected}
onClick={() => {
setRoadmapVisibility('all');
setRoadmaps([...profileRoadmaps.map((r) => r.id)]);
}}
/>
<SelectionButton
type="button"
text="Hide my Activity"
isDisabled={roadmapVisibility === 'none'}
isSelected={roadmapVisibility === 'none'}
onClick={() => {
setRoadmapVisibility('none');
setRoadmaps([]);
}}
/>
</div>
<div className="rounded-md border p-4">
<h3 className="text-sm font-medium">Show my Custom Roadmaps</h3>
<div className="mt-3 flex items-center gap-2">
<SelectionButton
type="button"
text="All Roadmaps"
isDisabled={customRoadmapVisibility === 'all'}
isSelected={customRoadmapVisibility === 'all'}
onClick={() => {
setCustomRoadmapVisibility('all');
setCustomRoadmaps([]);
}}
/>
<SelectionButton
type="button"
text="Hide my Custom Roadmaps"
isDisabled={customRoadmapVisibility === 'none'}
isSelected={customRoadmapVisibility === 'none'}
onClick={() => {
setCustomRoadmapVisibility('none');
setCustomRoadmaps([]);
}}
/>
<h3 className="mt-4 text-sm font-medium">Only Following Roadmaps</h3>
{publicRoadmaps.length > 0 ? (
<div className="mt-3 flex flex-wrap items-center gap-2">
{publicRoadmaps.map((r) => (
<SelectionButton
type="button"
key={r.id}
text={r.title}
isDisabled={false}
isSelected={roadmaps.includes(r.id)}
onClick={() => {
if (roadmapVisibility !== 'selected') {
setRoadmapVisibility('selected');
}
if (roadmaps.includes(r.id)) {
setRoadmaps(roadmaps.filter((id) => id !== r.id));
} else {
setRoadmaps([...roadmaps, r.id]);
}
}}
/>
))}
</div>
) : (
<p className="mt-2 rounded-lg bg-yellow-100 p-2 text-yellow-700">
You are not following any roadmaps yet.{' '}
<a href="/roadmaps" className="text-black underline">
Start following roadmaps
</a>
</p>
)}
</div>
<h3 className="mt-4 text-sm font-medium">
Only Following Roadmaps
</h3>
{publicCustomRoadmaps.length > 0 ? (
<div className="mt-3 flex flex-wrap items-center gap-2">
{publicCustomRoadmaps.map((r) => (
<SelectionButton
type="button"
key={r.id}
text={r.title}
isDisabled={false}
isSelected={customRoadmaps.includes(r.id)}
onClick={() => {
if (customRoadmapVisibility !== 'selected') {
setCustomRoadmapVisibility('selected');
}
if (customRoadmaps.includes(r.id)) {
setCustomRoadmaps(
customRoadmaps.filter((id) => id !== r.id),
);
} else {
setCustomRoadmaps([...customRoadmaps, r.id]);
}
}}
/>
))}
</div>
) : (
<p className="mt-2 rounded-lg bg-yellow-100 p-2 text-yellow-700">
You have not created any custom roadmaps yet.{' '}
<a href="/roadmaps" className="text-black underline">
Create a custom roadmap
</a>
</p>
)}
</div>
<div className="flex w-full flex-col">
<label
htmlFor="github"
className="text-sm leading-none text-slate-500"
>
Github
</label>
<input
type="text"
name="github"
id="github"
className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="https://github.com/username"
value={github}
onChange={(e) => setGithub((e.target as HTMLInputElement).value)}
<div className="rounded-md border p-4">
<h3 className="text-sm font-medium">Show my Custom Roadmaps</h3>
<div className="mt-3 flex items-center gap-2">
<SelectionButton
type="button"
text="All Roadmaps"
isDisabled={isAllCustomRoadmapsSelected}
isSelected={isAllCustomRoadmapsSelected}
onClick={() => {
setCustomRoadmapVisibility('all');
setCustomRoadmaps([...publicCustomRoadmaps.map((r) => r.id)]);
}}
/>
</div>
<div className="flex w-full flex-col">
<label
htmlFor="twitter"
className="text-sm leading-none text-slate-500"
>
Twitter
</label>
<input
type="text"
name="twitter"
id="twitter"
className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="https://twitter.com/username"
value={twitter}
onChange={(e) => setTwitter((e.target as HTMLInputElement).value)}
<SelectionButton
type="button"
text="Hide my Custom Roadmaps"
isDisabled={customRoadmapVisibility === 'none'}
isSelected={customRoadmapVisibility === 'none'}
onClick={() => {
setCustomRoadmapVisibility('none');
setCustomRoadmaps([]);
}}
/>
</div>
<div className="flex w-full flex-col">
<label
htmlFor="linkedin"
className="text-sm leading-none text-slate-500"
>
LinkedIn
</label>
<input
type="text"
name="linkedin"
id="linkedin"
className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="https://www.linkedin.com/in/username/"
value={linkedin}
onChange={(e) =>
setLinkedin((e.target as HTMLInputElement).value)
}
/>
</div>
<h3 className="mt-4 text-sm font-medium">Only Following Roadmaps</h3>
{publicCustomRoadmaps.length > 0 ? (
<div className="mt-3 flex flex-wrap items-center gap-2">
{publicCustomRoadmaps.map((r) => (
<SelectionButton
type="button"
key={r.id}
text={r.title}
isDisabled={false}
isSelected={customRoadmaps.includes(r.id)}
onClick={() => {
if (customRoadmapVisibility !== 'selected') {
setCustomRoadmapVisibility('selected');
}
if (customRoadmaps.includes(r.id)) {
setCustomRoadmaps(
customRoadmaps.filter((id) => id !== r.id),
);
} else {
setCustomRoadmaps([...customRoadmaps, r.id]);
}
}}
/>
))}
</div>
) : (
<p className="mt-2 rounded-lg bg-yellow-100 p-2 text-yellow-700">
You have not created any custom roadmaps yet.{' '}
<a href="/roadmaps" className="text-black underline">
Create a custom roadmap
</a>
</p>
)}
</div>
<div className="flex w-full flex-col">
<label
htmlFor="website"
className="text-sm leading-none text-slate-500"
>
Website
</label>
<div className="flex w-full flex-col">
<label
htmlFor="github"
className="text-sm leading-none text-slate-500"
>
Github
</label>
<input
type="text"
name="github"
id="github"
className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="https://github.com/username"
value={github}
onChange={(e) => setGithub((e.target as HTMLInputElement).value)}
/>
</div>
<div className="flex w-full flex-col">
<label
htmlFor="twitter"
className="text-sm leading-none text-slate-500"
>
Twitter
</label>
<input
type="text"
name="twitter"
id="twitter"
className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="https://twitter.com/username"
value={twitter}
onChange={(e) => setTwitter((e.target as HTMLInputElement).value)}
/>
</div>
<div className="flex w-full flex-col">
<label
htmlFor="linkedin"
className="text-sm leading-none text-slate-500"
>
LinkedIn
</label>
<input
type="text"
name="linkedin"
id="linkedin"
className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="https://www.linkedin.com/in/username/"
value={linkedin}
onChange={(e) => setLinkedin((e.target as HTMLInputElement).value)}
/>
</div>
<div className="flex w-full flex-col">
<label
htmlFor="website"
className="text-sm leading-none text-slate-500"
>
Website
</label>
<input
type="text"
name="website"
id="website"
className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="https://example.com"
value={website}
onChange={(e) => setWebsite((e.target as HTMLInputElement).value)}
/>
</div>
<div>
<div className="flex items-center gap-2">
<input
type="text"
name="website"
id="website"
className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="https://example.com"
value={website}
onChange={(e) => setWebsite((e.target as HTMLInputElement).value)}
type="checkbox"
name="isAvailableForHire"
id="isAvailableForHire"
checked={isAvailableForHire}
onChange={(e) => setIsAvailableForHire(e.target.checked)}
/>
<label htmlFor="isAvailableForHire" className="">
Available for Hire
</label>
</div>
<p className="mt-1 text-sm text-slate-500">
Enable this if you are open to job opportunities, we will show a
badge on your profile to indicate that you are available for hire.
</p>
</div>
<div>
<div className="flex items-center gap-2">
<input
type="checkbox"
name="isAvailableForHire"
id="isAvailableForHire"
checked={isAvailableForHire}
onChange={(e) => setIsAvailableForHire(e.target.checked)}
/>
<label htmlFor="isAvailableForHire" className="">
Available for Hire
</label>
</div>
<p className="mt-1 text-sm text-slate-500">
Enable this if you are open to job opportunities, we will show a
badge on your profile to indicate that you are available for hire.
</p>
</div>
</>
)}
<button
type="submit"
disabled={isLoading}
className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
>
{isLoading ? 'Please wait...' : 'Update Public Profile'}
</button>
</form>
<button
type="submit"
disabled={isLoading}
className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
>
{isLoading ? 'Please wait...' : 'Update Public Profile'}
</button>
</form>
</>
);
}

67
src/components/UserPublicProfile/UserPublicProfilePage.tsx
Unescape View File

@ -1,54 +1,37 @@
import type { GetPublicProfileResponse } from '../../api/user';
import { UserActivityHeatmap } from './UserPublicActivityHeatmap';
import { UserPublicProfileHeader } from './UserPublicProfileHeader';
import { UserPublicProgressStats } from './UserPublicProgressStats';
import { UserPublicProgresses } from './UserPublicProgresses';
type UserPublicProfilePageProps = GetPublicProfileResponse;
export function UserPublicProfilePage(props: UserPublicProfilePageProps) {
const { activity, username } = props;
const { activity, username, isOwnProfile, profileVisibility } = props;
return (
<section className="container mt-5 pb-10">
<UserPublicProfileHeader userDetails={props!} />
<div className="mt-10">
<UserActivityHeatmap activity={activity!} />
</div>
<div className="mt-10">
<UserPublicProgresses username={username!} roadmaps={props.roadmaps} />
</div>
{/*
{learningRoadmaps.length > 0 && (
<>
<h2 className="mt-6 text-xl font-bold">Learning Progress</h2>
<div className="mt-4 flex flex-col gap-3">
{learningRoadmaps
.sort((a, b) => {
const updatedAtA = new Date(a.updatedAt);
const updatedAtB = new Date(b.updatedAt);
return updatedAtB.getTime() - updatedAtA.getTime();
})
.map((roadmap) => (
<UserPublicProgressStats
key={roadmap.id}
roadmapSlug={roadmap.roadmapSlug}
isCustomResource={roadmap.isCustomResource}
doneCount={roadmap.done || 0}
learningCount={roadmap.learning || 0}
totalCount={roadmap.total || 0}
skippedCount={roadmap.skipped || 0}
resourceId={roadmap.id}
resourceType={'roadmap'}
updatedAt={roadmap.updatedAt}
title={roadmap.title}
username={username!}
/>
))}
</div>
</>
)} */}
</section>
<>
{isOwnProfile && (
<div className="border-b border-yellow-400 bg-yellow-100 p-2 text-center text-sm font-medium">
Only you can see this, you can update your profile from{' '}
<a href="/account/update-profile" className="underline">
here
</a>
.
</div>
)}
<section className="container mt-5 pb-10">
<UserPublicProfileHeader userDetails={props!} />
<div className="mt-10">
<UserActivityHeatmap activity={activity!} />
</div>
<div className="mt-10">
<UserPublicProgresses
username={username!}
roadmaps={props.roadmaps}
publicConfig={props.publicConfig}
/>
</div>
</section>
</>
);
}

45
src/components/UserPublicProfile/UserPublicProgresses.tsx
Unescape View File

@ -6,12 +6,12 @@ import { UserPublicProgressStats } from './UserPublicProgressStats';
type UserPublicProgressesProps = {
username: string;
roadmaps: GetPublicProfileResponse['roadmaps'];
publicConfig: GetPublicProfileResponse['publicConfig'];
};
export function UserPublicProgresses(props: UserPublicProgressesProps) {
const { roadmaps: roadmapProgresses, username } = props;
const [activeTab, setActiveTab] = useState<'built-in' | 'custom'>('built-in');
const { roadmaps: roadmapProgresses, username, publicConfig } = props;
const { roadmapVisibility, customRoadmapVisibility } = publicConfig! || {};
const roadmaps = roadmapProgresses.filter(
(roadmap) => !roadmap.isCustomResource,
@ -22,24 +22,11 @@ export function UserPublicProgresses(props: UserPublicProgressesProps) {
return (
<div>
<div className="flex items-center gap-2">
<SelectionButton
isSelected={activeTab === 'built-in'}
isDisabled={activeTab === 'built-in'}
onClick={() => setActiveTab('built-in')}
text="Learning Activities"
/>
<SelectionButton
isSelected={activeTab === 'custom'}
isDisabled={activeTab === 'custom'}
onClick={() => setActiveTab('custom')}
text="Custom Activities"
/>
</div>
<ul className="mt-4 grid grid-cols-2 gap-2">
{activeTab === 'built-in'
? roadmaps.map((roadmap, counter) => (
{roadmapVisibility !== 'none' && (
<>
<h2 className="text-xs uppercase text-gray-400">My Skills</h2>
<ul className="mt-4 grid grid-cols-2 gap-2">
{roadmaps.map((roadmap, counter) => (
<li key={roadmap.id + counter}>
<UserPublicProgressStats
updatedAt={roadmap.updatedAt}
@ -55,8 +42,16 @@ export function UserPublicProgresses(props: UserPublicProgressesProps) {
username={username!}
/>
</li>
))
: customRoadmaps.map((roadmap, counter) => (
))}
</ul>
</>
)}
{customRoadmapVisibility !== 'none' && (
<>
<h2 className="mt-6 text-xs uppercase text-gray-400">My Roadmaps</h2>
<ul className="mt-4 grid grid-cols-2 gap-2">
{customRoadmaps.map((roadmap, counter) => (
<li key={roadmap.id + counter}>
<UserPublicProgressStats
updatedAt={roadmap.updatedAt}
@ -73,7 +68,9 @@ export function UserPublicProgresses(props: UserPublicProgressesProps) {
/>
</li>
))}
</ul>
</ul>
</>
)}
</div>
);
}

Write Preview
Loading…
Cancel
Save