From f543a71a3e476de4e75302938ee30c1269b2acdd Mon Sep 17 00:00:00 2001
From: gxnca <fl11gg20@gmail.com>
Date: Thu, 27 Nov 2025 21:20:53 +0000
Subject: [PATCH] refactor: event category display

---
 .../events/display-categories.tsx             | 95 +++++++++++--------
 src/contexts/events-provider.tsx              | 20 +++-
 src/lib/types.ts                              |  4 +-
 3 files changed, 73 insertions(+), 46 deletions(-)

diff --git a/src/components/calendarOptions/events/display-categories.tsx b/src/components/calendarOptions/events/display-categories.tsx
index ad5a8e8..f3f7f26 100644
--- a/src/components/calendarOptions/events/display-categories.tsx
+++ b/src/components/calendarOptions/events/display-categories.tsx
@@ -31,39 +31,54 @@ export default function DisplayCategories({
               label={`${ordinalNumbers[yearGroup.year - 1]} Year`}
               key={`${ordinalNumbers[yearGroup.year - 1]} Year`}
             >
-              <div className="divide-dark/8 bg-light w-full space-y-3 divide-y rounded-lg pt-3 pl-4">
-                {yearGroup.categories.map((category) => (
-                  <EventHeader
-                    key={category.id}
-                    name={category.name}
-                    eventId={category.id}
-                    color={category.color}
-                    isEditing={isEditing}
-                    state={state}
-                    onAction={
-                      category.type === "optional" ? onAction : undefined
-                    }
-                  />
-                ))}
+              <div className="mt-1 ml-2 h-full w-full">
+                {Object.entries(yearGroup.semesters).map(
+                  ([semesterKey, categories]) => (
+                    <CustomDisclosure
+                      label={`${ordinalNumbers[Number(semesterKey) - 1]} Semester`}
+                      key={`${ordinalNumbers[Number(semesterKey) - 1]} Semester`}
+                    >
+                      <div className="divide-dark/8 bg-light w-full space-y-3 divide-y rounded-lg pt-3 pl-4">
+                        {categories.map((category) => (
+                          <EventHeader
+                            key={category.id}
+                            name={category.name}
+                            eventId={category.id}
+                            color={category.color}
+                            isEditing={isEditing}
+                            state={state}
+                            onAction={
+                              category.type === "optional"
+                                ? onAction
+                                : undefined
+                            }
+                          />
+                        ))}
+                      </div>
+                    </CustomDisclosure>
+                  ),
+                )}
               </div>
             </CustomDisclosure>
           ) : (
-            yearGroup.categories.length > 0 && (
+            !yearGroup.year && (
               <CustomDisclosure label="Other" key="Other">
                 <div className="divide-dark/8 bg-light w-full space-y-3 divide-y rounded-lg pt-3 pl-4">
-                  {yearGroup.categories.map((category) => (
-                    <EventHeader
-                      key={category.id}
-                      name={category.name}
-                      eventId={category.id}
-                      color={category.color}
-                      isEditing={isEditing}
-                      state={state}
-                      onAction={
-                        category.type === "optional" ? onAction : undefined
-                      }
-                    />
-                  ))}
+                  {Object.values(yearGroup.semesters).flatMap((categories) =>
+                    categories.map((category) => (
+                      <EventHeader
+                        key={category.id}
+                        name={category.name}
+                        eventId={category.id}
+                        color={category.color}
+                        isEditing={isEditing}
+                        state={state}
+                        onAction={
+                          category.type === "optional" ? onAction : undefined
+                        }
+                      />
+                    )),
+                  )}
                 </div>
               </CustomDisclosure>
             )
@@ -75,17 +90,19 @@ export default function DisplayCategories({
     return (
       <ScrollableContainer items={items}>
         {items.flatMap((yearGroup) =>
-          yearGroup.categories.map((category) => (
-            <EventHeader
-              key={category.id}
-              name={category.name}
-              eventId={category.id}
-              color={category.color}
-              isEditing={isEditing}
-              state={state}
-              onAction={category.type === "optional" ? onAction : undefined}
-            />
-          )),
+          Object.values(yearGroup.semesters).flatMap((categories) =>
+            categories.map((category) => (
+              <EventHeader
+                key={category.id}
+                name={category.name}
+                eventId={category.id}
+                color={category.color}
+                isEditing={isEditing}
+                state={state}
+                onAction={category.type === "optional" ? onAction : undefined}
+              />
+            )),
+          ),
         )}
       </ScrollableContainer>
     );
diff --git a/src/contexts/events-provider.tsx b/src/contexts/events-provider.tsx
index d09a9b5..3b87c72 100644
--- a/src/contexts/events-provider.tsx
+++ b/src/contexts/events-provider.tsx
@@ -56,7 +56,10 @@ function sortCategoriesByYear(
     { otherCategories: [], courseCategories: [] },
   );
 
-  const otherFormatted = { categories: otherCategories };
+  const otherFormatted = {
+    year: undefined,
+    semesters: { 0: otherCategories },
+  };
 
   const courseCategoriesMap = courseCategories.reduce(
     (acc, category) => {
@@ -65,15 +68,22 @@ function sortCategoriesByYear(
       if (!acc[yearKey]) {
         acc[yearKey] = {
           year: category.course ? Number(category.course.year) : 0,
-          categories: [category],
+          semesters: {},
         };
-      } else {
-        acc[yearKey].categories.push(category);
       }
 
+      const semesterKey = category.course?.semester ?? 0;
+      if (!acc[yearKey].semesters[semesterKey]) {
+        acc[yearKey].semesters[semesterKey] = [];
+      }
+      acc[yearKey].semesters[semesterKey].push(category);
+
       return acc;
     },
-    {} as Record<string, { year: number; categories: IEventCategory[] }>,
+    {} as Record<
+      string,
+      { year: number; semesters: Record<number, IEventCategory[]> }
+    >,
   );
 
   const courseCategoriesFormatted = Object.values(courseCategoriesMap);
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6118d05..0455ed6 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -65,7 +65,7 @@ export type IShiftsSorted = {
   semesters: Record<
     number,
     Record<
-      string,
+      number,
       {
         courseName: string;
         color: string;
@@ -122,7 +122,7 @@ export interface IEventCategory {
 
 export type IEventCategoriesSorted = {
   year?: number;
-  categories: IEventCategory[];
+  semesters: Record<number, IEventCategory[]>;
 }[];
 
 export interface IItemProps {