Merge pull request #269 from chrishiguto/feature/add-search-depends-on

feat: add searchDependsOn to validate when the customSearch can be di…

Author: andreneto97

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

@@ -49,6 +49,7 @@ type Props = {
   orderableListCacheKey?: string;
   cacheApiPath?: string;
   complementaryActions?: ReactNode;
+  searchDependsOn?: string[];
 };
 
 const FilterSubmodule = (props: Props) => {
@@ -64,9 +65,16 @@ const FilterSubmodule = (props: Props) => {
     customSearch,
   } = useCrudRoot();
 
+  const canMakeRequest =
+    !props.searchDependsOn?.length ||
+    props.searchDependsOn?.every(
+      (dependency) =>
+        !filters?.find((filter) => filter.id === dependency)?.isLoading,
+    );
+
   const customSearchData = useMemo(
     () => customSearch?.(filterValues),
-    [filterValues],
+    [filterValues, canMakeRequest],
   );
 
   const externalSearch = useMemo(
@@ -105,7 +113,7 @@ const FilterSubmodule = (props: Props) => {
     }, {});
 
   useEffect(() => {
-    if (!hasExternalSearch) {
+    if (!hasExternalSearch && canMakeRequest) {
       updateSearch(null);
       const filterObj = {
         ...reduceFilters(filterValues, 'simpleFilter'),
@@ -115,7 +123,7 @@ const FilterSubmodule = (props: Props) => {
       updateSimpleFilter(filterObj, true);
     }
 
-    if (hasExternalSearch) {
+    if (hasExternalSearch && canMakeRequest) {
       const filterObj = {
         ...reduceFilters(filterValues, 'search'),
         ...customFilter?.(filterValues),

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

@@ -117,6 +117,7 @@ export interface TableSubmoduleProps {
   addButtonContent?: ReactNode;
   additionalFilterRowContent?: ReactNode;
   additionalTableContent?: ReactNode;
+  searchDependsOn?: string[];
 }
 
 const TableSubmodule = (props: TableSubmoduleProps) => {
@@ -279,6 +280,7 @@ const TableSubmodule = (props: TableSubmoduleProps) => {
             <FilterSubmodule
               orderableListCacheKey={props.filterCacheKey}
               cacheApiPath={props.cacheApiPath}
+              searchDependsOn={props.searchDependsOn}
               complementaryActions={
                 <Box sx={{ display: 'flex' }}>
                   {props.reordable !== false && (

packages/react-material-ui/src/modules/crud/index.tsx

@@ -107,6 +107,7 @@ export interface ModuleProps {
   addButtonEndIcon?: ReactNode;
   addButtonContent?: ReactNode;
   additionalFilterRowContent?: ReactNode;
+  searchDependsOn?: string[];
 }
 
 const CrudModule = (props: ModuleProps) => {
@@ -320,6 +321,7 @@ const CrudModule = (props: ModuleProps) => {
           addButtonEndIcon={props.addButtonEndIcon}
           addButtonContent={props.addButtonContent}
           additionalFilterRowContent={props.additionalFilterRowContent}
+          searchDependsOn={props.searchDependsOn}
           {...useTableReturn}
           {...tableSubmoduleProps}
         />