Implement permanent pagination in Licenses.jsx

dashboard/src/states/Dashboard/pages/Licenses/Licenses.jsx

@@ -6,32 +6,57 @@ import {Button, Stack, TextField} from "@mui/material";
 import {Search} from "@mui/icons-material";
 import columns from "./columns.jsx";
 
+const LOCAL_STORAGE_KEY_PAGINATION = 'licenses_table_pagination';
+const LOCAL_STORAGE_KEY_COLUMNS = 'licenses_table_columns';
+const LOCAL_STORAGE_KEY_DISPLAYED_COLUMNS = 'licenses_table_displayed_columns';
+
 export const Licenses = () => {
     const {currentProject} = useContext(ProjectContext);
 
     const [isLoading, setIsLoading] = useState(true);
     const [rows, setRows] = useState([]);
-    const [pageInfo, setPageInfo] = useState({totalRowCount: 0, totalPages: 0, pageSize: 100, page: 0});
+    const [paginationModel, setPaginationModel] = useState(JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY_PAGINATION))
+        || {page: 1, pageSize: 25, rowCount: 0});
+
+    const [columnSettings, setColumnSettings] = useState(JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY_COLUMNS)) || {});
+    const [disabledColumns, setDisabledColumns] = useState(JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY_DISPLAYED_COLUMNS)) || []);
 
     const fetchLicenses = async () => {
         setIsLoading(true);
         try {
-            const data = await getRequest(`/license/${currentProject.id}/list?limit=${pageInfo.pageSize}&page=${pageInfo.page}`);
+            const data = await getRequest(`/license/${currentProject.id}/list?limit=${paginationModel.pageSize}&page=${paginationModel.page}`);
-
             setRows(data?.licenses.map((license) => ({id: license.key, ...license})) || []);
-            setPageInfo(pageInfo => ({totalRowCount: data.total, totalPages: Math.ceil(data.total / pageInfo.pageSize),
+            setPaginationModel(prev => ({...prev, rowCount: data.total}));
-                pageSize: pageInfo.pageSize, page: pageInfo.page}));
             setIsLoading(false);
         } catch (e) {
             console.error(e);
+            setIsLoading(false);
         }
-    }
+    };
-
-    const onPageChange = async (page) => setPageInfo({...pageInfo, page: page});
 
     useEffect(() => {
+        localStorage.setItem(LOCAL_STORAGE_KEY_PAGINATION, JSON.stringify(paginationModel));
         fetchLicenses();
-    }, [pageInfo.page]);
+    }, [paginationModel.pageSize, paginationModel.page]);
+
+    useEffect(() => {
+        localStorage.setItem(LOCAL_STORAGE_KEY_COLUMNS, JSON.stringify(columnSettings));
+    }, [columnSettings]);
+
+    const handlePaginationModelChange = (model) => setPaginationModel(prev => ({...prev, page: model.page,
+        pageSize: model.pageSize}));
+
+    const handleColumnWidthChange = (params) => setColumnSettings((prev) => ({...prev,
+        [params.colDef.field]: params.width}));
+
+    const getColumnsWithWidth = () => columns.map(column => ({...column,
+        width: columnSettings[column.field] || column.width}));
+
+    const updateDisplayedColumns = (columns) => {
+        const newColumns = Object.keys(columns).filter(column => !columns[column]);
+        setDisabledColumns(newColumns);
+        localStorage.setItem(LOCAL_STORAGE_KEY_DISPLAYED_COLUMNS, JSON.stringify(newColumns));
+    }
 
     return (
         <Stack>
@@ -42,10 +67,13 @@ export const Licenses = () => {
                 <Button variant="contained" color="primary">Create license</Button>
             </Stack>
 
-            <DataGrid rows={rows} columns={columns} loading={isLoading} paginationMode="server" disableSelectionOnClick
+            <DataGrid rows={rows} columns={getColumnsWithWidth()} loading={isLoading} paginationMode="server"
-                      rowCount={pageInfo.totalRowCount} paginationModel={pageInfo} autoHeight disableColumnFilter
+                      paginationModel={paginationModel} onPaginationModelChange={handlePaginationModelChange}
-                      onPaginationModelChange={(page) => onPageChange(page.page)} disableColumnMenu
+                      rowCount={paginationModel.rowCount} autoHeight disableColumnFilter disableColumnSorting
-                      sx={{display: 'grid', gridTemplateRows: 'auto 1f auto'}} />
+                      sx={{display: 'grid', gridTemplateRows: 'auto 1fr auto'}} pageSizeOptions={[10, 25, 50]}
+                      columnVisibilityModel={disabledColumns.reduce((acc, column) => ({...acc, [column]: false}), {})}
+                      onColumnVisibilityModelChange={updateDisplayedColumns}
+                      onColumnWidthChange={handleColumnWidthChange}/>
         </Stack>
     );
 }