fix: data not updating

package.json

@@ -43,7 +43,7 @@
     "svg-icon": "^0.8.2",
     "terminate": "^2.6.1",
     "ts-node": "^10.9.1",
-    "typescript": "*"
+    "typescript": "^5.4.5"
   },
   "dependencies": {
     "@create-figma-plugin/ui": "2.1.5",

src/main/endpoints/highlightNode.ts

@@ -1,5 +1,10 @@
 import { createEndpoint } from "../utils/createEndpoint";
 
+const HIGHLIGHT_COLOR: SolidPaint = {
+  type: "SOLID",
+  color: { r: 1, g: 0.41, b: 0.58 },
+};
+
 export type HighlightNodeProps = {
   id: string;
 };
@@ -16,13 +21,9 @@ export const highlightNodeEndpoint = createEndpoint(
     }
 
     if (node && !highlitedNodes.has(id)) {
-      const paint: SolidPaint = {
-        type: "SOLID",
-        color: { r: 1, g: 0, b: 0 },
-      };
       highlitedNodes.set(id, node.fills);
       const original = node.fills;
-      node.fills = [paint];
+      node.fills = [HIGHLIGHT_COLOR];
 
       setTimeout(() => {
         node.fills = original;

src/ui/views/Index/Index.tsx

@@ -28,6 +28,15 @@ export const Index = () => {
   const selectionLoadable = useSelectedNodes();
   const selection = selectionLoadable.data?.items || [];
 
+  // index page is not removed on certain routes
+  // refetch when we go back to it
+  const route = useGlobalState((c) => c.route);
+  useEffect(() => {
+    if (route[0] === "index") {
+      selectionLoadable.refetch();
+    }
+  }, [route]);
+
   const [error, setError] = useState<string>();
 
   const languagesLoadable = useApiQuery({

src/ui/views/Index/ListItem.tsx

@@ -1,5 +1,5 @@
 import { h } from "preact";
-import { useMemo, useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import { NodeInfo } from "@/types";
 import { NodeRow } from "@/ui/components/NodeList/NodeRow";
 import { KeyInput } from "./KeyInput";
@@ -20,7 +20,8 @@ type Props = {
 
 export const ListItem = ({ node, loadedNamespaces }: Props) => {
   const [keyName, setKeyName] = useState(node.key);
-  const [namespace, setNamespace] = useState(node.ns);
+  const defaultNamespace = useGlobalState((c) => c.config?.namespace);
+  const [namespace, setNamespace] = useState(node.ns ?? defaultNamespace);
 
   const setNodesDataMutation = useSetNodesDataMutation();
 
@@ -29,7 +30,6 @@ export const ListItem = ({ node, loadedNamespaces }: Props) => {
   const namespacesDisabled = useGlobalState(
     (c) => c.config?.namespacesDisabled
   );
-  const defaultNamespace = useGlobalState((c) => c.config?.namespace);
 
   const handleConnect = (node: NodeInfo) => {
     setRoute("connect", { node });
@@ -53,6 +53,14 @@ export const ListItem = ({ node, loadedNamespaces }: Props) => {
     });
   };
 
+  useEffect(() => {
+    if (keyName && namespace !== node.ns) {
+      setNodesDataMutation.mutate({
+        nodes: [{ ...node, key: keyName, ns: namespace }],
+      });
+    }
+  }, [namespace]);
+
   const handleNsChange = (node: NodeInfo) => (value: string) => {
     setNamespace(value);
     setNodesDataMutation.mutate({
@@ -73,7 +81,7 @@ export const ListItem = ({ node, loadedNamespaces }: Props) => {
         !namespacesDisabled && (
           <div className={styles.nsSelect}>
             <NamespaceSelect
-              value={namespace ?? defaultNamespace ?? ""}
+              value={namespace ?? ""}
               namespaces={namespaces}
               onChange={handleNsChange(node)}
             />

src/ui/views/Router.tsx

@@ -15,21 +15,9 @@ import { Dialog } from "../components/Dialog/Dialog";
 
 const getDialogPage = ([routeKey, routeData]: Route) => {
   switch (routeKey) {
-    case "settings":
-      return <Settings />;
-
-    case "push":
-      return <Push />;
-
-    case "pull":
-      return <Pull {...routeData} />;
-
     case "connect":
       return <Connect {...routeData} />;
 
-    case "create_copy":
-      return <CreateCopy />;
-
     default:
       return null;
   }
@@ -41,8 +29,15 @@ type PageProps = {
 };
 
 const Page = ({ route: [routeKey, routeData], setRoute }: PageProps) => {
-  if (routeKey === "settings") {
-    return <Settings />;
+  switch (routeKey) {
+    case "settings":
+      return <Settings />;
+    case "push":
+      return <Push />;
+    case "pull":
+      return <Pull {...routeData} />;
+    case "create_copy":
+      return <CreateCopy />;
   }
 
   const dialogPage = getDialogPage([routeKey, routeData] as Route);