fixed sorting and filters

Author: talhainvenxion

src/ui/layouts/common/Pagination/index.tsx

@@ -92,8 +92,12 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
     componentName === 'components'
       ? locationPath.pathname.split('/')[5]
       : locationPath.pathname.split('/')[4];
-  // const isValidFilter = props.filters?.map((f) => f.value).join('');
-  // const [fetchingMembers, setFetchingMembers] = useState(true);
+  const isValidFilterFroValue: any = props.filters
+    ?.map((f) => f.value)
+    .join('');
+  const isValidFilterForCategory: any =
+    isValidFilterFroValue && props.filters?.map((f) => f.type.value).join('');
+  const checkValidFilter = isValidFilterFroValue + isValidFilterForCategory;
   useImperativeHandle(ref, () => ({
     callOnChange(page: number, size: number, filters: any, activeSorting: any) {
       props.setPageIndex(page - 1);
@@ -128,10 +132,21 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
     switch (componentName) {
       case 'stacks':
         if (CheckIfRun) {
-          dispatchStackRunsData(id, page, size, filters as any, activeSorting);
+          dispatchStackRunsData(
+            id,
+            page,
+            size,
+            checkValidFilter.length ? (filters as any) : [],
+            activeSorting,
+          );
           break;
         } else {
-          dispatchStackData(page, size, filters as any, activeSorting);
+          dispatchStackData(
+            page,
+            size,
+            checkValidFilter.length ? (filters as any) : [],
+            activeSorting,
+          );
           break;
         }
       case 'components':
@@ -140,15 +155,15 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
             id,
             page,
             size,
-            filters as any,
+            checkValidFilter.length ? (filters as any) : [],
             activeSorting,
           );
           break;
         } else {
           dispatchStackComponentsData(
             page,
             size,
-            filters as any,
+            checkValidFilter.length ? (filters as any) : [],
             activeSorting,
           );
           break;
@@ -159,17 +174,26 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
             id,
             page,
             size,
-            filters as any,
+            checkValidFilter.length ? (filters as any) : [],
             activeSorting,
           );
           break;
         } else {
-          dispatchPipelineData(page, size, filters as any, activeSorting);
+          dispatchPipelineData(
+            page,
+            size,
+            checkValidFilter.length ? (filters as any) : [],
+            activeSorting,
+          );
           break;
         }
 
       case 'all-runs':
-        dispatchAllrunsData(page, size, filters as any);
+        dispatchAllrunsData(
+          page,
+          size,
+          checkValidFilter.length ? (filters as any) : [],
+        );
         break;
 
       default:

src/ui/layouts/common/Table/index.tsx

@@ -191,84 +191,99 @@ export const Table: React.FC<TableProps> = ({
       : locationPath.pathname.split('/')[4];
   const checkForLocationPath = locationPath.pathname.split('/')[4];
   useEffect(() => {
-    // console.log(locationPath.pathname.split('/')[4], 'locationPath1');
+    // console.log(checkValidFilter, 'locationPath1');
     setItemPerPage(itemPerPage);
     if (filters) {
       setPageIndex(0);
     }
-    if (checkValidFilter || activeSorting || checkForLocationPath) {
-      switch (componentName) {
-        case 'stacks':
-          if (CheckIfRun) {
-            dispatchStackRunsData(
-              id,
-              1,
-              itemPerPage,
-              filters as any,
-              activeSorting,
-            );
-            break;
-          } else {
-            dispatchStackData(1, itemPerPage, filters as any, activeSorting);
-            break;
-          }
-        case 'components':
-          if (CheckIfRun) {
-            dispatchStackComponentRunsData(
-              id,
-              1,
-              itemPerPage,
-              filters as any,
-              activeSorting,
-            );
-            break;
-          } else {
-            dispatchStackComponentsData(
-              1,
-              itemPerPage,
-              filters as any,
-              activeSorting,
-            );
-            break;
-          }
-        case 'pipelines':
-          if (CheckIfRun) {
-            dispatchPipelineRunsData(
-              id,
-              1,
-              itemPerPage,
-              filters as any,
-              activeSorting,
-            );
-            break;
-          } else {
-            console.log(itemPerPage, 'itemPerPage');
-            if (!renderAfterRow) break;
-            dispatchPipelineData(1, itemPerPage, filters as any, activeSorting);
-            break;
-          }
-
-        case 'all-runs':
-          dispatchAllrunsData(1, itemPerPage, filters as any, activeSorting);
+    // if (checkValidFilter || activeSorting) {
+    switch (componentName) {
+      case 'stacks':
+        if (CheckIfRun) {
+          dispatchStackRunsData(
+            id,
+            1,
+            itemPerPage,
+            checkValidFilter.length ? (filters as any) : [],
+            activeSorting,
+          );
           break;
-
-        default:
+        } else {
+          dispatchStackData(
+            1,
+            itemPerPage,
+            checkValidFilter.length ? (filters as any) : [],
+            activeSorting,
+          );
+          break;
+        }
+      case 'components':
+        if (CheckIfRun) {
+          dispatchStackComponentRunsData(
+            id,
+            1,
+            itemPerPage,
+            checkValidFilter.length ? (filters as any) : [],
+            activeSorting,
+          );
+          break;
+        } else {
+          dispatchStackComponentsData(
+            1,
+            itemPerPage,
+            checkValidFilter.length ? (filters as any) : [],
+            activeSorting,
+          );
+          break;
+        }
+      case 'pipelines':
+        if (CheckIfRun) {
+          dispatchPipelineRunsData(
+            id,
+            1,
+            itemPerPage,
+            checkValidFilter.length ? (filters as any) : [],
+            activeSorting,
+          );
           break;
-      }
-      if (locationPath.pathname.split('/')[2] === 'organization') {
-        // debugger;
-        setFetchingMembers(true);
-        dispatch(
-          organizationActions.getMembers({
-            page: 1,
-            size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
-            sort_by: activeSorting,
-            onSuccess: () => setFetchingMembers(false),
-            onFailure: () => setFetchingMembers(false),
-          }),
+        } else {
+          console.log(checkValidFilter, 'checkValidFilter');
+          if (!renderAfterRow) break;
+          dispatchPipelineData(
+            1,
+            itemPerPage,
+            checkValidFilter.length ? (filters as any) : [],
+            activeSorting,
+          );
+          break;
+        }
+
+      case 'all-runs':
+        dispatchAllrunsData(
+          1,
+          itemPerPage,
+          checkValidFilter.length ? (filters as any) : [],
+          activeSorting,
         );
-      }
+        break;
+
+      default:
+        break;
+    }
+    if (locationPath.pathname.split('/')[2] === 'organization') {
+      // debugger;
+      setFetchingMembers(true);
+      dispatch(
+        organizationActions.getMembers({
+          page: 1,
+          size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
+          sort_by: activeSorting,
+          onSuccess: () => setFetchingMembers(false),
+          onFailure: () => setFetchingMembers(false),
+        }),
+      );
     }
+    // }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [checkForLocationPath, checkValidFilter, activeSorting]);