feat: add query builder to use table

packages/react-material-ui/package.json

@@ -30,6 +30,7 @@
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.6",
     "@mui/utils": "5.9.3",
+    "@nestjsx/crud-request": "^5.0.0-alpha.3",
     "@rjsf/core": "^5.0.0-beta.13",
     "@rjsf/mui": "^5.0.0-beta.13",
     "@rjsf/utils": "^5.0.0-beta.13",

packages/react-material-ui/src/components/Table/TableBody/TableBodyRows.tsx

@@ -76,8 +76,8 @@ export const TableBodyRows = ({
   renderRow,
   isLoading = false,
 }: TableBodyRowProps) => {
-  const { rows, tableQuery, isControlled } = useTableRoot();
-  const { page, rowsPerPage, order, orderBy } = tableQuery;
+  const { rows, tableState, isControlled } = useTableRoot();
+  const { page, rowsPerPage, order, orderBy } = tableState;
 
   if (isLoading) {
     return <TableRowSkeleton />;

packages/react-material-ui/src/components/Table/TableHeader/TableHeaderCell.tsx

@@ -21,8 +21,8 @@ type TableHeaderCellProps = {
  * @returns A React JSX element representing the header cell.
  */
 export const TableHeaderCell = ({ cell, ...rest }: TableHeaderCellProps) => {
-  const { tableQuery, handleSort } = useTableRoot();
-  const { order, orderBy } = tableQuery;
+  const { tableState, handleSort } = useTableRoot();
+  const { order, orderBy } = tableState;
 
   /**
    * Creates a sort handler function for a specific table column.

packages/react-material-ui/src/components/Table/TablePagination.tsx

@@ -27,10 +27,10 @@ export const TablePagination = ({
   ...rest
 }: TablePaginationProps) => {
   const theme = useTheme();
-  const { rows, tableQuery, total, handleChangePage, handleChangeRowsPerPage } =
+  const { rows, tableState, total, handleChangePage, handleChangeRowsPerPage } =
     useTableRoot();
 
-  const { rowsPerPage, page } = tableQuery;
+  const { rowsPerPage, page } = tableState;
 
   return (
     <MuiTablePagination

packages/react-material-ui/src/components/Table/TablePaginationNumbers.tsx

@@ -11,9 +11,9 @@ import { useTableRoot } from './hooks/useTableRoot';
  * @returns A React element representing the table pagination numbers.
  */
 export const TablePaginationNumbers = (props: PaginationProps) => {
-  const { rows, pageCount, handleChangePage, tableQuery } = useTableRoot();
+  const { rows, pageCount, handleChangePage, tableState } = useTableRoot();
 
-  const { page } = tableQuery;
+  const { page } = tableState;
 
   return (
     <Box display="flex" justifyContent="center">

packages/react-material-ui/src/components/Table/TableRoot.tsx

@@ -3,8 +3,8 @@
 import React, { PropsWithChildren, useState } from 'react';
 import { Box, BoxProps } from '@mui/material';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { HeaderProps, Order, RowProps, TableQueryStateProps } from './types';
-import { useTableQueryState } from './hooks/useTableQueryState';
+import { HeaderProps, Order, RowProps, TableStateProps } from './types';
+import { useTableState } from './hooks/useTableState';
 import { TableContext } from './hooks/useTableRoot';
 import { getSearchParams } from '../../utils/http';
 
@@ -14,18 +14,16 @@ type TableRootProps =
       headers: HeaderProps[];
       total?: number;
       pageCount?: never;
-      tableQueryState?: never;
-      updateTableQueryState?: never;
+      tableState?: never;
+      updateTableState?: never;
     }
   | {
       rows: RowProps[];
       headers: HeaderProps[];
       total: number;
       pageCount: number;
-      tableQueryState: TableQueryStateProps;
-      updateTableQueryState: React.Dispatch<
-        React.SetStateAction<TableQueryStateProps>
-      >;
+      tableState: TableStateProps;
+      updateTableState: React.Dispatch<React.SetStateAction<TableStateProps>>;
     };
 
 /**
@@ -40,25 +38,23 @@ export const TableRoot = ({
   headers = [],
   total,
   pageCount,
-  tableQueryState: controlledTableQueryState,
-  updateTableQueryState: controlledUpdateTableQueryState,
+  tableState: controlledTableState,
+  updateTableState: controlledUpdateTableState,
   ...rest
 }: PropsWithChildren<TableRootProps & BoxProps>) => {
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const router = useRouter();
-  const { tableQueryState, setTableQueryState } = useTableQueryState();
+  const { tableState, setTableState } = useTableState();
 
   const [selected, setSelected] = useState<RowProps[]>([]);
 
-  const isControlled = !!controlledTableQueryState;
-  const handleUpdateTableQuery = isControlled
-    ? controlledUpdateTableQueryState
-    : setTableQueryState;
+  const isControlled = !!controlledTableState;
+  const handleUpdateTableState = isControlled
+    ? controlledUpdateTableState
+    : setTableState;
 
-  const { order, orderBy } = isControlled
-    ? controlledTableQueryState
-    : tableQueryState;
+  const { order, orderBy } = isControlled ? controlledTableState : tableState;
 
   /**
    * Handles the change of the number of rows displayed per page in the table.
@@ -73,7 +69,7 @@ export const TableRoot = ({
       page: 1,
     };
 
-    handleUpdateTableQuery((prevState) => ({
+    handleUpdateTableState((prevState) => ({
       ...prevState,
       ...newRowsPerPageProperties,
     }));
@@ -152,7 +148,7 @@ export const TableRoot = ({
       page: newPage,
     };
 
-    handleUpdateTableQuery((prevState) => ({
+    handleUpdateTableState((prevState) => ({
       ...prevState,
       ...newPageProperty,
     }));
@@ -178,7 +174,7 @@ export const TableRoot = ({
       orderBy: property,
     };
 
-    handleUpdateTableQuery((prevState) => ({
+    handleUpdateTableState((prevState) => ({
       ...prevState,
       ...newOrderProperties,
     }));
@@ -199,7 +195,7 @@ export const TableRoot = ({
         total,
         pageCount,
         isControlled,
-        tableQuery: isControlled ? controlledTableQueryState : tableQueryState,
+        tableState: isControlled ? controlledTableState : tableState,
         selected,
         isSelected,
         handleChangePage,

packages/react-material-ui/src/components/Table/TableRowSkeleton.tsx

@@ -12,10 +12,10 @@ import { useTableRoot } from './hooks/useTableRoot';
  * @returns A React element representing the table row skeleton.
  */
 export const TableRowSkeleton = () => {
-  const { tableQuery } = useTableRoot();
+  const { tableState } = useTableRoot();
 
   const rowsToRender = Array.from(
-    { length: tableQuery.rowsPerPage },
+    { length: tableState.rowsPerPage },
     (_, index) => index + 1,
   );
 

packages/react-material-ui/src/components/Table/hooks/useTableRoot.tsx

@@ -1,15 +1,15 @@
 'use client';
 
 import React, { createContext, useContext } from 'react';
-import { HeaderProps, RowProps, TableQueryStateProps } from '../types';
+import { HeaderProps, RowProps, TableStateProps } from '../types';
 
 type TableContextProps = {
   rows: RowProps[];
   headers: HeaderProps[];
   total: number;
   isControlled: boolean;
   pageCount: number;
-  tableQuery: TableQueryStateProps;
+  tableState: TableStateProps;
   selected: RowProps[];
   isSelected: (id: string) => boolean;
   handleChangePage: (event: unknown, newPage: number) => void;

packages/react-material-ui/src/components/Table/hooks/useTableState.ts

@@ -0,0 +1,47 @@
+import { ReadonlyURLSearchParams, useSearchParams } from 'next/navigation';
+import { Order, TableStateProps } from '../types';
+import { useState } from 'react';
+
+export const TABLE_STATE_DEFAULT_VALUE: TableStateProps = {
+  order: Order.Asc,
+  orderBy: 'id',
+  rowsPerPage: 5,
+  page: 1,
+};
+
+export const getTableState = (
+  initialState: TableStateProps,
+  searchParams?: ReadonlyURLSearchParams,
+) => ({
+  order:
+    (searchParams?.get('order') as Order) ||
+    initialState?.order ||
+    TABLE_STATE_DEFAULT_VALUE.order,
+  orderBy:
+    searchParams?.get('orderBy') ||
+    initialState?.orderBy ||
+    TABLE_STATE_DEFAULT_VALUE.orderBy,
+  rowsPerPage:
+    Number(searchParams?.get('rowsPerPage')) ||
+    initialState?.rowsPerPage ||
+    TABLE_STATE_DEFAULT_VALUE.rowsPerPage,
+  page:
+    Number(searchParams?.get('page')) ||
+    initialState?.page ||
+    TABLE_STATE_DEFAULT_VALUE.page,
+});
+
+export const useTableState = (initialState?: TableStateProps) => {
+  const searchParams = useSearchParams();
+
+  // In this state, we don't want the strings
+  // We want the values in the interface that nestjs provides
+  const [tableState, setTableState] = useState<TableStateProps>(
+    getTableState(initialState, searchParams),
+  );
+
+  return {
+    tableState,
+    setTableState,
+  };
+};

packages/react-material-ui/src/components/Table/types.ts

@@ -2,8 +2,6 @@ import { ReactNode } from 'react';
 
 export type BasicType = string | number | boolean;
 
-export type SimpleFilter = Record<string, BasicType | BasicType[] | null>;
-
 export type HeaderProps = {
   disablePadding?: boolean;
   id: string;
@@ -53,13 +51,11 @@ export enum Order {
   Desc = 'desc',
 }
 
-export type TableQueryStateProps = {
+export type TableStateProps = {
   order?: Order;
   orderBy?: string;
   rowsPerPage?: number;
   page?: number;
-  simpleFilter?: SimpleFilter;
-  search?: string;
 };
 
 export type RenderRowFunction = (row: RowProps, labelId: string) => ReactNode;