Admin lib search bar width and useCourseModules

Author: ji-mmyliu

frontend/src/components/course_viewing/CourseViewingPage.tsx

@@ -113,6 +113,7 @@ export default function CourseUnitsPage() {
                 focusedBorderColor={theme.palette[role].Dark.Default}
                 sx={{
                   minWidth: "225px",
+                  width: "450px",
                   borderRadius: "8px",
                   "& .MuiOutlinedInput-root": {
                     "& fieldset": {

frontend/src/hooks/useCourseModules.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import CourseAPIClient from "../APIClients/CourseAPIClient";
 import { CourseModule } from "../types/CourseTypes";
 
@@ -7,31 +7,45 @@ const useCourseModules = (unitId: string) => {
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
-    if (!unitId) return; // Prevent API call if unitId is empty
+  const [moduleDataCache, setModuleDataCache] = useState<
+    Record<string, CourseModule[]>
+  >({});
+
+  const fetchCourseModules = useCallback(async () => {
+    try {
+      if (moduleDataCache[unitId]) {
+        setCourseModules(moduleDataCache[unitId]);
+        return;
+      }
 
-    const fetchCourseModules = async () => {
-      try {
-        setLoading(true);
-        setError(null);
-
-        const data = await CourseAPIClient.getModules(unitId);
-        setCourseModules(data);
-      } catch (err: unknown) {
-        if (err instanceof Error) {
-          setError(err.message);
-        } else {
-          setError("An unknown error occurred");
-        }
-      } finally {
-        setLoading(false);
+      setLoading(true);
+      setError(null);
+
+      const data = await CourseAPIClient.getModules(unitId);
+      setCourseModules(data);
+      setModuleDataCache((prevCache) => {
+        const newCache = { ...prevCache };
+        newCache[unitId] = data;
+        return newCache;
+      });
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred");
       }
-    };
+    } finally {
+      setLoading(false);
+    }
+  }, [unitId, moduleDataCache]);
+
+  useEffect(() => {
+    if (!unitId) return; // Prevent API call if unitId is empty
 
     fetchCourseModules();
-  }, [unitId]);
+  }, [fetchCourseModules, unitId]);
 
-  return { courseModules, loading, error };
+  return { courseModules, loading, error, moduleDataCache };
 };
 
 export default useCourseModules;