Fix Class Management

src/components/Button/ActionButtons.jsx

@@ -55,4 +55,4 @@ const ActionButtons = ({ record, handleModal, handleDeleteSchool }) => {
   );
 };
 
-export default ActionButtons;
+export { ActionButtons };

src/components/Modal/modal.jsx

@@ -111,4 +111,4 @@ const GlobalModal = ({
     );
 };
 
-export default GlobalModal;
+export {GlobalModal};

src/components/components.js

@@ -1,100 +1,102 @@
-export { Header, Button as CustomButton } from "./Dashboard";
-export { Navbar } from "./Navbar/Navbar";
-export { Sidebar } from "./Sidebar/Sidebar";
-export { QuillEditor } from "./QuillEditor/QuillEditor";
-export { ErrorBoundary } from "./ErrorBoundary/ErrorBoundary";
+export {Header, Button as CustomButton} from "./Dashboard";
+export {Navbar} from "./Navbar/Navbar";
+export {Sidebar} from "./Sidebar/Sidebar";
+export {QuillEditor} from "./QuillEditor/QuillEditor";
+export {ErrorBoundary} from "./ErrorBoundary/ErrorBoundary";
 export * from "./Internship";
-export { Spinner } from "./Loading/Spinner";
+export {Spinner} from "./Loading/Spinner";
 export {
-  LogbookPagination,
-  StudentTable,
-  DetailLogbook,
-  SearchBar,
+    LogbookPagination,
+    StudentTable,
+    DetailLogbook,
+    SearchBar,
 } from "./Logbook";
 export {
-  Flex,
-  Input,
-  Form,
-  DatePicker,
-  Select,
-  Card,
-  Typography,
-  Checkbox,
-  Divider,
-  Space,
-  Modal,
-  Pagination,
-  Button,
-  Spin,
-  Dropdown,
-  Table,
-  message,
-  Tabs,
-  Row,
-  Col,
-  ConfigProvider,
-  Collapse,
-  Menu,
-  Progress,
-  Tag,
-  Breadcrumb,
-  Alert,
-  Empty,
-  Switch,
+    Flex,
+    Input,
+    Form,
+    DatePicker,
+    Select,
+    Card,
+    Typography,
+    Checkbox,
+    Divider,
+    Space,
+    Modal,
+    Pagination,
+    Button,
+    Spin,
+    Dropdown,
+    Table,
+    message,
+    Tabs,
+    Row,
+    Col,
+    ConfigProvider,
+    Collapse,
+    Menu,
+    Progress,
+    Tag,
+    Breadcrumb,
+    Alert,
+    Empty,
+    Switch,
+    Descriptions,
 } from "antd";
 
 export {
-  ArrowUpOutlined,
-  ArrowLeftOutlined,
-  SearchOutlined,
-  DownOutlined,
-  SettingOutlined,
-  BoldOutlined,
-  UnderlineOutlined,
-  ItalicOutlined,
-  AlignLeftOutlined,
-  AlignCenterOutlined,
-  AlignRightOutlined,
-  OrderedListOutlined,
-  UnorderedListOutlined,
-  PaperClipOutlined,
-  PlusCircleOutlined,
-  FontSizeOutlined,
-  FontColorsOutlined,
-  LineHeightOutlined,
-  CloseCircleFilled,
-  BookOutlined,
-  DeleteOutlined,
-  EditOutlined,
-  EyeOutlined,
-  InfoCircleFilled,
-  UndoOutlined,
-  ClockCircleOutlined,
-  UserAddOutlined,
-  UsergroupAddOutlined,
-  UserOutlined,
-  CaretDownOutlined,
-  CaretUpOutlined,
-  ImportOutlined,
-  DownloadOutlined,
-  FileDoneOutlined,
-  ExportOutlined,
-  CheckCircleOutlined,
-  LeftOutlined,
-  AccountBookOutlined,
-  EyeInvisibleOutlined,
-  EyeFilled,
-  EyeInvisibleFilled,
-  LockOutlined,
-  CheckCircleFilled,
-  CloseOutlined,
-  LogoutOutlined,
-  CaretDownFilled,
-  EyeTwoTone,
-  EyeInvisibleTwoTone,
-  LoadingOutlined,
+    ArrowUpOutlined,
+    ArrowLeftOutlined,
+    SearchOutlined,
+    DownOutlined,
+    SettingOutlined,
+    BoldOutlined,
+    UnderlineOutlined,
+    ItalicOutlined,
+    AlignLeftOutlined,
+    AlignCenterOutlined,
+    AlignRightOutlined,
+    OrderedListOutlined,
+    UnorderedListOutlined,
+    PaperClipOutlined,
+    PlusCircleOutlined,
+    FontSizeOutlined,
+    FontColorsOutlined,
+    LineHeightOutlined,
+    CloseCircleFilled,
+    BookOutlined,
+    DeleteOutlined,
+    EditOutlined,
+    EyeOutlined,
+    InfoCircleFilled,
+    UndoOutlined,
+    ClockCircleOutlined,
+    UserAddOutlined,
+    UsergroupAddOutlined,
+    UserOutlined,
+    CaretDownOutlined,
+    CaretUpOutlined,
+    ImportOutlined,
+    DownloadOutlined,
+    FileDoneOutlined,
+    ExportOutlined,
+    CheckCircleOutlined,
+    LeftOutlined,
+    AccountBookOutlined,
+    EyeInvisibleOutlined,
+    EyeFilled,
+    EyeInvisibleFilled,
+    LockOutlined,
+    CheckCircleFilled,
+    CloseOutlined,
+    LogoutOutlined,
+    CaretDownFilled,
+    EyeTwoTone,
+    EyeInvisibleTwoTone,
+    LoadingOutlined,
 } from "@ant-design/icons";
 
-export { ToastContainer, toast } from "react-toastify";
-export { SelectMultiple } from "./ProgramManagement/components";
-export { Link, Navigate } from "react-router-dom";
+export {ActionButtons} from "./Button/ActionButtons";
+export {ToastContainer, toast} from "react-toastify";
+export {SelectMultiple} from "./ProgramManagement/components";
+export {Link, Navigate} from "react-router-dom";

src/context/ClassContext.jsx

@@ -1,68 +1,15 @@
-import {createContext, useState, useCallback} from "react";
-import {ClassApi} from "@/utils/axios/ApiService";
+import { createContext } from "react";
+import {useClass, useMemo} from "@/hooks/hooks";
 
 export const ClassContext = createContext();
 
-export const ClassProvider = ( {children} ) => {
-    const [classData, setClassData] = useState([]);
-    const [isModalLoading, setIsModalLoading] = useState(false);
-    const [isTableLoading, setIsTableLoading] = useState(false);
-    const [tableErrorMessage, setTableErrorMessage] = useState("");
-    const [visibleModal, setVisibleModal] = useState(0);
-    const [selectedClassUUID, setSelectedClassUUID] = useState(null);
-    const [currentPage, setCurrentPage] = useState(1);
-    const [rowsPerPage, setRowPerPage] = useState(5);
-    const [isRefreshPage, setIsRefreshPage] = useState(false);
+export const ClassProvider = ({ children }) => {
+    const allState = useClass();
 
-    const getAllClasses = useCallback(async () => {
-        try {
-            setIsTableLoading(true);
-            const response = await ClassApi.getClasses(rowsPerPage, currentPage);
-            const classList = response.data.data;
-            setClassData(classList);
-        } catch (error) {
-            setTableErrorMessage(error.response.message);
-        } finally {
-            setIsTableLoading(false);
-        }
-    }, [rowsPerPage, currentPage]);
-
-    const getClassByUUID = useCallback(async (uuid) => {
-        try {
-            setIsModalLoading(true);
-            const response = await ClassApi.getClassById(uuid);
-            return response.data;
-        } catch (error) {
-            setTableErrorMessage(error.response.message);
-        } finally {
-            setIsModalLoading(false);
-        }
-    }, []);
+    const memoizedValue = useMemo(() => ({ ...allState }), [allState]);
 
     return (
-        <ClassContext.Provider
-            value={{
-                classData,
-                setClassData,
-                isModalLoading,
-                setIsModalLoading,
-                isTableLoading,
-                setIsTableLoading,
-                tableErrorMessage,
-                setTableErrorMessage,
-                visibleModal,
-                setVisibleModal,
-                selectedClassUUID,
-                setSelectedClassUUID,
-                currentPage,
-                setCurrentPage,
-                rowsPerPage,
-                setRowPerPage,
-                isRefreshPage,
-                setIsRefreshPage,
-                getAllClasses,
-            }}
-        >
+        <ClassContext.Provider value={memoizedValue}>
             {children}
         </ClassContext.Provider>
     );

src/context/contexts.js

@@ -4,3 +4,4 @@ export { useSidebar } from "./SidebarContext";
 export { AuthContext } from "./AuthContext";
 export { RoleContext } from "./RoleContext";
 export { SchoolContext } from "./SchoolContext";
+export { ClassContext } from "./ClassContext";

src/enums/Modal/ModalEnum.js

@@ -0,0 +1,8 @@
+const ModalEnum = {
+  HIDE: 0,
+  CREATE: 1,
+  UPDATE: 2,
+  DETAIL: 3,
+};
+
+export { ModalEnum };

src/enums/enums.js

@@ -6,3 +6,4 @@ export { AppRoute } from "./AppRoute";
 export { StorageKey } from "./StorageKey";
 export { Access } from "./Access";
 export { PermissionName } from "./PermissionName";
+export { ModalEnum } from "./Modal/ModalEnum";

src/hooks/class/useClass.js

@@ -0,0 +1,84 @@
+import { useCallback, useState } from "react";
+import { ClassApi } from "@/utils/axios/ApiService.js";
+import { mappedClassData } from "@/utils/utils";
+
+const useClass = () => {
+    const [classData, setClassData] = useState([]);
+    const [originalClassData, setOriginalClassData] = useState([]);
+    const [isModalLoading, setIsModalLoading] = useState(false);
+    const [tableErrorMessage, setTableErrorMessage] = useState("");
+    const [visibleModal, setVisibleModal] = useState(0);
+    const [selectedClassUUID, setSelectedClassUUID] = useState(null);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [rowPerPage, setRowPerPage] = useState(5);
+    const [isRefreshPage, setIsRefreshPage] = useState(false);
+    const [isTableLoading, setIsTableLoading] = useState(false);
+    const [totalData, setTotalData] = useState(0);
+    const [totalPages, setTotalPages] = useState(0);
+    const [filterValues, setFilterValues] = useState([]);
+
+    const getAllClasses = useCallback(async () => {
+        setTableErrorMessage(false);
+        setIsTableLoading(true);
+
+        try {
+            const response = await ClassApi.getClasses(rowPerPage, currentPage, true, "", filterValues);
+            if (response.success) {
+                const { data, total } = response.data;
+                const mappedClasses = data.map((cls, idx) =>
+                    mappedClassData(cls, idx + 1 + (currentPage - 1) * rowPerPage)
+                );
+                setClassData(mappedClasses);
+                setOriginalClassData(mappedClasses);
+                setTotalData(total);
+                setTotalPages(Math.ceil(total / rowPerPage));
+            } else {
+                setClassData([]);
+            }
+        } catch (error) {
+            setTableErrorMessage('Error fetching class data');
+        } finally {
+            setIsTableLoading(false);
+        }
+    }, [rowPerPage, currentPage, filterValues]);
+
+    const handleSetRowPerPage = (value) => {
+        setRowPerPage(value);
+        setCurrentPage(1);
+        setIsRefreshPage((prev) => !prev);
+    };
+
+    const filterClassData = (filterValues) => {
+        setFilterValues(filterValues);
+        setIsRefreshPage((prev) => !prev);
+    };
+
+    return {
+        classData,
+        setClassData,
+        isModalLoading,
+        setIsModalLoading,
+        isTableLoading,
+        setIsTableLoading,
+        tableErrorMessage,
+        visibleModal,
+        setVisibleModal,
+        selectedClassUUID,
+        setSelectedClassUUID,
+        currentPage,
+        setCurrentPage,
+        rowPerPage,
+        setRowPerPage: handleSetRowPerPage,
+        isRefreshPage,
+        setTableErrorMessage,
+        setIsRefreshPage,
+        totalData,
+        setTotalData,
+        totalPages,
+        setTotalPages,
+        getAllClasses,
+        filterClassData
+    };
+};
+
+export { useClass };