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,14 +123,25 @@ export function ActivityPage() {
 
                   return updatedAtB.getTime() - updatedAtA.getTime();
                 })
-                .map((roadmap) => (
+                .filter((roadmap) => roadmap.learning > 0 || roadmap.done > 0)
+                .map((roadmap) => {
+                  const learningCount = roadmap.learning || 0;
+                  const doneCount = roadmap.done || 0;
+                  const totalCount = roadmap.total || 0;
+                  const skippedCount = roadmap.skipped || 0;
+
+                  return (
                     <ResourceProgress
                       key={roadmap.id}
                       isCustomResource={roadmap.isCustomResource}
-                    doneCount={roadmap.done || 0}
+                      doneCount={
-                    learningCount={roadmap.learning || 0}
+                        doneCount > totalCount ? totalCount : doneCount
-                    totalCount={roadmap.total || 0}
+                      }
-                    skippedCount={roadmap.skipped || 0}
+                      learningCount={
+                        learningCount > totalCount ? totalCount : learningCount
+                      }
+                      totalCount={totalCount}
+                      skippedCount={skippedCount}
                       resourceId={roadmap.id}
                       resourceType={'roadmap'}
                       updatedAt={roadmap.updatedAt}
@@ -123,7 +153,8 @@ export function ActivityPage() {
                         });
                       }}
                     />
-                ))}
+                  );
+                })}
 
               {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}