@licklist/design 0.49.0 → 0.50.0-dev.0

package/src/table/TableHelperComponent.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import React, { useEffect, useState } from "react";
+import React, { SetStateAction, useEffect, useState } from "react";
 import { Col, Row, Table } from "react-bootstrap";
 import { useLocation } from "react-router-dom";
 import { isEqual } from "lodash";
@@ -30,6 +30,7 @@ export interface TableHelperComponentProps {
   displayShowingSection?: boolean;
   externalFilters?: { [key: string]: any };
   initialOptions?: Partial<ITableProps>;
+  filteredOrdersOptions?: (value: SetStateAction<ITableProps>) => void;
 }
 
 // @TODO Refactor? component to get less complexity
@@ -62,6 +63,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
     displayShowingSection = true,
     externalFilters = {},
     initialOptions = {},
+    filteredOrdersOptions,
   } = props;
 
   const query = useQuery();
@@ -97,8 +99,9 @@ function TableHelperComponent(props: TableHelperComponentProps) {
   useEffect(
     () => {
       if (
-        isEqual(optionsCache, options) &&
-        isEqual(cachedExtFilters, externalFilters)
+        (isEqual(optionsCache, options) &&
+          isEqual(cachedExtFilters, externalFilters)) ||
+        !!filteredOrdersOptions
       )
         return;
 
@@ -124,12 +127,12 @@ function TableHelperComponent(props: TableHelperComponentProps) {
       );
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pathname, options, onRefreshFn, externalFilters]
+    [pathname, options, onRefreshFn, filteredOrdersOptions, externalFilters]
   );
 
   // Refresh table's content on manual trigger
   useEffect(() => {
-    if (refreshedAt === refreshAt) {
+    if (refreshedAt === refreshAt || !!filteredOrdersOptions) {
       return;
     }
 
@@ -138,24 +141,44 @@ function TableHelperComponent(props: TableHelperComponentProps) {
     if (onRefreshFn) {
       onRefreshFn(options);
     }
-  }, [onRefreshFn, options, refreshAt, refreshedAt]);
+  }, [onRefreshFn, options, refreshAt, filteredOrdersOptions, refreshedAt]);
 
   const onSort = (key: string) => {
     let nextDirection = TableService.DEFAULT_SORT_DIRECTION;
-
     if (sortKey === key) {
-      setOptions((prevOptions) => {
-        nextDirection = TableService.getSortDirection(
-          prevOptions.sortDirection,
-          nextDirection
-        );
+      if (filteredOrdersOptions) {
+        filteredOrdersOptions((prevOptions) => {
+          nextDirection = TableService.getSortDirection(
+            prevOptions.sortDirection,
+            nextDirection
+          );
 
-        return {
-          ...prevOptions,
-          sortKey: key,
-          sortDirection: nextDirection,
-        };
-      });
+          return {
+            ...prevOptions,
+            sortKey: key,
+            sortDirection: nextDirection,
+          };
+        });
+      } else {
+        setOptions((prevOptions) => {
+          nextDirection = TableService.getSortDirection(
+            prevOptions.sortDirection,
+            nextDirection
+          );
+
+          return {
+            ...prevOptions,
+            sortKey: key,
+            sortDirection: nextDirection,
+          };
+        });
+      }
+    } else if (filteredOrdersOptions) {
+      filteredOrdersOptions((prevOptions) => ({
+        ...prevOptions,
+        sortKey: key,
+        sortDirection: nextDirection,
+      }));
     } else {
       setOptions((prevOptions) => ({
         ...prevOptions,
@@ -166,6 +189,13 @@ function TableHelperComponent(props: TableHelperComponentProps) {
   };
 
   const onPerPageChange = (nextPerPage: number) => {
+    if (filteredOrdersOptions) {
+      filteredOrdersOptions((prevOptions) => ({
+        ...prevOptions,
+        page: nextPerPage,
+      }));
+      return;
+    }
     setOptions((prevOptions) => ({
       ...prevOptions,
       perPage: nextPerPage,
@@ -173,6 +203,13 @@ function TableHelperComponent(props: TableHelperComponentProps) {
   };
 
   const onPageChange = (nextPage: number) => {
+    if (filteredOrdersOptions) {
+      filteredOrdersOptions((prevOptions) => ({
+        ...prevOptions,
+        page: nextPage,
+      }));
+      return;
+    }
     setOptions((prevOptions) => ({
       ...prevOptions,
       page: nextPage,
@@ -180,6 +217,24 @@ function TableHelperComponent(props: TableHelperComponentProps) {
   };
 
   const onFilterChange = (nextFilter: string) => {
+    if (filteredOrdersOptions) {
+      filteredOrdersOptions(({ page: prevPage, ...prevOptions }) => {
+        let nextPage = prevPage;
+
+        if (
+          (!nextFilter && prevOptions.filter) ||
+          (nextFilter && !prevOptions.filter)
+        ) {
+          nextPage = 1;
+        }
+
+        return {
+          ...prevOptions,
+          page: nextPage,
+          filter: nextFilter,
+        };
+      });
+    }
     setOptions(({ page: prevPage, ...prevOptions }) => {
       let nextPage = prevPage;