Refactor useColorDecoder Hook

client/src/App.tsx

@@ -136,7 +136,15 @@ const App: React.FC = () => {
 
   const { preferredTheme, isDarkMode, unscheduleClassesByDefault, convertToLocalTimezone } = useGetUserSettingsQuery();
 
-  const decodedAssignedColors = useColorsDecoder(assignedColors, preferredTheme);
+  const decodedColors = useColorsDecoder(Object.values(assignedColors), preferredTheme);
+  const decodedAssignedColors = useMemo(
+    () =>
+      Object.keys(assignedColors).reduce<Record<string, string>>((object, key, index) => {
+        object[key] = decodedColors[index];
+        return object;
+      }, {}),
+    [assignedColors, decodedColors],
+  );
 
   setDropzoneRange(days.length, earliestStartTime, latestEndTime);
 

client/src/components/controls/ColorOptions.tsx

@@ -40,10 +40,7 @@ const ColorOptions: FC<ColorOptionsProps> = ({
     [isDarkMode, preferredTheme],
   );
 
-  const decodedColors = useColorsDecoder(
-    colors.reduce((obj, color, index) => ({ ...obj, [index]: color }), {}),
-    preferredTheme,
-  );
+  const decodedColors = useColorsDecoder(colors, preferredTheme);
 
   return (
     <List sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>

client/src/hooks/useColorDecoder.ts

@@ -11,22 +11,15 @@ const decodeColor = (assignedColor: string, preferredTheme: string) => {
 };
 
 /**
- * Decodes all assigned colours using the `useColorDecoder` function.
- * Converts each assigned colour key to its corresponding color value in the current or preview theme.
+ * Decodes all colours using the `useColorDecoder` function.
+ * Converts each colour to its corresponding color value in the current or preview theme.
  *
- * @param {Record<string, string>} assignedColors A record of assigned colour keys (e.g., { event1: 'default-1' }).
+ * @param {string[]} colors A record of assigned colour keys (e.g., { event1: 'default-1' }).
  * @param {string} [previewTheme] An optional theme to use for decoding instead of the current theme.
- * @returns {Record<string, string>} A record of decoded colour values (e.g., { event1: 'oklch(0.8 0.1 200)' }).
+ * @returns {string[]} A record of decoded colour values (e.g., { event1: 'oklch(0.8 0.1 200)' }).
  */
-export const useColorsDecoder = (assignedColors: Record<string, string>, preferredTheme: string) => {
-  const decodedColors = Object.fromEntries(
-    Object.entries(assignedColors).map(([key, color]) => {
-      const decodedColor = decodeColor(color, preferredTheme);
-      return [key, decodedColor];
-    }),
-  );
-
-  return decodedColors;
+export const useColorsDecoder = (colors: string[], preferredTheme: string): string[] => {
+  return colors.map((color) => decodeColor(color, preferredTheme));
 };
 
 /**