fix: sort diary by month aswell as year

dinkelspiel · May 11, 2024 · 344e1f0 · 344e1f0
1 parent 6fe51fa
commit 344e1f0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/app/(app)/users/[username]/diary.ts b/app/(app)/users/[username]/diary.ts
@@ -26,14 +26,17 @@ export const getUserDiary = async (userId: number): Promise<Diary> => {
   const diary: Diary = {};
 
   userEntries.forEach(userEntry => {
-    const month = userEntry
-      .watchedAt!.toLocaleString('default', { month: 'short' })
-      .toUpperCase()
-      .slice(0, 3);
-    if (!diary[month]) {
-      diary[month] = [];
+    const monthMinusYear =
+      userEntry // Example NOV-2024
+        .watchedAt!.toLocaleString('default', { month: 'short' })
+        .toUpperCase()
+        .slice(0, 3) +
+      '-' +
+      userEntry.watchedAt!.getFullYear();
+    if (!diary[monthMinusYear]) {
+      diary[monthMinusYear] = [];
     }
-    diary[month]!.push({
+    diary[monthMinusYear]!.push({
       title: userEntry.entry.originalTitle,
       day: userEntry.watchedAt!.getDate(),
     });

diff --git a/app/(app)/users/[username]/sidebar.tsx b/app/(app)/users/[username]/sidebar.tsx
@@ -131,13 +131,25 @@ export const ProfileSidebar = ({
           </span>
         </div>
         {Object.keys(diary)
-          .sort((a, b) => monthOrder.indexOf(a) - monthOrder.indexOf(b))
+          .sort((a, b) => {
+            const aMonth = a.split('-')[0]!;
+            const aYear = Number(a.split('-')[1]!);
+
+            const bMonth = b.split('-')[0]!;
+            const bYear = Number(b.split('-')[1]!);
+
+            if (aYear !== bYear) {
+              return bYear - aYear;
+            }
+
+            return monthOrder.indexOf(aMonth) - monthOrder.indexOf(bMonth);
+          })
           .map(month => (
             <div className="grid grid-cols-[42px,1fr] gap-2">
               <div className="flex flex-col items-center gap-1">
                 <Calendar />
                 <div className="text-center text-[11px] font-semibold text-black">
-                  {month}
+                  {month.split('-')[0]!}
                 </div>
               </div>
               <div className="grid grid-cols-[17.5px,1fr] gap-2 text-sm font-medium">