feat: user public profile page

src/api/user.ts

@@ -45,6 +45,7 @@ export interface UserDocument {
   username?: string;
   profileVisibility: AllowedProfileVisibility;
   publicConfig?: {
+    isAvailableForHire: boolean;
     headline: string;
     roadmaps: string[];
     customRoadmaps: string[];
@@ -74,34 +75,23 @@ type ProgressResponse = {
   roadmapSlug?: string;
 };
 
-export type UserResourceProgressStats = {
+export type GetPublicProfileResponse = Omit<
-  done: {
-    total: number;
-  };
-  learning: {
-    total: number;
-    roadmaps: ProgressResponse[];
-    bestPractices: ProgressResponse[];
-  };
-};
-
-export type GetUserByUsernameResponse = Omit<
   UserDocument,
   | 'password'
   | 'verificationCode'
   | 'resetPasswordCode'
   | 'resetPasswordCodeAt'
   | 'email'
-> &
+> & {
-  UserResourceProgressStats & {
+  activity: UserActivityCount;
-    activity: UserActivityCount;
+  roadmaps: ProgressResponse[];
-  };
+};
 
 export function userApi(context: APIContext) {
   return {
-    getUserByUsername: async function (username: string) {
+    getPublicProfile: async function (username: string) {
-      return api(context).get<GetUserByUsernameResponse>(
+      return api(context).get<GetPublicProfileResponse>(
-        `${import.meta.env.PUBLIC_API_URL}/v1-get-user-by-username/${username}`,
+        `${import.meta.env.PUBLIC_API_URL}/v1-get-public-profile/${username}`,
       );
     },
   };

src/components/UpdateProfile/UpdatePublicProfileForm.tsx

@@ -28,6 +28,7 @@ export function UpdatePublicProfileForm() {
 
   const toast = useToast();
 
+  const [isAvailableForHire, setIsAvailableForHire] = useState(false);
   const [headline, setHeadline] = useState('');
   const [username, setUsername] = useState('');
   const [roadmapVisibility, setRoadmapVisibility] =
@@ -53,6 +54,7 @@ export function UpdatePublicProfileForm() {
     const { response, error } = await httpPatch(
       `${import.meta.env.PUBLIC_API_URL}/v1-update-public-profile-config`,
       {
+        isAvailableForHire,
         profileVisibility,
         headline,
         username,
@@ -98,6 +100,7 @@ export function UpdatePublicProfileForm() {
       profileVisibility: defaultProfileVisibility,
       publicConfig,
     } = response;
+
     setUsername(username || '');
     setGithub(links?.github || '');
     setTwitter(links?.twitter || '');
@@ -110,6 +113,7 @@ export function UpdatePublicProfileForm() {
     setCustomRoadmaps(publicConfig?.customRoadmaps || []);
     setRoadmaps(publicConfig?.roadmaps || []);
     setCustomRoadmapVisibility(publicConfig?.customRoadmapVisibility || 'none');
+    setIsAvailableForHire(publicConfig?.isAvailableForHire || false);
 
     setIsLoading(false);
   };
@@ -152,7 +156,7 @@ export function UpdatePublicProfileForm() {
         <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">
+            <a href={publicProfileUrl} target="_blank" className="shrink-0">
               <ArrowUpRight className="h-6 w-6 stroke-[3]" />
             </a>
           )}
@@ -227,14 +231,20 @@ export function UpdatePublicProfileForm() {
                 text="All Roadmaps"
                 isDisabled={roadmapVisibility === 'all'}
                 isSelected={roadmapVisibility === 'all'}
-                onClick={() => setRoadmapVisibility('all')}
+                onClick={() => {
+                  setRoadmapVisibility('all');
+                  setRoadmaps([]);
+                }}
               />
               <SelectionButton
                 type="button"
                 text="Hide my Activity"
                 isDisabled={roadmapVisibility === 'none'}
                 isSelected={roadmapVisibility === 'none'}
-                onClick={() => setRoadmapVisibility('none')}
+                onClick={() => {
+                  setRoadmapVisibility('none');
+                  setRoadmaps([]);
+                }}
               />
             </div>
 
@@ -282,14 +292,20 @@ export function UpdatePublicProfileForm() {
                 text="All Roadmaps"
                 isDisabled={customRoadmapVisibility === 'all'}
                 isSelected={customRoadmapVisibility === 'all'}
-                onClick={() => setCustomRoadmapVisibility('all')}
+                onClick={() => {
+                  setCustomRoadmapVisibility('all');
+                  setCustomRoadmaps([]);
+                }}
               />
               <SelectionButton
                 type="button"
                 text="Hide my Custom Roadmaps"
                 isDisabled={customRoadmapVisibility === 'none'}
                 isSelected={customRoadmapVisibility === 'none'}
-                onClick={() => setCustomRoadmapVisibility('none')}
+                onClick={() => {
+                  setCustomRoadmapVisibility('none');
+                  setCustomRoadmaps([]);
+                }}
               />
             </div>
 
@@ -403,6 +419,25 @@ export function UpdatePublicProfileForm() {
               onChange={(e) => setWebsite((e.target as HTMLInputElement).value)}
             />
           </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>
         </>
       )}
 

src/components/UserPublicAccount/UserPublicDetails.tsx

@@ -1,61 +0,0 @@
-import { Github, Globe, LinkedinIcon, Twitter } from 'lucide-react';
-import type { GetUserByUsernameResponse } from '../../api/user';
-
-type UserPublicDetailsProps = {
-  userDetails: GetUserByUsernameResponse;
-};
-
-export function UserPublicDetails(props: UserPublicDetailsProps) {
-  const { userDetails } = props;
-  const { name, username, links } = userDetails;
-
-  return (
-    <div>
-      <div className="flex items-center gap-4">
-        <img
-          src="https://dodrc8eu8m09s.cloudfront.net/avatars/64ab82e214678473bb5d5ac2_1688961762495"
-          alt={name}
-          className="h-28 w-28 rounded-full"
-        />
-
-        <div>
-          <h1 className="text-2xl font-bold">{name}</h1>
-          <p className="mt-1 text-sm text-gray-500">
-            I'm a Frontend developer interested in filmmaking, content creation,
-            vlogging, and backend, currently living in Dhaka, Bangladesh. Right
-            now I'm writing html at @roadmapsh. Let's grab a coffee.
-          </p>
-        </div>
-      </div>
-
-      <div className="mt-6 flex items-center gap-2 border-b pb-4">
-        {links?.github && <UserLink href={links?.github} icon={Github} />}
-        {links?.linkedin && (
-          <UserLink href={links?.linkedin} icon={LinkedinIcon} />
-        )}
-        {links?.twitter && <UserLink href={links?.twitter} icon={Twitter} />}
-        {links?.website && <UserLink href={links?.website} icon={Globe} />}
-      </div>
-    </div>
-  );
-}
-
-type UserLinkProps = {
-  href: string;
-  icon: typeof Github;
-};
-
-export function UserLink(props: UserLinkProps) {
-  const { href, icon: Icon } = props;
-
-  return (
-    <a
-      target="_blank"
-      href={href}
-      className="flex items-center gap-0.5 text-blue-700"
-    >
-      <Icon className="h-3.5 shrink-0 stroke-2" />
-      <span className="truncate text-sm">{href}</span>
-    </a>
-  );
-}

src/components/UserPublicAccount/UserPublicProgressStats.tsx

@@ -1,79 +0,0 @@
-import { getRelativeTimeString } from '../../lib/date';
-
-type UserPublicProgressStats = {
-  resourceType: 'roadmap' | 'best-practice';
-  resourceId: string;
-  title: string;
-  updatedAt: string;
-  totalCount: number;
-  doneCount: number;
-  learningCount: number;
-  skippedCount: number;
-  showClearButton?: boolean;
-  isCustomResource?: boolean;
-  roadmapSlug?: string;
-  username: string;
-};
-
-export function UserPublicProgressStats(props: UserPublicProgressStats) {
-  const {
-    updatedAt,
-    resourceType,
-    resourceId,
-    title,
-    totalCount,
-    learningCount,
-    doneCount,
-    skippedCount,
-    roadmapSlug,
-    isCustomResource = false,
-    username,
-  } = props;
-
-  // Currently we only support roadmap not (best-practices)
-  const url = `/u/${username}/${isCustomResource ? roadmapSlug : resourceId}`;
-  const totalMarked = doneCount + skippedCount;
-  const progressPercentage = Math.round((totalMarked / totalCount) * 100);
-
-  return (
-    <div>
-      <a
-        href={url}
-        className="group relative flex cursor-pointer items-center rounded-t-md border p-3 text-gray-600 hover:border-gray-300 hover:text-black"
-      >
-        <span
-          className={`absolute left-0 top-0 block h-full cursor-pointer rounded-tl-md bg-black/5 group-hover:bg-black/10`}
-          style={{
-            width: `${progressPercentage}%`,
-          }}
-        ></span>
-        <span className="relative  flex-1 cursor-pointer truncate">
-          {title}
-        </span>
-        <span className="ml-1 cursor-pointer text-sm text-gray-400">
-          {getRelativeTimeString(updatedAt)}
-        </span>
-      </a>
-      <div className="sm:space-between flex flex-row items-start rounded-b-md border border-t-0 px-2 py-2 text-xs text-gray-500">
-        <span className="hidden flex-1 gap-1 sm:flex">
-          {doneCount > 0 && (
-            <>
-              <span>{doneCount} done</span> &bull;
-            </>
-          )}
-          {learningCount > 0 && (
-            <>
-              <span>{learningCount} in progress</span> &bull;
-            </>
-          )}
-          {skippedCount > 0 && (
-            <>
-              <span>{skippedCount} skipped</span> &bull;
-            </>
-          )}
-          <span>{totalCount} total</span>
-        </span>
-      </div>
-    </div>
-  );
-}

src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx

@@ -21,7 +21,6 @@ export function UserActivityHeatmap(props: UserActivityHeatmapProps) {
 
   return (
     <>
-      <h2 className="mb-4 text-xl font-bold">Activity</h2>
       <CalendarHeatmap
         startDate={startDate}
         endDate={endDate}

src/components/UserPublicProfile/UserPublicProfileHeader.tsx

@@ -0,0 +1,59 @@
+import { Github, Globe, LinkedinIcon, Twitter } from 'lucide-react';
+import type { GetPublicProfileResponse } from '../../api/user';
+
+type UserPublicProfileHeaderProps = {
+  userDetails: GetPublicProfileResponse;
+};
+
+export function UserPublicProfileHeader(props: UserPublicProfileHeaderProps) {
+  const { userDetails } = props;
+  const { name, username, links, publicConfig } = userDetails;
+  const { headline, isAvailableForHire } = publicConfig!;
+
+  return (
+    <div className="flex items-center gap-8">
+      <img
+        src="https://dodrc8eu8m09s.cloudfront.net/avatars/64ab82e214678473bb5d5ac2_1688961762495"
+        alt={name}
+        className="h-32 w-32 rounded-full"
+      />
+
+      <div>
+        {isAvailableForHire && (
+          <span className="mb-1 inline-block rounded-md bg-green-100 px-2 py-1 text-xs font-medium text-green-700">
+            Available for hire
+          </span>
+        )}
+        <h1 className="text-2xl font-bold">{name}</h1>
+        <p className="mt-1 text-sm text-gray-500">{headline}</p>
+        <div className="mt-3 flex items-center gap-2">
+          {links?.github && <UserLink href={links?.github} icon={Github} />}
+          {links?.linkedin && (
+            <UserLink href={links?.linkedin} icon={LinkedinIcon} />
+          )}
+          {links?.twitter && <UserLink href={links?.twitter} icon={Twitter} />}
+          {links?.website && <UserLink href={links?.website} icon={Globe} />}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type UserLinkProps = {
+  href: string;
+  icon: typeof Github;
+};
+
+export function UserLink(props: UserLinkProps) {
+  const { href, icon: Icon } = props;
+
+  return (
+    <a
+      target="_blank"
+      href={href}
+      className="flex h-6 w-6 items-center justify-center rounded-md border"
+    >
+      <Icon className="h-3.5 w-3.5 shrink-0 stroke-2" />
+    </a>
+  );
+}

src/components/UserPublicProfile/UserPublicProfilePage.tsx

@@ -1,22 +1,24 @@
-import type { GetUserByUsernameResponse } from '../../api/user';
+import type { GetPublicProfileResponse } from '../../api/user';
 import { UserActivityHeatmap } from './UserPublicActivityHeatmap';
-import { UserPublicDetails } from './UserPublicDetails';
+import { UserPublicProfileHeader } from './UserPublicProfileHeader';
 import { UserPublicProgressStats } from './UserPublicProgressStats';
+import { UserPublicProgresses } from './UserPublicProgresses';
 
-type UserPublicAccountPageProps = GetUserByUsernameResponse;
+type UserPublicProfilePageProps = GetPublicProfileResponse;
 
-export function UserPublicAccountPage(props: UserPublicAccountPageProps) {
+export function UserPublicProfilePage(props: UserPublicProfilePageProps) {
-  const { activity, learning, username } = props;
+  const { activity, username } = props;
-
-  const learningRoadmaps = learning?.roadmaps || [];
 
   return (
     <section className="container mt-5 pb-10">
-      <UserPublicDetails userDetails={props!} />
+      <UserPublicProfileHeader userDetails={props!} />
-      <div className="mt-6">
+      <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>
@@ -41,12 +43,12 @@ export function UserPublicAccountPage(props: UserPublicAccountPageProps) {
                   resourceType={'roadmap'}
                   updatedAt={roadmap.updatedAt}
                   title={roadmap.title}
-                  username={username}
+                  username={username!}
                 />
               ))}
           </div>
         </>
-      )}
+      )} */}
     </section>
   );
 }

src/components/UserPublicProfile/UserPublicProgressStats.tsx

@@ -0,0 +1,62 @@
+import { getPercentage } from '../../helper/number';
+import { getRelativeTimeString } from '../../lib/date';
+
+type UserPublicProgressStats = {
+  resourceType: 'roadmap';
+  resourceId: string;
+  title: string;
+  updatedAt: string;
+  totalCount: number;
+  doneCount: number;
+  learningCount: number;
+  skippedCount: number;
+  showClearButton?: boolean;
+  isCustomResource?: boolean;
+  roadmapSlug?: string;
+  username: string;
+};
+
+export function UserPublicProgressStats(props: UserPublicProgressStats) {
+  const {
+    updatedAt,
+    resourceId,
+    title,
+    totalCount,
+    learningCount,
+    doneCount,
+    skippedCount,
+    roadmapSlug,
+    isCustomResource = false,
+    username,
+  } = props;
+
+  // Currently we only support roadmap not (best-practices)
+  const url = `/u/${username}/${isCustomResource ? roadmapSlug : resourceId}`;
+  const totalMarked = doneCount + skippedCount;
+  const progressPercentage = getPercentage(totalMarked, totalCount);
+
+  return (
+    <a href={url} className="group block rounded-md border p-2.5">
+      <h3 className="flex-1 cursor-pointer truncate text-lg font-medium">
+        {title}
+      </h3>
+      <div className="relative mt-3 h-1 w-full overflow-hidden rounded-full bg-black/5">
+        <div
+          className={`absolute left-0 top-0 h-full bg-black/40`}
+          style={{
+            width: `${progressPercentage}%`,
+          }}
+        />
+      </div>
+
+      <div className="mt-2 flex items-center justify-between gap-2">
+        <span className="text-sm text-gray-600">
+          {progressPercentage}% completed
+        </span>
+        <span className="text-sm text-gray-400">
+          Last updated {getRelativeTimeString(updatedAt)}
+        </span>
+      </div>
+    </a>
+  );
+}

src/components/UserPublicProfile/UserPublicProgresses.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import type { GetPublicProfileResponse } from '../../api/user';
+import { SelectionButton } from '../RoadCard/SelectionButton';
+import { UserPublicProgressStats } from './UserPublicProgressStats';
+
+type UserPublicProgressesProps = {
+  username: string;
+  roadmaps: GetPublicProfileResponse['roadmaps'];
+};
+
+export function UserPublicProgresses(props: UserPublicProgressesProps) {
+  const { roadmaps: roadmapProgresses, username } = props;
+
+  const [activeTab, setActiveTab] = useState<'built-in' | 'custom'>('built-in');
+
+  const roadmaps = roadmapProgresses.filter(
+    (roadmap) => !roadmap.isCustomResource,
+  );
+  const customRoadmaps = roadmapProgresses.filter(
+    (roadmap) => roadmap.isCustomResource,
+  );
+
+  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) => (
+              <li key={roadmap.id + counter}>
+                <UserPublicProgressStats
+                  updatedAt={roadmap.updatedAt}
+                  title={roadmap.title}
+                  totalCount={roadmap.total}
+                  doneCount={roadmap.done}
+                  learningCount={roadmap.learning}
+                  skippedCount={roadmap.skipped}
+                  resourceId={roadmap.id}
+                  resourceType="roadmap"
+                  roadmapSlug={roadmap.roadmapSlug}
+                  isCustomResource={false}
+                  username={username!}
+                />
+              </li>
+            ))
+          : customRoadmaps.map((roadmap, counter) => (
+              <li key={roadmap.id + counter}>
+                <UserPublicProgressStats
+                  updatedAt={roadmap.updatedAt}
+                  title={roadmap.title}
+                  totalCount={roadmap.total}
+                  doneCount={roadmap.done}
+                  learningCount={roadmap.learning}
+                  skippedCount={roadmap.skipped}
+                  resourceId={roadmap.id}
+                  resourceType="roadmap"
+                  roadmapSlug={roadmap.roadmapSlug}
+                  username={username!}
+                  isCustomResource={true}
+                />
+              </li>
+            ))}
+      </ul>
+    </div>
+  );
+}

src/helper/number.ts

@@ -0,0 +1,3 @@
+export function getPercentage(portion: number, total: number) {
+  return portion > 0 ? ((portion / total) * 100).toFixed(2) : 0;
+}

src/pages/u/[username]/index.astro

@@ -1,7 +1,7 @@
 ---
-import { UserPublicAccountPage } from '../../../components/UserPublicAccount/UserPublicAccountPage';
 import { userApi } from '../../../api/user';
 import AccountLayout from '../../../layouts/AccountLayout.astro';
+import { UserPublicProfilePage } from '../../../components/UserPublicProfile/UserPublicProfilePage';
 
 const { username } = Astro.params;
 if (!username) {
@@ -10,7 +10,7 @@ if (!username) {
 
 const userClient = userApi(Astro as any);
 const { response: userDetails, error } =
-  await userClient.getUserByUsername(username);
+  await userClient.getPublicProfile(username);
 
 if (error || !userDetails) {
   return Astro.redirect('/404');
@@ -18,5 +18,5 @@ if (error || !userDetails) {
 ---
 
 <AccountLayout title={userDetails?.name}>
-  <UserPublicAccountPage {...userDetails} client:load />
+  <UserPublicProfilePage {...userDetails} client:load />
 </AccountLayout>