Arik Chakma
9 months ago
parent
707a7242fc
commit
e006f63e14
5 changed files with 469 additions and 95 deletions
@ -0,0 +1,426 @@ |
|||||||
|
import { type FormEvent, useEffect, useState } from 'react'; |
||||||
|
import { httpGet, httpPatch } from '../../lib/http'; |
||||||
|
import { pageProgressMessage } from '../../stores/page'; |
||||||
|
import type { |
||||||
|
AllowedCustomRoadmapVisibility, |
||||||
|
AllowedProfileVisibility, |
||||||
|
AllowedRoadmapVisibility, |
||||||
|
UserDocument, |
||||||
|
} from '../../api/user'; |
||||||
|
import { SelectionButton } from '../RoadCard/SelectionButton'; |
||||||
|
import { ArrowUpRight } from 'lucide-react'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
|
||||||
|
type RoadmapType = { |
||||||
|
id: string; |
||||||
|
title: string; |
||||||
|
isCustomResource: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
type GetProfileSettingsResponse = Pick< |
||||||
|
UserDocument, |
||||||
|
'username' | 'profileVisibility' | 'publicConfig' | 'links' |
||||||
|
>; |
||||||
|
|
||||||
|
export function UpdatePublicProfileForm() { |
||||||
|
const [profileVisibility, setProfileVisibility] = |
||||||
|
useState<AllowedProfileVisibility>('private'); |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
const [headline, setHeadline] = useState(''); |
||||||
|
const [username, setUsername] = useState(''); |
||||||
|
const [roadmapVisibility, setRoadmapVisibility] = |
||||||
|
useState<AllowedRoadmapVisibility>('none'); |
||||||
|
const [customRoadmapVisibility, setCustomRoadmapVisibility] = |
||||||
|
useState<AllowedCustomRoadmapVisibility>('none'); |
||||||
|
const [roadmaps, setRoadmaps] = useState<string[]>([]); |
||||||
|
const [customRoadmaps, setCustomRoadmaps] = useState<string[]>([]); |
||||||
|
|
||||||
|
const [github, setGithub] = useState(''); |
||||||
|
const [twitter, setTwitter] = useState(''); |
||||||
|
const [linkedin, setLinkedin] = useState(''); |
||||||
|
const [website, setWebsite] = useState(''); |
||||||
|
|
||||||
|
const [profileRoadmaps, setProfileRoadmaps] = useState<RoadmapType[]>([]); |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(false); |
||||||
|
const [success, setSuccess] = useState(''); |
||||||
|
|
||||||
|
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { |
||||||
|
e.preventDefault(); |
||||||
|
setIsLoading(true); |
||||||
|
setSuccess(''); |
||||||
|
|
||||||
|
const { response, error } = await httpPatch( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-update-public-profile-config`, |
||||||
|
{ |
||||||
|
profileVisibility, |
||||||
|
headline, |
||||||
|
username, |
||||||
|
roadmapVisibility, |
||||||
|
customRoadmapVisibility, |
||||||
|
roadmaps, |
||||||
|
customRoadmaps, |
||||||
|
github, |
||||||
|
twitter, |
||||||
|
linkedin, |
||||||
|
website, |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
setIsLoading(false); |
||||||
|
toast.error(error?.message || 'Something went wrong'); |
||||||
|
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
await loadProfileSettings(); |
||||||
|
setSuccess('Profile updated successfully'); |
||||||
|
}; |
||||||
|
|
||||||
|
const loadProfileSettings = async () => { |
||||||
|
setIsLoading(true); |
||||||
|
|
||||||
|
const { error, response } = await httpGet<UserDocument>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-profile-settings`, |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
setIsLoading(false); |
||||||
|
toast.error(error?.message || 'Something went wrong'); |
||||||
|
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const { |
||||||
|
links, |
||||||
|
username, |
||||||
|
profileVisibility: defaultProfileVisibility, |
||||||
|
publicConfig, |
||||||
|
} = response; |
||||||
|
setUsername(username || ''); |
||||||
|
setGithub(links?.github || ''); |
||||||
|
setTwitter(links?.twitter || ''); |
||||||
|
setLinkedin(links?.linkedin || ''); |
||||||
|
setWebsite(links?.website || ''); |
||||||
|
setProfileVisibility(defaultProfileVisibility || 'private'); |
||||||
|
setHeadline(publicConfig?.headline || ''); |
||||||
|
setRoadmapVisibility(publicConfig?.roadmapVisibility || 'none'); |
||||||
|
setCustomRoadmapVisibility(publicConfig?.customRoadmapVisibility || 'none'); |
||||||
|
setCustomRoadmaps(publicConfig?.customRoadmaps || []); |
||||||
|
setRoadmaps(publicConfig?.roadmaps || []); |
||||||
|
setCustomRoadmapVisibility(publicConfig?.customRoadmapVisibility || 'none'); |
||||||
|
|
||||||
|
setIsLoading(false); |
||||||
|
}; |
||||||
|
|
||||||
|
const loadProfileRoadmaps = async () => { |
||||||
|
setIsLoading(true); |
||||||
|
|
||||||
|
const { error, response } = await httpGet<{ |
||||||
|
roadmaps: RoadmapType[]; |
||||||
|
}>(`${import.meta.env.PUBLIC_API_URL}/v1-get-profile-roadmaps`); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
setIsLoading(false); |
||||||
|
toast.error(error?.message || 'Something went wrong'); |
||||||
|
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setProfileRoadmaps(response?.roadmaps || []); |
||||||
|
setIsLoading(false); |
||||||
|
}; |
||||||
|
|
||||||
|
// Make a request to the backend to fill in the form with the current values
|
||||||
|
useEffect(() => { |
||||||
|
Promise.all([loadProfileSettings(), loadProfileRoadmaps()]).finally(() => { |
||||||
|
pageProgressMessage.set(''); |
||||||
|
}); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const publicCustomRoadmaps = profileRoadmaps.filter( |
||||||
|
(r) => r.isCustomResource, |
||||||
|
); |
||||||
|
const publicRoadmaps = profileRoadmaps.filter((r) => !r.isCustomResource); |
||||||
|
|
||||||
|
const publicProfileUrl = `/u/${username}`; |
||||||
|
|
||||||
|
return ( |
||||||
|
<form className="mt-16 space-y-4 pb-10" onSubmit={handleSubmit}> |
||||||
|
<div className="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 && ( |
||||||
|
<a href={publicProfileUrl} className="shrink-0"> |
||||||
|
<ArrowUpRight className="h-6 w-6 stroke-[3]" /> |
||||||
|
</a> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
<SelectionButton |
||||||
|
type="button" |
||||||
|
text="Public" |
||||||
|
isDisabled={profileVisibility === 'public'} |
||||||
|
isSelected={profileVisibility === 'public'} |
||||||
|
onClick={() => setProfileVisibility('public')} |
||||||
|
/> |
||||||
|
<SelectionButton |
||||||
|
type="button" |
||||||
|
text="Private" |
||||||
|
isDisabled={profileVisibility === 'private'} |
||||||
|
isSelected={profileVisibility === 'private'} |
||||||
|
onClick={() => setProfileVisibility('private')} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{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" |
||||||
|
placeholder="johndoe" |
||||||
|
value={username} |
||||||
|
onChange={(e) => |
||||||
|
setUsername((e.target as HTMLInputElement).value) |
||||||
|
} |
||||||
|
required={profileVisibility === 'public'} |
||||||
|
/> |
||||||
|
</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')} |
||||||
|
/> |
||||||
|
<SelectionButton |
||||||
|
type="button" |
||||||
|
text="Hide my Activity" |
||||||
|
isDisabled={roadmapVisibility === 'none'} |
||||||
|
isSelected={roadmapVisibility === 'none'} |
||||||
|
onClick={() => setRoadmapVisibility('none')} |
||||||
|
/> |
||||||
|
</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> |
||||||
|
|
||||||
|
<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')} |
||||||
|
/> |
||||||
|
<SelectionButton |
||||||
|
type="button" |
||||||
|
text="Hide my Custom Roadmaps" |
||||||
|
isDisabled={customRoadmapVisibility === 'none'} |
||||||
|
isSelected={customRoadmapVisibility === 'none'} |
||||||
|
onClick={() => setCustomRoadmapVisibility('none')} |
||||||
|
/> |
||||||
|
</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> |
||||||
|
<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> |
||||||
|
</> |
||||||
|
)} |
||||||
|
|
||||||
|
{success && ( |
||||||
|
<p className="mt-2 rounded-lg bg-green-100 p-2 text-green-700"> |
||||||
|
{success} |
||||||
|
</p> |
||||||
|
)} |
||||||
|
|
||||||
|
<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> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue