fixed sorting for created at and paginagtion issue for stack and components

Author: talhainvenxion

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

@@ -10,6 +10,7 @@ export const CollapseTable: React.FC<TableProps & CollapseTableProps> = ({
   headerCols,
   tableRows,
   activeSorting,
+  activeSortingDirection,
   showHeader = true,
   pagination = true,
   loading = false,
@@ -22,6 +23,7 @@ export const CollapseTable: React.FC<TableProps & CollapseTableProps> = ({
   // console.log('activeSorting', activeSorting);
   return (
     <Table
+      activeSortingDirection={activeSortingDirection}
       activeSorting={activeSorting}
       headerCols={headerCols}
       tableRows={tableRows}

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

@@ -131,7 +131,7 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
           dispatchStackRunsData(id, page, size, filters as any, activeSorting);
           break;
         } else {
-          dispatchStackData(1, size, filters as any, activeSorting);
+          dispatchStackData(page, size, filters as any, activeSorting);
           break;
         }
       case 'components':
@@ -145,7 +145,12 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
           );
           break;
         } else {
-          dispatchStackComponentsData(1, size, filters as any, activeSorting);
+          dispatchStackComponentsData(
+            page,
+            size,
+            filters as any,
+            activeSorting,
+          );
           break;
         }
       case 'pipelines':

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

@@ -40,6 +40,7 @@ export interface HeaderCol {
 export interface TableProps {
   headerCols: HeaderCol[];
   tableRows: any[];
+  activeSortingDirection?: any;
   activeSorting?: any;
   paginated?: any;
   filters?: any[];
@@ -58,6 +59,7 @@ export const Table: React.FC<TableProps> = ({
   tableRows,
   paginated,
   activeSorting,
+  activeSortingDirection,
   filters,
   showHeader = true,
   pagination = true,
@@ -183,7 +185,7 @@ export const Table: React.FC<TableProps> = ({
     componentName === 'components'
       ? locationPath.pathname.split('/')[5]
       : locationPath.pathname.split('/')[4];
-  // console.log(check, '333');
+  const checkForLocationPath = locationPath.pathname.split('/')[4];
   useEffect(() => {
     // console.log(locationPath.pathname.split('/')[4], 'locationPath1');
     setItemPerPage(itemPerPage);
@@ -263,7 +265,12 @@ export const Table: React.FC<TableProps> = ({
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [locationPath.pathname.split('/')[4], isValidFilter, activeSorting]);
+  }, [
+    checkForLocationPath,
+    isValidFilter,
+    activeSorting,
+    activeSortingDirection,
+  ]);
   let rowsToDisplay = tableRows;
   // function getFetchedState(state: any) {
   //   setFetchingMembers(state);

src/ui/layouts/pipelines/Pipelines/List/index.tsx

@@ -65,11 +65,13 @@ export const List: React.FC<Props> = ({ filter }: Props) => {
             nestedRow={true}
           />
         )}
-        activeSorting={
-          activeSorting !== 'created' && activeSortingDirection !== 'ASC'
-            ? activeSorting
-            : 'created'
-        }
+        activeSortingDirection={activeSortingDirection}
+        activeSorting={activeSorting}
+        // activeSorting={
+        //   activeSorting !== 'created' && activeSortingDirection !== 'ASC'
+        //     ? activeSorting
+        //     : 'created'
+        // }
         paginated={pipelinesPaginated}
         loading={fetching}
         showHeader={true}

src/ui/layouts/pipelines/RunsTable/index.tsx

@@ -77,11 +77,13 @@ export const RunsTable: React.FC<{
 
   return (
     <Table
-      activeSorting={
-        activeSorting !== 'created' && activeSortingDirection !== 'ASC'
-          ? activeSorting
-          : 'created'
-      }
+      activeSortingDirection={activeSortingDirection}
+      activeSorting={activeSorting}
+      // activeSorting={
+      //   activeSorting !== 'created' && activeSortingDirection !== 'ASC'
+      //     ? activeSorting
+      //     : 'created'
+      // }
       pagination={pagination}
       loading={fetching}
       paginated={paginated}

src/ui/layouts/settings/Organization/index.tsx

@@ -102,7 +102,9 @@ export const Organization: React.FC = () => {
           </FlexBox.Row>
           {currentTable === 'members' && (
             <Table
+              activeSortingDirection={activeSortingDirection}
               activeSorting={activeSorting}
+              // activeSorting={activeSorting}
               paginated={membersPaginated}
               pagination={true}
               headerCols={memberHeaderCols}

src/ui/layouts/stackComponents/RunsTable/index.tsx

@@ -66,11 +66,13 @@ export const RunsTable: React.FC<{
   }, [getSorted]);
   return (
     <Table
-      activeSorting={
-        activeSorting !== 'created' && activeSortingDirection !== 'ASC'
-          ? activeSorting
-          : 'created'
-      }
+      activeSortingDirection={activeSortingDirection}
+      activeSorting={activeSorting}
+      // activeSorting={
+      //   activeSorting !== 'created' && activeSortingDirection !== 'ASC'
+      //     ? activeSorting
+      //     : 'created'
+      // }
       pagination={pagination}
       loading={fetching}
       showHeader={true}

src/ui/layouts/stackComponents/Stacks/List/index.tsx

@@ -96,11 +96,13 @@ Props) => {
             fetching={fetching}
           />
         )}
-        activeSorting={
-          activeSorting !== 'created' && activeSortingDirection !== 'ASC'
-            ? activeSorting
-            : 'created'
-        }
+        activeSortingDirection={activeSortingDirection}
+        activeSorting={activeSorting}
+        // activeSorting={
+        //   activeSorting !== 'created' && activeSortingDirection !== 'ASC'
+        //     ? activeSorting
+        //     : 'created'
+        // }
         pagination={pagination}
         paginated={stackComponentsPaginated}
         loading={expendedRow.length > 0 ? false : fetching}

src/ui/layouts/stacks/RunsTable/index.tsx

@@ -66,11 +66,13 @@ export const RunsTable: React.FC<{
   }, [getSorted]);
   return (
     <Table
-      activeSorting={
-        activeSorting !== 'created' && activeSortingDirection !== 'ASC'
-          ? activeSorting
-          : 'created'
-      }
+      activeSortingDirection={activeSortingDirection}
+      activeSorting={activeSorting}
+      // activeSorting={
+      //   activeSorting !== 'created' && activeSortingDirection !== 'ASC'
+      //     ? activeSorting
+      //     : 'created'
+      // }
       pagination={pagination}
       loading={fetching}
       filters={filter}

src/ui/layouts/stacks/Stacks/List/index.tsx

@@ -62,11 +62,13 @@ export const List: React.FC<Props> = ({ filter }: Props) => {
             />
           </>
         )}
-        activeSorting={
-          activeSorting !== 'created' && activeSortingDirection !== 'ASC'
-            ? activeSorting
-            : 'created'
-        }
+        activeSortingDirection={activeSortingDirection}
+        activeSorting={activeSorting}
+        // activeSorting={
+        //   activeSorting !== 'created' && activeSortingDirection !== 'ASC'
+        //     ? activeSorting
+        //     : 'created'
+        // }
         paginated={stacksPaginated}
         loading={fetching}
         showHeader={true}