From 51b8e58d7cc91dbb64b1051f106182bcd1f2bb4e Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 9 Apr 2024 23:14:07 +0100
Subject: [PATCH] Add public profile page

---
 src/api/user.ts                               |  8 +-
 .../UserPublicActivityHeatmap.tsx             |  7 +-
 .../UserPublicProfilePage.tsx                 |  5 +-
 .../UserPublicProgresses.tsx                  | 97 +++++++++++--------
 src/lib/date.ts                               |  7 ++
 src/pages/u/[username]/index.astro            | 13 ++-
 6 files changed, 88 insertions(+), 49 deletions(-)

diff --git a/src/api/user.ts b/src/api/user.ts
index e82f13b75..b10458dbf 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -54,10 +54,10 @@ export interface UserDocument {
     roadmapVisibility: AllowedRoadmapVisibility;
     customRoadmapVisibility: AllowedCustomRoadmapVisibility;
   };
-  resetPasswordCodeAt: Date;
-  verifiedAt: Date;
-  createdAt: Date;
-  updatedAt: Date;
+  resetPasswordCodeAt: string;
+  verifiedAt: string;
+  createdAt: string;
+  updatedAt: string;
 }
 
 export type UserActivityCount = {
diff --git a/src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx b/src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx
index 8a36c4661..80be3cbaa 100644
--- a/src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx
+++ b/src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx
@@ -2,12 +2,13 @@ import CalendarHeatmap from 'react-calendar-heatmap';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 import 'react-calendar-heatmap/dist/styles.css';
 import 'react-tooltip/dist/react-tooltip.css';
-import { formatActivityDate } from '../../lib/date';
+import { formatActivityDate, formatMonthDate } from '../../lib/date';
 import type { UserActivityCount } from '../../api/user';
 import dayjs from 'dayjs';
 
 type UserActivityHeatmapProps = {
   activity: UserActivityCount;
+  joinedAt: string;
 };
 
 const legends = [
@@ -37,7 +38,9 @@ export function UserActivityHeatmap(props: UserActivityHeatmapProps) {
             Progress updates over the past year
           </p>
         </div>
-        <span className="text-sm text-gray-400">Member since: June 2021</span>
+        <span className="text-sm text-gray-400">
+          Member since: {formatMonthDate(props.joinedAt)}
+        </span>
       </div>
       <CalendarHeatmap
         startDate={startDate}
diff --git a/src/components/UserPublicProfile/UserPublicProfilePage.tsx b/src/components/UserPublicProfile/UserPublicProfilePage.tsx
index be00d140d..d7c8342bb 100644
--- a/src/components/UserPublicProfile/UserPublicProfilePage.tsx
+++ b/src/components/UserPublicProfile/UserPublicProfilePage.tsx
@@ -13,10 +13,11 @@ export function UserPublicProfilePage(props: UserPublicProfilePageProps) {
     isOwnProfile,
     profileVisibility,
     _id: userId,
+    createdAt,
   } = props;
 
   return (
-    <div className="bg-gray-200/40">
+    <div className="bg-gray-200/40 min-h-full flex-grow pt-10 pb-36">
       <div className="container flex flex-col gap-8">
         <PrivateProfileBanner
           isOwnProfile={isOwnProfile}
@@ -25,7 +26,7 @@ export function UserPublicProfilePage(props: UserPublicProfilePageProps) {
 
         <UserPublicProfileHeader userDetails={props!} />
 
-        <UserActivityHeatmap activity={activity!} />
+        <UserActivityHeatmap joinedAt={createdAt} activity={activity!} />
         <UserPublicProgresses
           username={username!}
           userId={userId!}
diff --git a/src/components/UserPublicProfile/UserPublicProgresses.tsx b/src/components/UserPublicProfile/UserPublicProgresses.tsx
index 5378aba3d..ce5756270 100644
--- a/src/components/UserPublicProfile/UserPublicProgresses.tsx
+++ b/src/components/UserPublicProfile/UserPublicProgresses.tsx
@@ -1,5 +1,6 @@
 import type { GetPublicProfileResponse } from '../../api/user';
 import { UserPublicProgressStats } from './UserPublicProgressStats';
+import { getPercentage } from '../../helper/number.ts';
 
 type UserPublicProgressesProps = {
   userId: string;
@@ -42,52 +43,70 @@ export function UserPublicProgresses(props: UserPublicProgressesProps) {
   return (
     <div>
       {customRoadmapVisibility !== 'none' && customRoadmaps?.length > 0 && (
-        <div className='mb-5'>
+        <div className="mb-5">
           <h2 className="mb-2 text-xs uppercase tracking-wide text-gray-400">
             Roadmaps made by me
           </h2>
-          <div className="grid grid-cols-3">
-            {customRoadmaps.map((roadmap, counter) => (
-              <a
-                target="_blank"
-                href={`/r/${roadmap.roadmapSlug}`}
-                key={roadmap.id + counter}
-                className="rounded-md border bg-white px-3 py-2 text-left text-sm shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50"
-              >
-                {roadmap.title}
-              </a>
-            ))}
+          <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 md:grid-cols-3">
+            {customRoadmaps.map((roadmap, counter) => {
+              const doneCount = roadmap.done;
+              const skippedCount = roadmap.skipped;
+              const totalCount = roadmap.total;
+
+              const totalMarked = doneCount + skippedCount;
+              const progressPercentage = getPercentage(totalMarked, totalCount);
+
+              return (
+                <a
+                  target="_blank"
+                  href={`/r/${roadmap.roadmapSlug}`}
+                  key={roadmap.id + counter}
+                  className="rounded-md border bg-white px-3 py-2 text-left text-sm shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50"
+                >
+                  {roadmap.title}
+                </a>
+              );
+            })}
           </div>
         </div>
       )}
 
-      <div>
-        {roadmapVisibility !== 'none' && (
-          <>
-            <h2 className="text-xs uppercase text-gray-400">My Skills</h2>
-            <ul className="">
-              {roadmaps.map((roadmap, counter) => (
-                <li key={roadmap.id + counter} className="bg-white">
-                  <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!}
-                    userId={userId}
-                  />
-                </li>
-              ))}
-            </ul>
-          </>
-        )}
-      </div>
+      {roadmapVisibility !== 'none' && roadmaps.length > 0 && (
+        <>
+          <h2 className="mb-2 text-xs uppercase tracking-wide text-gray-400">
+            Skills I have mastered
+          </h2>
+          <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 md:grid-cols-3">
+            {roadmaps.map((roadmap, counter) => {
+              const percentageDone = getPercentage(
+                roadmap.done + roadmap.skipped,
+                roadmap.total,
+              );
+
+              return (
+                <a
+                  target="_blank"
+                  key={roadmap.id + counter}
+                  href={`/${roadmap.id}?s=${userId}`}
+                  className="relative group border-gray-300 flex items-center justify-between rounded-md border bg-white px-3 py-2 text-left text-sm transition-all hover:border-gray-400 overflow-hidden"
+                >
+                  <span className="flex-grow truncate">{roadmap.title}</span>
+                  <span className="text-xs text-gray-400">
+                    {parseInt(percentageDone, 10)}%
+                  </span>
+
+                  <span
+                    className="absolute transition-colors left-0 top-0 block h-full cursor-pointer rounded-tl-md bg-black/5 group-hover:bg-black/10"
+                    style={{
+                      width: `${percentageDone}%`,
+                    }}
+                  ></span>
+                </a>
+              );
+            })}
+          </div>
+        </>
+      )}
     </div>
   );
 }
diff --git a/src/lib/date.ts b/src/lib/date.ts
index 5d34da249..ecb6bd726 100644
--- a/src/lib/date.ts
+++ b/src/lib/date.ts
@@ -33,6 +33,13 @@ export function getRelativeTimeString(date: string): string {
   return relativeTime;
 }
 
+export function formatMonthDate(date: string): string {
+  return new Date(date).toLocaleDateString('en-US', {
+    month: 'long',
+    year: 'numeric',
+  });
+}
+
 export function formatActivityDate(date: string): string {
   return new Date(date).toLocaleDateString('en-US', {
     month: 'long',
diff --git a/src/pages/u/[username]/index.astro b/src/pages/u/[username]/index.astro
index 0dcdaa62c..843c4bb73 100644
--- a/src/pages/u/[username]/index.astro
+++ b/src/pages/u/[username]/index.astro
@@ -3,6 +3,8 @@ import { FrownIcon } from 'lucide-react';
 import { userApi } from '../../../api/user';
 import AccountLayout from '../../../layouts/AccountLayout.astro';
 import { UserPublicProfilePage } from '../../../components/UserPublicProfile/UserPublicProfilePage';
+import OpenSourceBanner from '../../../components/OpenSourceBanner.astro';
+import Footer from '../../../components/Footer.astro';
 
 interface Params extends Record<string, string | undefined> {
   username: string;
@@ -40,11 +42,18 @@ if (error || !userDetails) {
             height='120'
           />
         </picture>
-        <h2 class='my-2 sm:my-3 text-2xl sm:text-4xl font-bold'>Problem loading user!</h2>
+        <h2 class='my-2 text-2xl font-bold sm:my-3 sm:text-4xl'>
+          Problem loading user!
+        </h2>
         <p class='text-lg'>
-          <span class='bg-red-600 text-white py-1 rounded-md px-2'>{errorMessage}</span>
+          <span class='rounded-md bg-red-600 px-2 py-1 text-white'>
+            {errorMessage}
+          </span>
         </p>
       </div>
     )
   }
+
+  <OpenSourceBanner />
+  <Footer />
 </AccountLayout>