From 005c66c60a9495502ebd46ef66ae63917a80bd4b Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Sat, 23 Mar 2024 01:10:55 +0600
Subject: [PATCH] fix: heatmap focus

---
 .../UserPublicProfile/UserPublicActivityHeatmap.tsx  | 12 ++++++------
 .../UserPublicProfile/UserPublicProfilePage.tsx      |  9 ++++++++-
 .../UserPublicProfile/UserPublicProgressStats.tsx    |  6 +++++-
 .../UserPublicProfile/UserPublicProgresses.tsx       | 10 +++++++++-
 src/helper/number.ts                                 | 10 ++++++++--
 5 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx b/src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx
index 5e40bf0bc..c26b7375e 100644
--- a/src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx
+++ b/src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx
@@ -27,20 +27,20 @@ export function UserActivityHeatmap(props: UserActivityHeatmapProps) {
         values={data}
         classForValue={(value) => {
           if (!value) {
-            return 'fill-gray-100 rounded-md [rx:2px]';
+            return 'fill-gray-100 rounded-md [rx:2px] focus:outline-none';
           }
 
           const { count } = value;
           if (count >= 20) {
-            return 'fill-gray-800 rounded-md [rx:2px]';
+            return 'fill-gray-800 rounded-md [rx:2px] focus:outline-none';
           } else if (count >= 10) {
-            return 'fill-gray-600 rounded-md [rx:2px]';
+            return 'fill-gray-600 rounded-md [rx:2px] focus:outline-none';
           } else if (count >= 5) {
-            return 'fill-gray-500 rounded-md [rx:2px]';
+            return 'fill-gray-500 rounded-md [rx:2px] focus:outline-none';
           } else if (count >= 3) {
-            return 'fill-gray-300 rounded-md [rx:2px]';
+            return 'fill-gray-300 rounded-md [rx:2px] focus:outline-none';
           } else {
-            return 'fill-gray-200 rounded-md [rx:2px]';
+            return 'fill-gray-200 rounded-md [rx:2px] focus:outline-none';
           }
         }}
         tooltipDataAttrs={(value: any) => {
diff --git a/src/components/UserPublicProfile/UserPublicProfilePage.tsx b/src/components/UserPublicProfile/UserPublicProfilePage.tsx
index 45245ec09..a64e33ff9 100644
--- a/src/components/UserPublicProfile/UserPublicProfilePage.tsx
+++ b/src/components/UserPublicProfile/UserPublicProfilePage.tsx
@@ -7,7 +7,13 @@ import { UserPublicProgresses } from './UserPublicProgresses';
 type UserPublicProfilePageProps = GetPublicProfileResponse;
 
 export function UserPublicProfilePage(props: UserPublicProfilePageProps) {
-  const { activity, username, isOwnProfile, profileVisibility } = props;
+  const {
+    activity,
+    username,
+    isOwnProfile,
+    profileVisibility,
+    _id: userId,
+  } = props;
 
   return (
     <>
@@ -23,6 +29,7 @@ export function UserPublicProfilePage(props: UserPublicProfilePageProps) {
         <div className="mt-10">
           <UserPublicProgresses
             username={username!}
+            userId={userId!}
             roadmaps={props.roadmaps}
             publicConfig={props.publicConfig}
           />
diff --git a/src/components/UserPublicProfile/UserPublicProgressStats.tsx b/src/components/UserPublicProfile/UserPublicProgressStats.tsx
index 0ca5d1001..77d5d2db5 100644
--- a/src/components/UserPublicProfile/UserPublicProgressStats.tsx
+++ b/src/components/UserPublicProfile/UserPublicProgressStats.tsx
@@ -14,6 +14,7 @@ type UserPublicProgressStats = {
   isCustomResource?: boolean;
   roadmapSlug?: string;
   username: string;
+  userId: string;
 };
 
 export function UserPublicProgressStats(props: UserPublicProgressStats) {
@@ -28,10 +29,13 @@ export function UserPublicProgressStats(props: UserPublicProgressStats) {
     roadmapSlug,
     isCustomResource = false,
     username,
+    userId,
   } = props;
 
   // Currently we only support roadmap not (best-practices)
-  const url = `/u/${username}/${isCustomResource ? roadmapSlug : resourceId}`;
+  const url = isCustomResource
+    ? `/r/${roadmapSlug}`
+    : `/${resourceId}?s=${userId}`;
   const totalMarked = doneCount + skippedCount;
   const progressPercentage = getPercentage(totalMarked, totalCount);
 
diff --git a/src/components/UserPublicProfile/UserPublicProgresses.tsx b/src/components/UserPublicProfile/UserPublicProgresses.tsx
index beb392389..dadce93c9 100644
--- a/src/components/UserPublicProfile/UserPublicProgresses.tsx
+++ b/src/components/UserPublicProfile/UserPublicProgresses.tsx
@@ -2,13 +2,19 @@ import type { GetPublicProfileResponse } from '../../api/user';
 import { UserPublicProgressStats } from './UserPublicProgressStats';
 
 type UserPublicProgressesProps = {
+  userId: string;
   username: string;
   roadmaps: GetPublicProfileResponse['roadmaps'];
   publicConfig: GetPublicProfileResponse['publicConfig'];
 };
 
 export function UserPublicProgresses(props: UserPublicProgressesProps) {
-  const { roadmaps: roadmapProgresses = [], username, publicConfig } = props;
+  const {
+    roadmaps: roadmapProgresses = [],
+    username,
+    publicConfig,
+    userId,
+  } = props;
   const { roadmapVisibility, customRoadmapVisibility } = publicConfig! || {};
 
   const roadmaps = roadmapProgresses.filter(
@@ -43,6 +49,7 @@ export function UserPublicProgresses(props: UserPublicProgressesProps) {
                     roadmapSlug={roadmap.roadmapSlug}
                     isCustomResource={false}
                     username={username!}
+                    userId={userId}
                   />
                 </li>
               ))}
@@ -74,6 +81,7 @@ export function UserPublicProgresses(props: UserPublicProgressesProps) {
                     roadmapSlug={roadmap.roadmapSlug}
                     username={username!}
                     isCustomResource={true}
+                    userId={userId}
                   />
                 </li>
               ))}
diff --git a/src/helper/number.ts b/src/helper/number.ts
index 3c88992b9..fc67f117a 100644
--- a/src/helper/number.ts
+++ b/src/helper/number.ts
@@ -1,3 +1,9 @@
-export function getPercentage(portion: number, total: number) {
-  return portion > 0 ? ((portion / total) * 100).toFixed(2) : 0;
+export function getPercentage(portion: number, total: number): string {
+  if (total <= 0 || portion <= 0) {
+    return '0';
+  } else if (portion > total) {
+    return '100';
+  }
+
+  return ((portion / total) * 100).toFixed(2);
 }