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

src/components/Markdowns/MarkdownEditor.js

@@ -23,7 +23,7 @@ const MarkdownEditor = () => {
     const [isRawMode, setIsRawMode] = useState(false);
     const [rawContent, setRawContent] = useState("");
     const [jsonError, setJsonError] = useState("");
-    const {data: markdown, isLoading, error} = useMarkdown(id);
+    const {data: markdown, isFetching: isMarkdownFetching, error} = useMarkdown(id);
     const saveMarkdown = useSaveMarkdown();
     const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id);
     const {data: templateSetting, isFetching: isTemplateSettingFetching} = useMarkdownTemplateSetting(setting?.template_setting_id);
@@ -31,9 +31,9 @@ const MarkdownEditor = () => {
     const updateTemplateSetting = useUpdateMarkdownTemplateSetting();
     const createTemplateSetting = useCreateMarkdownTemplateSetting();
     const updateSetting = useUpdateMarkdownSetting();
-    const {data: templates} = useMarkdownTemplates();
+    const {data: templates, isFetching: templatesAreFetching} = useMarkdownTemplates();
 
-    const notReady = isLoading || isTemplateFetching || isSettingFetching || isTemplateSettingFetching;
+    const notReady = isMarkdownFetching || isTemplateFetching || isSettingFetching || isTemplateSettingFetching || templatesAreFetching;
     useEffect(() => {
         if(markdown){
             setTitle(markdown.title);
@@ -156,9 +156,16 @@ const MarkdownEditor = () => {
     if (!hasPermission)
         return <div className="notification is-danger">Permission Denied</div>;
 
-    if(notReady)
+    if(notReady) {
+        console.log("=============");
+        console.log("isMarkdownFetching", isMarkdownFetching );
+        console.log("isTemplateFetching", isTemplateFetching );
+        console.log("isSettingFetching", isSettingFetching );
+        console.log("isTemplateSettingFetching", isTemplateSettingFetching);
+        console.log( "TemplatesAreFetching", templatesAreFetching);
+        console.log("----------------");
         return <p>Loading...</p>;
-
+    }
 
     if(error)
         return <p>{error.message || "Failed to load markdown"}</p>;

src/components/Modals/PathSettingModal.js

@@ -3,7 +3,8 @@ import {useCreatePathSetting, usePathSetting} from "../../utils/queries/path-set
 import WebhookSettingPanel from "../Settings/PathSettings/WebhookSettingPanel";
 import React, {useState} from "react";
 const PathSettingModal = ({ isOpen, path, onClose }) => {
-    const {data: pathSetting, isLoading: isPathSettingLoading} = usePathSetting(path?.setting_id || 0);
+    const settingId = path?.setting_id || 0;
+    const {data: pathSetting, isLoading: isPathSettingLoading} = usePathSetting(settingId);
     const createPathSetting = useCreatePathSetting();
     const updatePath = useUpdatePath();
 
@@ -17,7 +18,7 @@ const PathSettingModal = ({ isOpen, path, onClose }) => {
     };
 
 
-    if(isPathSettingLoading)
+    if(settingId && isPathSettingLoading)
         return (<p>Loading...</p>);
 
     return (
@@ -73,4 +74,4 @@ const PathSettingModal = ({ isOpen, path, onClose }) => {
 
 };
 
-export default PathSettingModal;
+export default PathSettingModal;

src/components/Navigations/PathNode.js

@@ -1,4 +1,6 @@
 import React, {useState} from "react";
+import { useSelector, useDispatch } from 'react-redux';
+import { toggleNodeExpansion } from '../../store/navigationSlice';
 import { Link } from "react-router-dom";
 import PermissionGuard from "../PermissionGuard";
 import "./PathNode.css";
@@ -9,10 +11,13 @@ import PathSettingModal from "../Modals/PathSettingModal";
 
 const PathNode = ({ path, isRoot = false }) => {
     const [isPathSettingModalOpen, setIsPathSettingModalOpen] = useState(false);
-    const [isExpanded, setIsExpanded] = useState(isRoot);
     const [isEditing, setIsEditing] = useState(false);
     const [newName, setNewName] = useState(path.name || "");
 
+    const expandedNodes = useSelector(state => state.navigation.expandedNodes);
+    const dispatch = useDispatch();
+    const isExpanded = isRoot || expandedNodes[path.id];
+
     const deletePath = useDeletePath();
     const updatePath = useUpdatePath();
 
@@ -23,11 +28,13 @@ const PathNode = ({ path, isRoot = false }) => {
 
 
     const expand = () => {
-        if(!isExpanded)
-            setIsExpanded(true);
+        if (!isExpanded) {
+            dispatch(toggleNodeExpansion(path.id));
+        }
     };
+
     const toggleExpand = () => {
-        setIsExpanded(!isExpanded);
+        dispatch(toggleNodeExpansion(path.id));
     };
 
     const handleSave = () => {

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>

src/components/PathManager.js

@@ -1,6 +1,6 @@
 import React, {useEffect, useState, useRef, useContext} from "react";
 import {useCreatePath, usePaths} from "../utils/queries/path-queries";
-import { useQueryClient } from "react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import "./PathManager.css";
 import {fetch_} from "../utils/request-utils";
 import {ConfigContext} from "../ConfigProvider";