Merge pull request #139 from brunomous/feature/cache-module-integration

Integrate Filter settings with Cache Module endpoints

Author: andreneto97

Diff for: packages/react-material-ui/src/components/ComposedTable/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 
 import type { TableRootProps } from '../Table/TableRoot';
 import type { FilterProps } from '../Filter/Filter';
@@ -36,27 +36,22 @@ const ComposedTable = (props: ComposedTableProps) => {
   const auth = useAuth();
   const pathname = usePathname();
 
-  const [settings, setSettings] = useSettingsStorage({
-    key: 'tableSettings',
-    user: (auth?.user as { id: string })?.id ?? '',
-    settingsId: props.settingsId || pathname,
-    list: props.headers.map((header) => ({
+  const [orderableHeaders, setOrderableHeaders] = useState(props.headers);
+
+  const { setSettings } = useSettingsStorage({
+    key: props.settingsId || pathname,
+    type: 'table',
+    assignee: {
+      id: (auth?.user as { id: string })?.id ?? '',
+    },
+    data: props.headers.map((header) => ({
       id: header.id,
       hide: Boolean(header.hide),
     })),
-  });
-
-  const [orderableHeaders, setOrderableHeaders] = useState(props.headers);
-
-  const handleHeadersOrderChange = (list: ListItem[]) => {
-    setOrderableHeaders(list);
-    setSettings(list);
-  };
-
-  useEffect(() => {
-    if (settings.length) {
+    cacheApiUri: props.settingsCacheUri,
+    setListCallback: (callbackData) =>
       setOrderableHeaders(
-        settings.map((item: ListItem) => {
+        callbackData.map((item: ListItem) => {
           const headerItem = props.headers.find(
             (header) => header.id === item.id,
           );
@@ -66,9 +61,13 @@ const ComposedTable = (props: ComposedTableProps) => {
             ...headerItem,
           };
         }),
-      );
-    }
-  }, []);
+      ),
+  });
+
+  const handleHeadersOrderChange = (list: ListItem[]) => {
+    setOrderableHeaders(list);
+    setSettings(list);
+  };
 
   return (
     <Box>

Diff for: packages/react-material-ui/src/components/Filter/Filter.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { ReactNode, useState, useEffect } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { Box, Grid, GridProps } from '@mui/material';
 import { FilterAlt } from '@mui/icons-material';
 import { useAuth } from '@concepta/react-auth-provider';
@@ -201,28 +201,19 @@ export type FilterProps = {
   complementaryActions?: ReactNode | ((filters: ListItem[]) => ReactNode);
   /** Settings identifier */
   settingsId?: string;
+  settingsCacheUri?: string;
 } & GridProps;
 
 export const Filter = (props: FilterProps) => {
   const { filters, minimumFilters = 0, hasAllOption, ...rest } = props;
+
   const auth = useAuth();
   const pathname = usePathname();
 
-  const [settings, setSettings] = useSettingsStorage({
-    key: 'filterSettings',
-    user: (auth?.user as { id: string })?.id ?? '',
-    settingsId: props.settingsId || pathname,
-    list: filters.map((header) => ({
-      id: header.id,
-      hide: Boolean(header.hide),
-    })),
-  });
-
   const resetFilters = (item) => () => {
     if (item && item?.onDebouncedSearchChange) {
       item.onDebouncedSearchChange(null);
     }
-
     if (item && item?.onChange) {
       item.onChange(null);
     }
@@ -237,13 +228,18 @@ export const Filter = (props: FilterProps) => {
     })),
   );
 
-  const handleFilterOrderChange = (list: ListItem[]) => {
-    setFilterOrder(list);
-    setSettings(list);
-  };
-
-  useEffect(() => {
-    if (settings.length) {
+  const { setSettings } = useSettingsStorage({
+    key: props.settingsId || pathname,
+    type: 'filter',
+    assignee: {
+      id: (auth?.user as { id: string })?.id ?? '',
+    },
+    data: filters.map((header) => ({
+      id: header.id,
+      hide: Boolean(header.hide),
+    })),
+    cacheApiUri: props.settingsCacheUri,
+    setListCallback: (settings) => {
       const originalFilters = [...filters];
       const newFiltersOrder = [];
 
@@ -252,6 +248,7 @@ export const Filter = (props: FilterProps) => {
           (filter) => filter?.id === item.id,
         );
         const filterItem = originalFilters[filterItemIndex];
+
         if (filterItem) {
           newFiltersOrder.push({
             ...item,
@@ -274,8 +271,13 @@ export const Filter = (props: FilterProps) => {
       });
 
       setFilterOrder(newFiltersOrder);
-    }
-  }, []);
+    },
+  });
+
+  const handleFilterOrderChange = (list: ListItem[]) => {
+    setFilterOrder(list);
+    setSettings(list);
+  };
 
   return (
     <Box

Diff for: packages/react-material-ui/src/components/submodules/Filter/index.tsx

@@ -39,7 +39,12 @@ export type FilterDetails = {
 
 export type FilterCallback = (filter: FilterValues) => void;
 
-const FilterSubmodule = () => {
+type Props = {
+  settingsId?: string;
+  settingsCacheUri?: string;
+};
+
+const FilterSubmodule = (props: Props) => {
   const {
     filters,
     updateSearch,
@@ -186,7 +191,7 @@ const FilterSubmodule = () => {
 
   if (filters.length === 0) return null;
 
-  return <Filter filters={filterObjs} />;
+  return <Filter {...props} filters={filterObjs} />;
 };
 
 export default FilterSubmodule;

Diff for: packages/react-material-ui/src/components/submodules/Table/index.tsx

@@ -109,6 +109,8 @@ export interface TableSubmoduleProps {
   paginationStyle?: PaginationStyle;
   allowModalPreview?: boolean;
   mobileModalTitleSrc?: string;
+  filterSettingsId?: string;
+  filterSettingsCacheUri?: string;
 }
 
 const TableSubmodule = (props: TableSubmoduleProps) => {
@@ -259,7 +261,12 @@ const TableSubmodule = (props: TableSubmoduleProps) => {
             my: 4,
           }}
         >
-          {filters && <FilterSubmodule />}
+          {filters && (
+            <FilterSubmodule
+              settingsId={props.filterSettingsId}
+              settingsCacheUri={props.filterSettingsCacheUri}
+            />
+          )}
           <Box
             sx={{
               display: 'flex',