more state store, less random property wiring (#724)

ui100/src/AccountPanel.tsx

@@ -1,16 +1,17 @@
 import {Node} from "@xyflow/react";
-import {Grid2, Paper, TableBody, TableContainer, Typography} from "@mui/material";
+import {Grid2, Typography} from "@mui/material";
 import AccountIcon from "@mui/icons-material/Person4";
-import {User} from "./model/user.ts";
 import PropertyTable from "./PropertyTable.tsx";
 import SecretToggle from "./SecretToggle.tsx";
+import useStore from "./model/store.ts";
 
 interface AccountPanelProps {
     account: Node;
-    user: User;
 }
 
-const AccountPanel = ({ account, user }: AccountPanelProps) => {
+const AccountPanel = ({ account}: AccountPanelProps) => {
+    const user = useStore((state) => state.user);
+
     const customProps = {
         token: row => <SecretToggle secret={row.value} />
     }

ui100/src/ApiConsole.tsx

@@ -3,9 +3,7 @@ import {Configuration, MetadataApi} from "./api";
 import {mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts";
 import {Grid2} from "@mui/material";
 import NavBar from "./NavBar.tsx";
-import {User} from "./model/user.ts";
 import Visualizer from "./Visualizer.tsx";
-import {Node} from "@xyflow/react";
 import AccountPanel from "./AccountPanel.tsx";
 import EnvironmentPanel from "./EnvironmentPanel.tsx";
 import SharePanel from "./SharePanel.tsx";
@@ -13,17 +11,18 @@ import AccessPanel from "./AccessPanel.tsx";
 import useStore from "./model/store.ts";
 
 interface ApiConsoleProps {
-    user: User;
     logout: () => void;
 }
 
-const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
+const ApiConsole = ({ logout }: ApiConsoleProps) => {
+    const user = useStore((state) => state.user);
     const overview = useStore((state) => state.overview);
     const updateOverview = useStore((state) => state.updateOverview);
     const oldVov = useRef<VisualOverview>(overview);
-    const [selectedNode, setSelectedNode] = useState(null as Node);
+    const selectedNode = useStore((state) => state.selectedNode);
-    const [sidePanel, setSidePanel] = useState(<></>);
+    const updateSelectedNode = useStore((state) => state.updateSelectedNode);
     const updateEnvironments = useStore((state) => state.updateEnvironments);
+    const [sidePanel, setSidePanel] = useState(<></>);
 
     const retrieveOverview = () => {
         let cfg = new Configuration({
@@ -90,15 +89,15 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
         if(selectedNode) {
             switch(selectedNode.type) {
                 case "account":
-                    setSidePanel(<AccountPanel account={selectedNode} user={user} />);
+                    setSidePanel(<AccountPanel account={selectedNode} />);
                     break;
 
                 case "environment":
-                    setSidePanel(<EnvironmentPanel environment={selectedNode} user={user} />);
+                    setSidePanel(<EnvironmentPanel environment={selectedNode} />);
                     break;
 
                 case "share":
-                    setSidePanel(<SharePanel share={selectedNode} user={user} />);
+                    setSidePanel(<SharePanel share={selectedNode} />);
                     break;
 
                 case "access":
@@ -115,7 +114,7 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
             <NavBar logout={logout} />
             <Grid2 container spacing={2} columns={{ xs: 4, sm: 10, md: 12 }}>
                 <Grid2 size="grow">
-                    <Visualizer vov={overview} onSelectionChanged={setSelectedNode} />
+                    <Visualizer vov={overview} onSelectionChanged={updateSelectedNode} />
                 </Grid2>
                 <Grid2 size={4}>
                     {sidePanel}

ui100/src/App.tsx

@@ -1,33 +1,35 @@
 import {BrowserRouter, Route, Routes} from "react-router";
 import ApiConsole from "./ApiConsole.tsx";
 import Login from "./Login.tsx";
-import {useEffect, useState} from "react";
+import {useEffect} from "react";
 import {User} from "./model/user.ts";
+import useStore from "./model/store.ts";
 
 const App = () => {
-    const [user, setUser] = useState(null as User);
+    const user = useStore((state) => state.user);
+    const updateUser = useStore((state) => state.updateUser);
 
     useEffect(() => {
         const checkUser = () => {
             const user = localStorage.getItem("user");
             if (user) {
-                setUser(JSON.parse(user));
+                updateUser(JSON.parse(user));
             }
         }
         checkUser();
     }, []);
 
     const login = (user: User) => {
-        setUser(user);
+        updateUser(user);
         localStorage.setItem("user", JSON.stringify(user));
     }
 
     const logout = () => {
-        setUser(null);
+        updateUser(null as User);
         localStorage.clear();
     }
 
-    const consoleRoot = user ? <ApiConsole user={user} logout={logout}/> : <Login onLogin={login}/>
+    const consoleRoot = user ? <ApiConsole logout={logout}/> : <Login onLogin={login}/>
 
     return (
         <BrowserRouter>

ui100/src/EnvironmentPanel.tsx

@@ -1,18 +1,18 @@
 import {Node} from "@xyflow/react";
 import {Grid2, Typography} from "@mui/material";
 import EnvironmentIcon from "@mui/icons-material/Computer";
-import {User} from "./model/user.ts";
 import {useEffect, useState} from "react";
 import {Configuration, Environment, MetadataApi} from "./api";
 import PropertyTable from "./PropertyTable.tsx";
 import SecretToggle from "./SecretToggle.tsx";
+import useStore from "./model/store.ts";
 
 interface EnvironmentPanelProps {
     environment: Node;
-    user: User;
 }
 
-const EnvironmentPanel = ({ environment, user }: EnvironmentPanelProps) => {
+const EnvironmentPanel = ({ environment }: EnvironmentPanelProps) => {
+    const user = useStore((state) => state.user);
     const [detail, setDetail] = useState<Environment>(null);
 
     const customProperties = {

ui100/src/SharePanel.tsx

@@ -3,16 +3,16 @@ import {Grid2, Typography} from "@mui/material";
 import ShareIcon from "@mui/icons-material/Share";
 import {Configuration, MetadataApi, Share} from "./api";
 import {useEffect, useState} from "react";
-import {User} from "./model/user.ts";
 import PropertyTable from "./PropertyTable.tsx";
 import SecretToggle from "./SecretToggle.tsx";
+import useStore from "./model/store.ts";
 
 interface SharePanelProps {
     share: Node;
-    user: User;
 }
 
-const SharePanel = ({ share, user }: SharePanelProps) => {
+const SharePanel = ({ share }: SharePanelProps) => {
+    const user = useStore((state) => state.user);
     const [detail, setDetail] = useState<Share>(null);
 
     const customProperties = {

ui100/src/model/store.ts

@@ -1,22 +1,32 @@
 import {create} from "zustand";
 import {Environment} from "../api";
 import {VisualOverview} from "./visualizer.ts";
+import {Node} from "@xyflow/react";
+import {User} from "./user.ts";
 
 type StoreState = {
-    overview: VisualOverview;
+    user: User;
     environments: Array<Environment>;
+    overview: VisualOverview;
+    selectedNode: Node;
 };
 
 type StoreAction = {
+    updateUser: (user: StoreState['user']) => void,
     updateOverview: (vov: StoreState['overview']) => void,
-    updateEnvironments: (environments: StoreState['environments']) => void
+    updateEnvironments: (environments: StoreState['environments']) => void,
+    updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void
 };
 
 const useStore = create<StoreState & StoreAction>((set) => ({
+    user: null,
     overview: new VisualOverview(),
     environments: new Array<Environment>(),
+    selectedNode: null,
+    updateUser: (user) => set({user: user}),
     updateOverview: (vov) => set({overview: vov}),
     updateEnvironments: (environments) => set({environments: environments}),
+    updateSelectedNode: (selectedNode) => set({selectedNode: selectedNode})
 }));
 
 export default useStore;