fixed rendering issue after polling while sorting

Author: talhainvenxion

src/ui/layouts/pipelines/Pipelines/List/useService.ts

@@ -41,7 +41,7 @@ export const useService = (
   }[],
 ): ServiceInterface => {
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
-    'createdAt',
+    null,
   );
   const [
     activeSortingDirection,
@@ -78,13 +78,16 @@ export const useService = (
   }, [filter, pipelines]);
 
   useEffect(() => {
-    const intervalId = setInterval(() => {
-      //assign interval to a variable to clear it.
+    if (activeSorting === null) {
+      const intervalId = setInterval(() => {
+        //assign interval to a variable to clear it.
 
-      dispatch(pipelinesActions.getMy({}));
-    }, 5000);
+        dispatch(pipelinesActions.getMy({}));
+      }, 5000);
 
-    return () => clearInterval(intervalId); //This is important
+      return () => clearInterval(intervalId);
+    }
+    //This is important
   });
 
   const setSelectedRunIds = (runIds: TId[]) => {

src/ui/layouts/stackComponents/Stacks/List/useService.ts

@@ -4,13 +4,17 @@ import _ from 'lodash';
 import React from 'react';
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { stackPagesActions } from '../../../../../redux/actions';
+import {
+  stackComponentsActions,
+  stackPagesActions,
+} from '../../../../../redux/actions';
 import {
   stackComponentSelectors,
   stackPagesSelectors,
   stackSelectors,
 } from '../../../../../redux/selectors';
 import { getFilteredDataForTable } from '../../../../../utils/tableFilters';
+import { useLocationPath } from '../../../../hooks';
 import { Sorting, SortingDirection } from './ForSorting/types';
 
 interface ServiceInterface {
@@ -39,14 +43,14 @@ export const useService = (
   }[],
 ): ServiceInterface => {
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
-    'createdAt',
+    null,
   );
   const [
     activeSortingDirection,
     setActiveSortingDirection,
   ] = React.useState<SortingDirection | null>('DESC');
   const dispatch = useDispatch();
-
+  const locationPath = useLocationPath();
   const [openStackIds, setOpenStackIds] = useState<TId[]>([]);
   const [filteredStacks, setFilteredStacks] = useState<TStack[]>([]);
 
@@ -71,6 +75,23 @@ export const useService = (
     setFilteredStacks(orderedStacks);
   }, [stackComponents, filter]);
 
+  useEffect(() => {
+    if (activeSorting === null) {
+      // debugger;
+      const intervalId = setInterval(() => {
+        //assign interval to a variable to clear it.
+        dispatch(
+          stackComponentsActions.getMy({
+            // id: currentWorkspace.id,
+            type: locationPath.split('/')[2],
+          }),
+        );
+      }, 5000);
+
+      return () => clearInterval(intervalId);
+    }
+  });
+
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(stackPagesActions.setSelectedRunIds({ runIds }));
   };

src/ui/layouts/stackComponents/Stacks/useService.ts

@@ -47,22 +47,6 @@ export const useService = (): ServiceInterface => {
     );
   }, [locationPath]);
 
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      //assign interval to a variable to clear it.
-      dispatch(
-        stackComponentsActions.getMy({
-          // id: currentWorkspace.id,
-          type: locationPath.split('/')[2],
-          onSuccess: () => setFetching(false),
-          onFailure: () => setFetching(false),
-        }),
-      );
-    }, 5000);
-
-    return () => clearInterval(intervalId);
-  });
-
   const setFetching = (fetching: boolean) => {
     dispatch(stackPagesActions.setFetching({ fetching }));
   };

src/ui/layouts/stacks/Stacks/List/useService.ts

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import React from 'react';
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { stackPagesActions } from '../../../../../redux/actions';
+import { stackPagesActions, stacksActions } from '../../../../../redux/actions';
 import {
   stackPagesSelectors,
   stackSelectors,
@@ -38,7 +38,7 @@ export const useService = (
   }[],
 ): ServiceInterface => {
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
-    'createdAt',
+    null,
   );
   const [
     activeSortingDirection,
@@ -68,6 +68,18 @@ export const useService = (
     setFilteredStacks(orderedStacks);
   }, [Stacks, filter]);
 
+  useEffect(() => {
+    if (activeSorting === null) {
+      const intervalId = setInterval(() => {
+        //assign interval to a variable to clear it.
+        dispatch(stacksActions.getMy({}));
+      }, 5000);
+
+      return () => clearInterval(intervalId);
+    }
+    //This is important
+  });
+
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(stackPagesActions.setSelectedRunIds({ runIds }));
   };

src/ui/layouts/stacks/Stacks/useService.ts

@@ -44,19 +44,19 @@ export const useService = (): ServiceInterface => {
     );
   }, [locationPath]);
 
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      //assign interval to a variable to clear it.
-      dispatch(
-        stacksActions.getMy({
-          onSuccess: () => setFetching(false),
-          onFailure: () => setFetching(false),
-        }),
-      );
-    }, 5000);
+  // useEffect(() => {
+  //   const intervalId = setInterval(() => {
+  //     //assign interval to a variable to clear it.
+  //     dispatch(
+  //       stacksActions.getMy({
+  //         onSuccess: () => setFetching(false),
+  //         onFailure: () => setFetching(false),
+  //       }),
+  //     );
+  //   }, 5000);
 
-    return () => clearInterval(intervalId); //This is important
-  });
+  //   return () => clearInterval(intervalId); //This is important
+  // });
 
   const setFetching = (fetching: boolean) => {
     dispatch(stackPagesActions.setFetching({ fetching }));