feat: show roadmap progress

src/components/UserPublicAccount/UserPublicAccountPage.tsx

@@ -6,10 +6,9 @@ import { UserPublicProgressStats } from './UserPublicProgressStats';
 type UserPublicAccountPageProps = GetUserByUsernameResponse;
 
 export function UserPublicAccountPage(props: UserPublicAccountPageProps) {
-  const { activity, learning } = props;
+  const { activity, learning, username } = props;
 
   const learningRoadmaps = learning?.roadmaps || [];
-  const learningBestPractices = learning?.bestPractices || [];
 
   return (
     <section className="container mt-5 pb-10">
@@ -18,7 +17,7 @@ export function UserPublicAccountPage(props: UserPublicAccountPageProps) {
         <UserActivityHeatmap activity={activity!} />
       </div>
 
-      {(learningRoadmaps.length > 0 || learningBestPractices.length > 0) && (
+      {learningRoadmaps.length > 0 && (
         <>
           <h2 className="mt-6 text-xl font-bold">Learning Progress</h2>
           <div className="mt-4 flex flex-col gap-3">
@@ -42,28 +41,7 @@ export function UserPublicAccountPage(props: UserPublicAccountPageProps) {
                   resourceType={'roadmap'}
                   updatedAt={roadmap.updatedAt}
                   title={roadmap.title}
-                />
-              ))}
-
-            {learningBestPractices
-              .sort((a, b) => {
-                const updatedAtA = new Date(a.updatedAt);
-                const updatedAtB = new Date(b.updatedAt);
-
-                return updatedAtB.getTime() - updatedAtA.getTime();
-              })
-              .map((bestPractice) => (
-                <UserPublicProgressStats
-                  isCustomResource={bestPractice.isCustomResource}
-                  key={bestPractice.id}
-                  doneCount={bestPractice.done || 0}
-                  totalCount={bestPractice.total || 0}
-                  learningCount={bestPractice.learning || 0}
-                  resourceId={bestPractice.id}
-                  skippedCount={bestPractice.skipped || 0}
-                  resourceType={'best-practice'}
-                  title={bestPractice.title}
-                  updatedAt={bestPractice.updatedAt}
+                  username={username}
                 />
               ))}
           </div>

src/components/UserPublicAccount/UserPublicActivityHeatmap.tsx

@@ -26,11 +26,6 @@ export function UserActivityHeatmap(props: UserActivityHeatmapProps) {
         startDate={startDate}
         endDate={endDate}
         values={data}
-        onClick={(value) => {
-          console.log('-'.repeat(20));
-          console.log('Clicked on value', value);
-          console.log('-'.repeat(20));
-        }}
         classForValue={(value) => {
           if (!value) {
             return 'fill-gray-100 rounded-md [rx:2px]';

src/components/UserPublicAccount/UserPublicProgressStats.tsx

@@ -12,6 +12,7 @@ type UserPublicProgressStats = {
   showClearButton?: boolean;
   isCustomResource?: boolean;
   roadmapSlug?: string;
+  username: string;
 };
 
 export function UserPublicProgressStats(props: UserPublicProgressStats) {
@@ -26,17 +27,11 @@ export function UserPublicProgressStats(props: UserPublicProgressStats) {
     skippedCount,
     roadmapSlug,
     isCustomResource = false,
+    username,
   } = props;
 
-  let url =
-    resourceType === 'roadmap'
-      ? `/${resourceId}`
-      : `/best-practices/${resourceId}`;
-
-  if (isCustomResource) {
-    url = `/r/${roadmapSlug}`;
-  }
-
+  // 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);