Add dots menu and implement Rename Module

Author: ji-mmyliu

frontend/src/APIClients/CourseAPIClient.ts

@@ -164,6 +164,27 @@ const getModuleById = async (
   }
 };
 
+const editModule = async (
+  unitId: string,
+  moduleId: string,
+  title: string,
+): Promise<CourseModule | null> => {
+  const bearerToken = `Bearer ${getLocalStorageObjProperty(
+    AUTHENTICATED_USER_KEY,
+    "accessToken",
+  )}`;
+  try {
+    const { data } = await baseAPIClient.put(
+      `/course/${unitId}/${moduleId}`,
+      { title },
+      { headers: { Authorization: bearerToken } },
+    );
+    return data;
+  } catch (error) {
+    return null;
+  }
+};
+
 export default {
   getUnits,
   createUnit,
@@ -174,4 +195,5 @@ export default {
   uploadThumbnail,
   lessonUpload,
   getModuleById,
+  editModule,
 };

frontend/src/components/auth/PrivateRoute.tsx

@@ -35,9 +35,9 @@ const PrivateRoute: React.FC<PrivateRouteProps> = ({
 
     const NavbarWrappedComponent: React.FC<PrivateRouteProps> = () => {
       return (
-        <Box sx={{ height: "100vh", display: "flex", flexFlow: "column" }}>
+        <Box sx={{ height: "100vh", display: "flex", flexFlow: "column", overflow: "hidden" }}>
           <Navbar />
-          <Box sx={{ height: "100%", flexGrow: 1 }}>
+          <Box sx={{ height: "100%", flexGrow: 1, overflow: "hidden" }}>
             <Component />
           </Box>
         </Box>

frontend/src/components/course_viewing/CourseModulesGrid.tsx

@@ -1,4 +1,5 @@
 import { Grid, Typography } from "@mui/material";
+import { useState, useEffect } from "react";
 import useCourseModules from "../../hooks/useCourseModules";
 import { useUser } from "../../hooks/useUser";
 import { CourseModule } from "../../types/CourseTypes";
@@ -14,9 +15,26 @@ export default function CourseModulesGrid({
   unitId,
   isSidebarOpen,
 }: ModuleGridProps) {
-  const { courseModules, loading, error } = useCourseModules(unitId);
+  const {
+    courseModules: initialModules,
+    loading,
+    error,
+  } = useCourseModules(unitId);
+  const [courseModules, setCourseModules] = useState<CourseModule[]>([]);
   const { role } = useUser();
 
+  useEffect(() => {
+    setCourseModules(initialModules);
+  }, [initialModules]);
+
+  const handleModuleUpdate = (updatedModule: CourseModule) => {
+    setCourseModules((prev) =>
+      prev.map((module) =>
+        module.id === updatedModule.id ? updatedModule : module,
+      ),
+    );
+  };
+
   if (loading)
     return <Typography paddingLeft="10px">Loading modules...</Typography>;
   if (error) return <Typography color="error">{error}</Typography>;
@@ -28,7 +46,8 @@ export default function CourseModulesGrid({
           <ModuleCardAdmin
             key={module.id}
             module={module}
-            isSidebarOpen={isSidebarOpen}
+            unitId={unitId}
+            onModuleUpdate={handleModuleUpdate}
           />
         ) : (
           <ModuleCardLearner

frontend/src/components/course_viewing/CourseViewingPage.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from "react";
-import { Box, Button, Stack, Typography, useTheme } from "@mui/material";
-import MenuOpenIcon from "@mui/icons-material/MenuOpen";
 import AddIcon from "@mui/icons-material/Add";
-import UnitSidebar from "./sidebar/UnitSidebar";
+import MenuOpenIcon from "@mui/icons-material/MenuOpen";
+import { Box, Button, Stack, Typography, useTheme } from "@mui/material";
+import { useState } from "react";
 import { CourseUnit } from "../../types/CourseTypes";
 import CourseModulesGrid from "./CourseModulesGrid";
 import CreateModuleModal from "./modals/CreateModuleModal";
+import UnitSidebar from "./sidebar/UnitSidebar";
 
 export default function CourseUnitsPage() {
   const theme = useTheme();
@@ -22,15 +22,15 @@ export default function CourseUnitsPage() {
   };
 
   return (
-    <Box display="flex" width="100%">
+    <Box display="flex" width="100%" height="100vh" overflow="hidden">
       <UnitSidebar
         setSelectedUnit={setSelectedUnit}
         handleClose={handleDrawerClose}
         open={sidebarOpen}
         selectedUnit={selectedUnit}
       />
 
-      <Box sx={{ flexGrow: 1, p: "48px" }}>
+      <Box sx={{ flexGrow: 1, p: "48px", mb: "48px", overflowY: "scroll" }}>
         {selectedUnit ? (
           <Stack spacing="14px">
             <Box display="flex" alignItems="center" paddingLeft="10px">