improve: upgrade node to 20, upgrade react-query to v4

src/components/Navigations/SideNavigation.js

@@ -1,4 +1,6 @@
 import React, { useContext, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { setSelectedTab } from '../../store/navigationSlice';
 import "./SideNavigation.css";
 import TreeTab from "./SideTabs/TreeTab";
 import TemplateTab from "./SideTabs/TemplateTab";
@@ -6,7 +8,8 @@ import { AuthContext } from "../../AuthProvider";
 
 const SideNavigation = () => {
     const { roles } = useContext(AuthContext);
-    const [selectedTab, setSelectedTab] = React.useState("tree");
+    const selectedTab = useSelector(state => state.navigation.selectedTab);
+    const dispatch = useDispatch();
 
     const allTabs = [
         { id: "tree", label: "Tree", component: <TreeTab /> },
@@ -19,9 +22,9 @@ const SideNavigation = () => {
 
     useEffect(() => {
         if (!visibleTabs.find(tab => tab.id === selectedTab)) {
-            setSelectedTab(visibleTabs[0]?.id || "");
+            dispatch(setSelectedTab(visibleTabs[0]?.id || ""));
         }
-    }, [visibleTabs, selectedTab]);
+    }, [visibleTabs, selectedTab, dispatch]);
 
 
     const current = visibleTabs.find(t => t.id === selectedTab);
@@ -35,7 +38,7 @@ const SideNavigation = () => {
                             key={tab.id}
                             className={tab.id === selectedTab ? "is-active" : ""}
                         >
-                            <a onClick={() => setSelectedTab(tab.id)}>
+                            <a onClick={() => dispatch(setSelectedTab(tab.id))}>
                                 {tab.label}
                             </a>
                         </li>