Show the recently updated item on top

src/components/Activity/ActivityPage.tsx

@@ -101,43 +101,57 @@ export function ActivityPage() {
               Continue Following
             </h2>
             <div class="flex flex-col gap-3">
-              {learningRoadmaps.reverse().map((roadmap) => (
-                <ResourceProgress
-                  doneCount={roadmap.done || 0}
-                  learningCount={roadmap.learning || 0}
-                  totalCount={roadmap.total || 0}
-                  skippedCount={roadmap.skipped || 0}
-                  resourceId={roadmap.id}
-                  resourceType={'roadmap'}
-                  updatedAt={roadmap.updatedAt}
-                  title={roadmap.title}
-                  onCleared={() => {
-                    pageLoadingMessage.set('Updating activity');
-                    loadActivity().finally(() => {
-                      pageLoadingMessage.set('');
-                    });
-                  }}
-                />
-              ))}
+              {learningRoadmaps
+                .sort((a, b) => {
+                  const updatedAtA = new Date(a.updatedAt);
+                  const updatedAtB = new Date(b.updatedAt);
 
-              {learningBestPractices.reverse().map((bestPractice) => (
-                <ResourceProgress
-                  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}
-                  onCleared={() => {
-                    pageLoadingMessage.set('Updating activity');
-                    loadActivity().finally(() => {
-                      pageLoadingMessage.set('');
-                    });
-                  }}
-                />
-              ))}
+                  return updatedAtB.getTime() - updatedAtA.getTime();
+                })
+                .map((roadmap) => (
+                  <ResourceProgress
+                    doneCount={roadmap.done || 0}
+                    learningCount={roadmap.learning || 0}
+                    totalCount={roadmap.total || 0}
+                    skippedCount={roadmap.skipped || 0}
+                    resourceId={roadmap.id}
+                    resourceType={'roadmap'}
+                    updatedAt={roadmap.updatedAt}
+                    title={roadmap.title}
+                    onCleared={() => {
+                      pageLoadingMessage.set('Updating activity');
+                      loadActivity().finally(() => {
+                        pageLoadingMessage.set('');
+                      });
+                    }}
+                  />
+                ))}
+
+              {learningBestPractices
+                .sort((a, b) => {
+                  const updatedAtA = new Date(a.updatedAt);
+                  const updatedAtB = new Date(b.updatedAt);
+
+                  return updatedAtB.getTime() - updatedAtA.getTime();
+                })
+                .map((bestPractice) => (
+                  <ResourceProgress
+                    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}
+                    onCleared={() => {
+                      pageLoadingMessage.set('Updating activity');
+                      loadActivity().finally(() => {
+                        pageLoadingMessage.set('');
+                      });
+                    }}
+                  />
+                ))}
             </div>
           </>
         )}