feat: Reload current asset list on nav tab click

Signed-off-by: Milouu <[email protected]>
Substra · Jun 12, 2023 · ae405ef · ae405ef
1 parent 8c90c49
commit ae405ef
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 -   Moved the API tokens management to a new page supporting multiple token per user (#198)
+-   Reload current asset list on nav tab click (#206)
 
 ## [0.41.0] - 2023-05-11
 

diff --git a/src/components/layout/header/HeaderNavigation.tsx b/src/components/layout/header/HeaderNavigation.tsx
@@ -1,6 +1,12 @@
 import styled from '@emotion/styled';
 
 import { useHrefLocation } from '@/hooks/useLocationWithParams';
+import { useOrdering } from '@/hooks/useSyncedState';
+import { PATHS } from '@/paths';
+import useComputePlansStore from '@/routes/computePlans/useComputePlansStore';
+import useDatasetsStore from '@/routes/datasets/useDatasetsStores';
+import useFunctionsStore from '@/routes/functions/useFunctionsStore';
+import useTasksStore from '@/routes/tasks/useTasksStore';
 
 const Nav = styled.nav`
     display: flex;
@@ -56,6 +62,33 @@ const HeaderNavigation = ({
 }: HeaderNavigationProps): JSX.Element => {
     const [, setHrefLocation] = useHrefLocation();
 
+    const [ordering] = useOrdering('-creation_date');
+
+    const { fetchComputePlans } = useComputePlansStore();
+    const { fetchTasks } = useTasksStore();
+    const { fetchDatasets } = useDatasetsStore();
+    const { fetchFunctions } = useFunctionsStore();
+
+    // used to reload asset list when clicking on tab that is already active
+    const reload = (href: string) => {
+        switch (href) {
+            case PATHS.COMPUTE_PLANS:
+                fetchComputePlans({ ordering });
+                break;
+            case PATHS.TASKS:
+                fetchTasks({ ordering });
+                break;
+            case PATHS.DATASETS:
+                fetchDatasets({ ordering });
+                break;
+            case PATHS.FUNCTIONS:
+                fetchFunctions({ ordering });
+                break;
+            default:
+                console.error('Reload error');
+        }
+    };
+
     /**
      * This component follows the accessibility recommendations of the W3C
      * https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html
@@ -68,7 +101,12 @@ const HeaderNavigation = ({
                         <A
                             role="menuitem"
                             active={isActive(paths)}
-                            onClick={() => setHrefLocation(href)}
+                            onClick={() => {
+                                if (href === window.location.pathname) {
+                                    reload(href);
+                                }
+                                setHrefLocation(href);
+                            }}
                         >
                             {label}
                         </A>