Rearange units

frontend/package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@fontsource/lexend-deca": "^5.1.0",

frontend/src/APIClients/CourseAPIClient.ts

@@ -51,6 +51,7 @@ const editUnit = async (
     );
     return data;
   } catch (error) {
+    console.log(error);
     return null;
   }
 };
@@ -147,6 +148,26 @@ const getModuleById = async (
   }
 };
 
+const rearangeUnits = async (arange: Map<string, number>) => {
+  const bearerToken = `Bearer ${getLocalStorageObjProperty(
+    AUTHENTICATED_USER_KEY,
+    "accessToken",
+  )}`;
+  try {
+    const arangement = Object.fromEntries(arange);
+    const { data } = await baseAPIClient.put(
+      `/course/rearangeUnits`,
+      { arangement },
+      {
+        headers: { Authorization: bearerToken },
+      },
+    );
+    return data;
+  } catch (error) {
+    return null;
+  }
+};
+
 export default {
   getUnits,
   createUnit,
@@ -156,4 +177,5 @@ export default {
   uploadThumbnail,
   lessonUpload,
   getModuleById,
+  rearangeUnits,
 };

frontend/src/components/course_viewing/CourseViewingPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Box, Button, Stack, Typography, useTheme } from "@mui/material";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
 import UnitSidebar from "./sidebar/UnitSidebar";
@@ -14,15 +14,10 @@ export default function CourseUnitsPage() {
     setSidebarOpen(true);
   };
 
-  const handleDrawerClose = () => {
-    setSidebarOpen(false);
-  };
-
   return (
     <Box display="flex" width="100%">
       <UnitSidebar
         setSelectedUnit={setSelectedUnit}
-        handleClose={handleDrawerClose}
         open={sidebarOpen}
         selectedUnit={selectedUnit}
       />

frontend/src/components/course_viewing/sidebar/ContextMenu.tsx

@@ -56,6 +56,7 @@ const ContextMenu = ({ anchorEl, onClose, onModalOpen }: ContextMenuProps) => {
         sx={{
           height: "48px",
         }}
+        onClick={() => onModalOpen(UnitSidebarModalType.Move)}
       >
         <ListItemIcon>
           <MoveDownIcon

frontend/src/components/course_viewing/sidebar/Unit.tsx

@@ -0,0 +1,126 @@
+import { useSortable } from "@dnd-kit/sortable";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import {
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  useTheme,
+  IconButton,
+} from "@mui/material";
+import { MoreHoriz } from "@mui/icons-material";
+import { CourseUnit } from "../../../types/CourseTypes";
+import { Role } from "../../../types/AuthTypes";
+
+interface UnitProps {
+  index: number;
+  unit: CourseUnit;
+  courseLength: number;
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  handleListItemClick: (event: any, index: number) => void;
+  handleContextMenuOpen: (event: any, unit: CourseUnit) => void;
+  selectedIndex: number;
+  userRole: Role;
+  rearrangeUnitsMode: boolean;
+  isAdmin: boolean;
+}
+
+export default function Unit({
+  index,
+  unit,
+  handleListItemClick,
+  selectedIndex,
+  userRole,
+  rearrangeUnitsMode,
+  handleContextMenuOpen,
+  isAdmin,
+}: UnitProps) {
+  const { id } = unit;
+  const { attributes, listeners, setNodeRef, transition } = useSortable({ id });
+
+  const style = {
+    transition,
+  };
+
+  const theme = useTheme();
+
+  return (
+    <ListItem
+      key={unit.id}
+      ref={setNodeRef}
+      style={style}
+      /* eslint-disable react/jsx-props-no-spreading */
+      {...attributes}
+      sx={{
+        borderBottom: 1,
+        borderColor: theme.palette.Neutral[300],
+        backgroundColor:
+          selectedIndex === index && !rearrangeUnitsMode
+            ? theme.palette[userRole].Light.Selected
+            : "transparent",
+        "&:hover": {
+          backgroundColor: theme.palette[userRole].Light.Hover,
+        },
+        display: "flex",
+        height: "60px",
+        ...(rearrangeUnitsMode
+          ? { padding: "0 8px 0 16px" }
+          : { padding: "0 8px 0 32px" }),
+        alignItems: "center",
+        gap: "8px",
+        alignSelf: "stretch",
+      }}
+      onClick={
+        !rearrangeUnitsMode
+          ? (event) => handleListItemClick(event, index)
+          : undefined
+      }
+    >
+      <ListItemButton
+        key={unit.id}
+        sx={{
+          "&:hover": {
+            backgroundColor: "transparent",
+          },
+          padding: "0",
+        }}
+      >
+        {isAdmin && rearrangeUnitsMode && (
+          <IconButton
+            edge="start"
+            /* eslint-disable react/jsx-props-no-spreading */
+            {...listeners}
+          >
+            <DragIndicatorIcon />
+          </IconButton>
+        )}
+        <ListItemText
+          disableTypography
+          primary={
+            <span style={{ display: "flex", gap: "16px" }}>
+              <span>{index + 1}.</span>
+              <span>{unit.title}</span>
+            </span>
+          }
+          sx={{
+            ...(selectedIndex === index && !rearrangeUnitsMode
+              ? theme.typography.titleSmall
+              : theme.typography.bodyMedium),
+            color: theme.palette.Neutral[700],
+          }}
+        />
+        {isAdmin && !rearrangeUnitsMode && selectedIndex === index && (
+          <IconButton
+            edge="start"
+            onClick={(event) => {
+              event.stopPropagation(); // Prevent triggering the list item click
+              handleContextMenuOpen(event, unit); // Custom function to handle button click
+            }}
+            sx={{ marginLeft: "16px" }}
+          >
+            <MoreHoriz />
+          </IconButton>
+        )}
+      </ListItemButton>
+    </ListItem>
+  );
+}