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 1 year 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. 86
      src/components/UpdateProfile/UpdatePublicProfileForm.tsx
  3. 47
      src/components/UserPublicProfile/UserPublicProfilePage.tsx
  4. 41
      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) {

86
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,20 +199,18 @@ 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>
{profileVisibility === 'public' && (
<>
<form className="mt-6 space-y-4 pb-10" onSubmit={handleSubmit}>
<div className="flex w-full flex-col">
<label
htmlFor="headline"
@ -196,9 +225,7 @@ export function UpdatePublicProfileForm() {
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)
}
onChange={(e) => setHeadline((e.target as HTMLInputElement).value)}
required={profileVisibility === 'public'}
/>
</div>
@ -209,11 +236,16 @@ export function UpdatePublicProfileForm() {
>
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>
<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,6 +254,7 @@ 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>
@ -229,11 +262,11 @@ export function UpdatePublicProfileForm() {
<SelectionButton
type="button"
text="All Roadmaps"
isDisabled={roadmapVisibility === 'all'}
isSelected={roadmapVisibility === 'all'}
isDisabled={isAllRoadmapsSelected}
isSelected={isAllRoadmapsSelected}
onClick={() => {
setRoadmapVisibility('all');
setRoadmaps([]);
setRoadmaps([...profileRoadmaps.map((r) => r.id)]);
}}
/>
<SelectionButton
@ -248,9 +281,7 @@ export function UpdatePublicProfileForm() {
/>
</div>
<h3 className="mt-4 text-sm font-medium">
Only Following Roadmaps
</h3>
<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) => (
@ -290,11 +321,11 @@ export function UpdatePublicProfileForm() {
<SelectionButton
type="button"
text="All Roadmaps"
isDisabled={customRoadmapVisibility === 'all'}
isSelected={customRoadmapVisibility === 'all'}
isDisabled={isAllCustomRoadmapsSelected}
isSelected={isAllCustomRoadmapsSelected}
onClick={() => {
setCustomRoadmapVisibility('all');
setCustomRoadmaps([]);
setCustomRoadmaps([...publicCustomRoadmaps.map((r) => r.id)]);
}}
/>
<SelectionButton
@ -309,9 +340,7 @@ export function UpdatePublicProfileForm() {
/>
</div>
<h3 className="mt-4 text-sm font-medium">
Only Following Roadmaps
</h3>
<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) => (
@ -396,9 +425,7 @@ export function UpdatePublicProfileForm() {
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)
}
onChange={(e) => setLinkedin((e.target as HTMLInputElement).value)}
/>
</div>
@ -438,8 +465,6 @@ export function UpdatePublicProfileForm() {
badge on your profile to indicate that you are available for hire.
</p>
</div>
</>
)}
<button
type="submit"
@ -449,5 +474,6 @@ export function UpdatePublicProfileForm() {
{isLoading ? 'Please wait...' : 'Update Public Profile'}
</button>
</form>
</>
);
}

47
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 (
<>
{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} />
</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}
<UserPublicProgresses
username={username!}
roadmaps={props.roadmaps}
publicConfig={props.publicConfig}
/>
))}
</div>
</>
)} */}
</section>
</>
);
}

41
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>
{roadmapVisibility !== 'none' && (
<>
<h2 className="text-xs uppercase text-gray-400">My Skills</h2>
<ul className="mt-4 grid grid-cols-2 gap-2">
{activeTab === 'built-in'
? roadmaps.map((roadmap, counter) => (
{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}
@ -74,6 +69,8 @@ export function UserPublicProgresses(props: UserPublicProgressesProps) {
</li>
))}
</ul>
</>
)}
</div>
);
}

Write Preview
Loading…
Cancel
Save