Frontend/src/lib/contexts/DataTable.js

import { createContext, useEffect, useState } from "react";
import { toast } from "react-toastify";
import useTableSetting from "@/lib/hooks/useTableSetting";
import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
import AskForKeepData from "@/core/components/NotificationDesign/AskForKeepData";
import { LinearProgress } from "@mui/material";

export const DataTableContext = createContext();

const DataTableProvider = ({
  children,
  user_id,
  page_name,
  table_name,
  columns,
  initialSort = [],
}) => {
  const { settingStore } = useTableSetting();
  const [isInitStates, setInitStates] = useState(false);
  const flatColumns = flattenArrayOfObjects(columns, "columns");
  const [initFilter, setInitFilter] = useState({});
  const [filterData, setFilterData] = useState({});
  const [initSort, setInitSort] = useState(initialSort || []);
  const [sortData, setSortData] = useState(initialSort || []);
  const [initHide, setInitHide] = useState({});
  const [hideData, setHideData] = useState({});
  const [isDirty, setIsDirty] = useState(false);
  const [isAnyDirty, setIsAnyDirty] = useState(false);

  useEffect(() => {
    let hasAnyConflict = false;
    const hasConflict =
      JSON.stringify(hideData) !== JSON.stringify(initHide) ||
      JSON.stringify(sortData) !== JSON.stringify(initSort) ||
      JSON.stringify(filterData) !== JSON.stringify(initFilter);

    const CheckFilterValues = Object.values(filterData).every((innerObject) => {
      if (
        innerObject.datatype === "date" &&
        innerObject.filterMode === "between"
      ) {
        return (
          Array.isArray(innerObject.value) &&
          innerObject.value.length === 2 &&
          innerObject.value.every((v) => v === "")
        );
      } else {
        return innerObject.value === "";
      }
    });
    const flattenObject = (obj) => {
      let result = {};
      for (const key in obj) {
        if (typeof obj[key] === "object" && obj[key] !== null) {
          Object.assign(result, flattenObject(obj[key])); // باز کردن اشیای تودرتو
        } else {
          result[key] = obj[key];
        }
      }
      return result;
    };

    // تبدیل آبجکت به آبجکت فلت شده
    const flatHideData = flattenObject(hideData);

    const CheckHideValues = Object.values(flatHideData).every(
      (value) => value === true,
    );
    hasAnyConflict =
      !CheckHideValues ||
      JSON.stringify(sortData) !== JSON.stringify(initialSort) ||
      !CheckFilterValues;

    setIsDirty(hasConflict);
    setIsAnyDirty(hasAnyConflict);
  }, [hideData, sortData, filterData, initHide, initSort, initFilter]);

  useEffect(() => {
    if (!settingStore) return;
    const filterValues = flatColumns.reduce((acc, column) => {
      if (!column.enableColumnFilter) return acc;
      const storeFilter = settingStore?.[user_id]?.[page_name]?.[table_name]?.[
        "filters"
      ]?.find((filter) => filter.id === column.id);
      if (column.datatype === "array") {
        acc[column.id] = {
          id: column.id,
          value: storeFilter?.value || [],
          filterMode: storeFilter?.filterMode || column.filterMode,
          datatype: column.datatype,
        };
      } else if (column.filterMode === "between") {
        acc[column.id] = {
          id: column.id,
          value: storeFilter?.value || ["", ""],
          filterMode: storeFilter?.filterMode || column.filterMode,
          datatype: column.datatype,
        };
      } else {
        acc[column.id] = {
          id: column.id,
          value: storeFilter?.value || "",
          filterMode: storeFilter?.filterMode || column.filterMode,
          datatype: column.datatype,
        };
      }
      return acc;
    }, {});

    const getHideValues = (columns) => {
      return columns.reduce((acc, column) => {
        const columnId = column.id;
        const storeHide =
          settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"]?.[
            columnId
          ];
        if (column.columns && column.columns.length > 0) {
          acc[columnId] = getHideValues(column.columns);
        } else {
          acc[columnId] = storeHide !== undefined ? storeHide : true;
        }

        return acc;
      }, {});
    };

    const hideValues = getHideValues(columns);
    setHideData(hideValues);
    setInitHide(hideValues);
    setFilterData(filterValues);
    setInitFilter(filterValues);
    setSortData(
      settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] ||
        initialSort,
    );
    setInitSort(
      settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] ||
        initialSort,
    );
    setInitStates(true);
  }, [settingStore]);

  useEffect(() => {
    if (
      JSON.stringify(initFilter) !== JSON.stringify(filterData) ||
      JSON.stringify(initSort) !== JSON.stringify(sortData) ||
      JSON.stringify(initHide) !== JSON.stringify(hideData)
    ) {
      if (!toast.isActive("keep_data", "filtering")) {
        toast(
          <AskForKeepData
            filterData={filterData}
            sortData={sortData}
            hideData={hideData}
            user_id={user_id}
            page_name={page_name}
            table_name={table_name}
            columns={flatColumns}
          />,
          {
            containerId: "filtering",
            toastId: "keep_data",
            className: "filter-toast",
            position: "bottom-left",
            draggable: true,
            autoClose: false,
          },
        );
      } else {
        toast.update("keep_data", {
          containerId: "filtering",
          toastId: "keep_data",
          render: (
            <AskForKeepData
              filterData={filterData}
              sortData={sortData}
              hideData={hideData}
              user_id={user_id}
              page_name={page_name}
              table_name={table_name}
              columns={flatColumns}
            />
          ),
        });
      }
    } else {
      toast.dismiss({ containerId: "datatable" });
    }
  }, [filterData, sortData, hideData]);

  if (!isInitStates) return <LinearProgress sx={{ borderRadius: 2 }} />;

  return (
    <DataTableContext.Provider
      value={{
        filterData,
        setFilterData,
        sortData,
        setSortData,
        hideData,
        setHideData,
        isDirty,
        isAnyDirty,
      }}
    >
      {children}
    </DataTableContext.Provider>
  );
};

export default DataTableProvider;