fix: progress overflows the roadmap with

src/components/Activity/ActivityPage.tsx

@@ -52,7 +52,7 @@ export function ActivityPage() {
 
   async function loadActivity() {
     const { error, response } = await httpGet<ActivityResponse>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-stats`
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-stats`,
     );
 
     if (!response || error) {
@@ -79,6 +79,25 @@ export function ActivityPage() {
     return null;
   }
 
+  const learningRoadmapsToShow = learningRoadmaps
+    .sort((a, b) => {
+      const updatedAtA = new Date(a.updatedAt);
+      const updatedAtB = new Date(b.updatedAt);
+
+      return updatedAtB.getTime() - updatedAtA.getTime();
+    })
+    .filter((roadmap) => roadmap.learning > 0 || roadmap.done > 0);
+
+  const learningBestPracticesToShow = learningBestPractices
+    .sort((a, b) => {
+      const updatedAtA = new Date(a.updatedAt);
+      const updatedAtB = new Date(b.updatedAt);
+
+      return updatedAtB.getTime() - updatedAtA.getTime();
+    })
+    .filter((bestPractice) => bestPractice.learning > 0 || bestPractice.done > 0);
+
+
   return (
     <>
       <ActivityCounters
@@ -88,10 +107,10 @@ export function ActivityPage() {
       />
 
       <div className="mx-0 px-0 py-5 md:-mx-10 md:px-8 md:py-8">
-        {learningRoadmaps.length === 0 &&
+        {learningRoadmapsToShow.length === 0 &&
-          learningBestPractices.length === 0 && <EmptyActivity />}
+          learningBestPracticesToShow.length === 0 && <EmptyActivity />}
 
-        {(learningRoadmaps.length > 0 || learningBestPractices.length > 0) && (
+        {(learningRoadmapsToShow.length > 0 || learningBestPracticesToShow.length > 0) && (
           <>
             <h2 className="mb-3 text-xs uppercase text-gray-400">
               Continue Following
@@ -104,26 +123,38 @@ export function ActivityPage() {
 
                   return updatedAtB.getTime() - updatedAtA.getTime();
                 })
-                .map((roadmap) => (
+                .filter((roadmap) => roadmap.learning > 0 || roadmap.done > 0)
-                  <ResourceProgress
+                .map((roadmap) => {
-                    key={roadmap.id}
+                  const learningCount = roadmap.learning || 0;
-                    isCustomResource={roadmap.isCustomResource}
+                  const doneCount = roadmap.done || 0;
-                    doneCount={roadmap.done || 0}
+                  const totalCount = roadmap.total || 0;
-                    learningCount={roadmap.learning || 0}
+                  const skippedCount = roadmap.skipped || 0;
-                    totalCount={roadmap.total || 0}
+
-                    skippedCount={roadmap.skipped || 0}
+                  return (
-                    resourceId={roadmap.id}
+                    <ResourceProgress
-                    resourceType={'roadmap'}
+                      key={roadmap.id}
-                    updatedAt={roadmap.updatedAt}
+                      isCustomResource={roadmap.isCustomResource}
-                    title={roadmap.title}
+                      doneCount={
-                    onCleared={() => {
+                        doneCount > totalCount ? totalCount : doneCount
-                      pageProgressMessage.set('Updating activity');
+                      }
-                      loadActivity().finally(() => {
+                      learningCount={
-                        pageProgressMessage.set('');
+                        learningCount > totalCount ? totalCount : learningCount
-                      });
+                      }
-                    }}
+                      totalCount={totalCount}
-                  />
+                      skippedCount={skippedCount}
-                ))}
+                      resourceId={roadmap.id}
+                      resourceType={'roadmap'}
+                      updatedAt={roadmap.updatedAt}
+                      title={roadmap.title}
+                      onCleared={() => {
+                        pageProgressMessage.set('Updating activity');
+                        loadActivity().finally(() => {
+                          pageProgressMessage.set('');
+                        });
+                      }}
+                    />
+                  );
+                })}
 
               {learningBestPractices
                 .sort((a, b) => {
@@ -132,6 +163,10 @@ export function ActivityPage() {
 
                   return updatedAtB.getTime() - updatedAtA.getTime();
                 })
+                .filter(
+                  (bestPractice) =>
+                    bestPractice.learning > 0 || bestPractice.done > 0,
+                )
                 .map((bestPractice) => (
                   <ResourceProgress
                     isCustomResource={bestPractice.isCustomResource}