implement base of Datatable_components

src/lib/app/contexts/DatatableContext.jsx

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+import useDataTable from "../hooks/useDataTable";
+
+export const DataTableContext = createContext();
+
+export const DataTableProvider = (props) => {
+  const contextValue = useDataTable();
+
+  return (
+    <DataTableContext.Provider value={contextValue}>
+      {props.children}
+    </DataTableContext.Provider>
+  );
+};

src/lib/app/contexts/ReloadDatatableContext.jsx

@@ -0,0 +1,15 @@
+import { createContext, useState } from "react";
+
+export const ReloadDataTableContext = createContext();
+
+export const ReloadDataTableProvider = ({ children }) => {
+  const [reloadDataTable, setReloadDataTable] = useState(false);
+
+  return (
+    <ReloadDataTableContext.Provider
+      value={{ reloadDataTable, setReloadDataTable }}
+    >
+      {children}
+    </ReloadDataTableContext.Provider>
+  );
+};

src/lib/app/hooks/useDatatable.jsx

@@ -0,0 +1,169 @@
+import { useMediaQuery } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { useState, useReducer, useCallback, useContext } from "react";
+import axios from "axios";
+import ImageResizer from "@/core/components/ImageConvertor";
+import useUser from "./useUser";
+import { ReloadDataTableContext } from "../contexts/ReloadDatatableContext";
+
+const initialValues = {
+  url: "",
+  rowID: "",
+  values: {},
+  image: {
+    key: "",
+    value: {},
+  },
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_DATA":
+      return {
+        ...state,
+        url: action.url,
+        values: action.values,
+        image: action.image,
+        rowID: "",
+      };
+    case "EDIT_DATA":
+      return {
+        ...state,
+        url: action.url,
+        values: action.values,
+        rowID: action.rowID,
+        image: action.image,
+      };
+    case "DELETE_DATA":
+      return {
+        ...state,
+        url: action.url,
+        rowID: action.rowID,
+        values: {},
+        image: {},
+      };
+    default:
+      return state;
+  }
+};
+
+const useDataTable = () => {
+  const { setReloadDataTable } = useContext(ReloadDataTableContext);
+  const [state, dispatch] = useReducer(reducer, initialValues);
+  const [drawerContent, setDrawerContent] = useState(null);
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+  const [rowId, setRowId] = useState(null);
+  const theme = useTheme();
+  const { token } = useUser();
+
+  const drawerDirection = useMediaQuery(theme.breakpoints.up("sm"))
+    ? "right"
+    : "bottom";
+  const [sweepableDrawer, setSweepableDrawer] = useState({
+    bottom: false,
+    right: false,
+  });
+
+  const addData = useCallback(async (url, values, image) => {
+    dispatch({ type: "ADD_DATA", url: url, values: values, image: image });
+    if (image != null) {
+      var resizedAvatar = await ImageResizer(image.value);
+      formData.append(image.key, resizedAvatar);
+      axios.post(url, formData, {
+        headers: {
+          authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/form-data",
+        },
+      });
+    }
+    axios
+      .post(url, values, {
+        headers: {
+          authorization: `Bearer ${token}`,
+        },
+      })
+      .then(() => {})
+      .catch(() => {});
+  }, []);
+
+  const deleteData = useCallback(async (url, rowID) => {
+    dispatch({ type: "DELETE_DATA", url: url, rowID: rowID });
+    axios
+      .delete(`${url}/${rowID}`, {
+        headers: {
+          authorization: `Bearer ${token}`,
+        },
+      })
+      .then(() => {
+        setReloadDataTable(true);
+      })
+      .catch(() => {});
+  }, []);
+
+  const editData = useCallback(async (url, values, rowID, image) => {
+    dispatch({
+      type: "EDIT_DATA",
+      url: url,
+      values: values,
+      rowID: rowID,
+      image: image,
+    });
+    if (image != null) {
+      var resizedAvatar = await ImageResizer(image.value);
+      formData.append(image.key, resizedAvatar);
+      axios.post(`${url}/${rowID}`, formData, {
+        headers: {
+          authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/form-data",
+        },
+      });
+    }
+    axios
+      .post(`${url}/${rowID}`, values, {
+        headers: {
+          authorization: `Bearer ${token}`,
+        },
+      })
+      .then(() => {})
+      .catch(() => {});
+  }, []);
+
+  const toggleDrawer = (open) => {
+    open == false &&
+      setTimeout(() => {
+        setDrawerContent(null);
+      }, theme.transitions.duration.leavingScreen);
+    setSweepableDrawer({ ...sweepableDrawer, [drawerDirection]: open });
+  };
+  const handleOpenDeleteDialog = (row) => {
+    setRowId(row.getValue("id"));
+    setOpenDeleteDialog(true);
+  };
+
+  const handleCloseDeleteDialog = () => {
+    setOpenDeleteDialog(false);
+  };
+
+  const handleDeleteDialog = () => {
+    setOpenDeleteDialog(false);
+  };
+
+  const contextValue = {
+    toggleDrawer,
+    drawerDirection,
+    sweepableDrawer,
+    setSweepableDrawer,
+    setDrawerContent,
+    drawerContent,
+    openDeleteDialog,
+    handleOpenDeleteDialog,
+    handleCloseDeleteDialog,
+    handleDeleteDialog,
+    rowId,
+    deleteData,
+    addData,
+  };
+  return contextValue;
+};
+
+export default useDataTable;