useStore -> useApiConsoleStore to avoid zustand import name collisions (#823)

ui100/src/AccessPanel.tsx

@@ -1,7 +1,7 @@
 import {Node} from "@xyflow/react";
 import {Button, Grid2, Tooltip, Typography} from "@mui/material";
 import AccessIcon from "@mui/icons-material/Lan";
-import useStore from "./model/store.ts";
+import useApiConsoleStore from "./model/store.ts";
 import {useEffect, useState} from "react";
 import {Configuration, Frontend, MetadataApi, ShareApi} from "./api";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -13,7 +13,7 @@ interface AccessPanelProps {
 }
 
 const AccessPanel = ({ access }: AccessPanelProps) => {
-    const user = useStore((state) => state.user);
+    const user = useApiConsoleStore((state) => state.user);
     const [detail, setDetail] = useState<Frontend>(null);
     const [releaseAccessOpen, setReleaseAccessOpen] = useState(false);
 

ui100/src/AccountNode.tsx

@@ -1,13 +1,13 @@
 import {Handle, Position} from "@xyflow/react";
 import {Grid2} from "@mui/material";
 import AccountIcon from "@mui/icons-material/Person4";
-import useStore from "./model/store.ts";
+import useApiConsoleStore from "./model/store.ts";
 import {SparkLineChart} from "@mui/x-charts";
 import {useEffect, useState} from "react";
 
 
 const AccountNode = ({ data }) => {
-    const environments = useStore((state) => state.environments);
+    const environments = useApiConsoleStore((state) => state.environments);
     const [sparkData, setSparkData] = useState<number[]>(Array<number>(31).fill(0));
     const hiddenSparkline = <></>;
     const visibleSparkline = (

ui100/src/AccountPanel.tsx

@@ -3,7 +3,7 @@ import {Button, Grid2, Tooltip, Typography} from "@mui/material";
 import AccountIcon from "@mui/icons-material/Person4";
 import PropertyTable from "./PropertyTable.tsx";
 import SecretToggle from "./SecretToggle.tsx";
-import useStore from "./model/store.ts";
+import useApiConsoleStore from "./model/store.ts";
 import PasswordIcon from "@mui/icons-material/Password";
 import TokenIcon from "@mui/icons-material/Key";
 
@@ -12,7 +12,7 @@ interface AccountPanelProps {
 }
 
 const AccountPanel = ({ account }: AccountPanelProps) => {
-    const user = useStore((state) => state.user);
+    const user = useApiConsoleStore((state) => state.user);
 
     const customProps = {
         token: row => <SecretToggle secret={row.value} />

ui100/src/ApiConsole.tsx

@@ -8,7 +8,7 @@ import AccountPanel from "./AccountPanel.tsx";
 import EnvironmentPanel from "./EnvironmentPanel.tsx";
 import SharePanel from "./SharePanel.tsx";
 import AccessPanel from "./AccessPanel.tsx";
-import useStore from "./model/store.ts";
+import useApiConsoleStore from "./model/store.ts";
 import TabularView from "./TabularView.tsx";
 import {Node} from "@xyflow/react";
 
@@ -17,20 +17,20 @@ interface ApiConsoleProps {
 }
 
 const ApiConsole = ({ logout }: ApiConsoleProps) => {
-    const user = useStore((state) => state.user);
+    const user = useApiConsoleStore((state) => state.user);
-    const graph = useStore((state) => state.graph);
+    const graph = useApiConsoleStore((state) => state.graph);
-    const updateGraph = useStore((state) => state.updateGraph);
+    const updateGraph = useApiConsoleStore((state) => state.updateGraph);
     const oldGraph = useRef<Graph>(graph);
-    const sparkdata = useStore((state) => state.sparkdata);
+    const sparkdata = useApiConsoleStore((state) => state.sparkdata);
     const sparkdataRef = useRef<Map<string, Number[]>>();
     sparkdataRef.current = sparkdata;
-    const updateSparkdata = useStore((state) => state.updateSparkdata);
+    const updateSparkdata = useApiConsoleStore((state) => state.updateSparkdata);
-    const nodes = useStore((state) => state.nodes);
+    const nodes = useApiConsoleStore((state) => state.nodes);
     const nodesRef = useRef<Node[]>();
     nodesRef.current = nodes;
-    const updateNodes = useStore((state) => state.updateNodes);
+    const updateNodes = useApiConsoleStore((state) => state.updateNodes);
-    const updateEdges = useStore((state) => state.updateEdges);
+    const updateEdges = useApiConsoleStore((state) => state.updateEdges);
-    const selectedNode = useStore((state) => state.selectedNode);
+    const selectedNode = useApiConsoleStore((state) => state.selectedNode);
     const [mainPanel, setMainPanel] = useState(<Visualizer />);
     const [sidePanel, setSidePanel] = useState<JSX>(null);
     const [visualizerEnabled, setVisualizerEnabled] = useState<boolean>(true);

ui100/src/App.tsx

@@ -3,11 +3,11 @@ import ApiConsole from "./ApiConsole.tsx";
 import Login from "./Login.tsx";
 import {useEffect} from "react";
 import {User} from "./model/user.ts";
-import useStore from "./model/store.ts";
+import useApiConsoleStore from "./model/store.ts";
 
 const App = () => {
-    const user = useStore((state) => state.user);
+    const user = useApiConsoleStore((state) => state.user);
-    const updateUser = useStore((state) => state.updateUser);
+    const updateUser = useApiConsoleStore((state) => state.updateUser);
 
     useEffect(() => {
         const checkUser = () => {

ui100/src/EnvironmentNode.tsx

@@ -2,10 +2,10 @@ import {Handle, Position} from "@xyflow/react";
 import {Grid2} from "@mui/material";
 import EnvironmentIcon from "@mui/icons-material/Computer";
 import {SparkLineChart} from "@mui/x-charts";
-import useStore from "./model/store.ts";
+import useApiConsoleStore from "./model/store.ts";
 
 const EnvironmentNode = ({ data }) => {
-    const sparkdata = useStore((state) => state.sparkdata);
+    const sparkdata = useApiConsoleStore((state) => state.sparkdata);
 
     const hiddenSparkline = <></>;
     const visibleSparkline = (

ui100/src/EnvironmentPanel.tsx

@@ -5,7 +5,7 @@ import {useEffect, useState} from "react";
 import {Configuration, Environment, EnvironmentApi, MetadataApi} from "./api";
 import PropertyTable from "./PropertyTable.tsx";
 import SecretToggle from "./SecretToggle.tsx";
-import useStore from "./model/store.ts";
+import useApiConsoleStore from "./model/store.ts";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ReleaseEnvironmentModal from "./ReleaseEnvironmentModal.tsx";
 
@@ -14,7 +14,7 @@ interface EnvironmentPanelProps {
 }
 
 const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
-    const user = useStore((state) => state.user);
+    const user = useApiConsoleStore((state) => state.user);
     const [detail, setDetail] = useState<Environment>(null);
     const [releaseEnvironmentOpen, setReleaseEnvironmentOpen] = useState(false);
 

ui100/src/ShareNode.tsx

@@ -1,11 +1,11 @@
 import {Handle, Position, useUpdateNodeInternals} from "@xyflow/react";
 import {Grid2} from "@mui/material";
 import ShareIcon from "@mui/icons-material/Share";
-import useStore from "./model/store.ts";
+import useApiConsoleStore from "./model/store.ts";
 import {SparkLineChart} from "@mui/x-charts";
 
 const ShareNode = ({ data }) => {
-    const sparkdata = useStore((state) => state.sparkdata);
+    const sparkdata = useApiConsoleStore((state) => state.sparkdata);
     const updateNodeInternals = useUpdateNodeInternals();
 
     let shareHandle = <></>;

ui100/src/SharePanel.tsx

@@ -4,7 +4,7 @@ import ShareIcon from "@mui/icons-material/Share";
 import {Configuration, MetadataApi, Share} from "./api";
 import {useEffect, useState} from "react";
 import PropertyTable from "./PropertyTable.tsx";
-import useStore from "./model/store.ts";
+import useApiConsoleStore from "./model/store.ts";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ReleaseShareModal from "./ReleaseShareModal.tsx";
 
@@ -13,7 +13,7 @@ interface SharePanelProps {
 }
 
 const SharePanel = ({ share }: SharePanelProps) => {
-    const user = useStore((state) => state.user);
+    const user = useApiConsoleStore((state) => state.user);
     const [detail, setDetail] = useState<Share>(null);
     const [releaseShareOpen, setReleaseShareOpen] = useState(false);
 

ui100/src/TabularView.tsx

@@ -1,5 +1,5 @@
 import {Box, Paper} from "@mui/material";
-import useStore from "./model/store.ts";
+import useApiConsoleStore from "./model/store.ts";
 import {
     MaterialReactTable,
     type MRT_ColumnDef,
@@ -13,17 +13,17 @@ import {Node} from "@xyflow/react";
 import {bytesToSize} from "./model/util.ts";
 
 const TabularView = () => {
-    const nodes = useStore((state) => state.nodes);
+    const nodes = useApiConsoleStore((state) => state.nodes);
     const nodesRef = useRef<Node[]>();
     nodesRef.current = nodes;
-    const updateNodes = useStore((state) => state.updateNodes);
+    const updateNodes = useApiConsoleStore((state) => state.updateNodes);
-    const selectedNode = useStore((state) => state.selectedNode);
+    const selectedNode = useApiConsoleStore((state) => state.selectedNode);
-    const updateSelectedNode = useStore((state) => state.updateSelectedNode);
+    const updateSelectedNode = useApiConsoleStore((state) => state.updateSelectedNode);
-    const sparkdata = useStore((state) => state.sparkdata);
+    const sparkdata = useApiConsoleStore((state) => state.sparkdata);
-    const storedPagination = useStore((state) => state.pagination);
+    const storedPagination = useApiConsoleStore((state) => state.pagination);
-    const updatePagination = useStore((state) => state.updatePagination);
+    const updatePagination = useApiConsoleStore((state) => state.updatePagination);
-    const storedSorting = useStore((state) => state.sorting);
+    const storedSorting = useApiConsoleStore((state) => state.sorting);
-    const updateSorting = useStore((state) => state.updateSorting);
+    const updateSorting = useApiConsoleStore((state) => state.updateSorting);
     const [pagination, setPagination] = useState<MRT_PaginationState>({} as MRT_PaginationState);
     const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
     const [sorting, setSorting] = useState<MRT_SortingState>([{id: "data.label", desc: false}] as MRT_SortingState);

ui100/src/Visualizer.tsx

@@ -16,7 +16,7 @@ import EnvironmentNode from "./EnvironmentNode.tsx";
 import AccountNode from "./AccountNode.tsx";
 import AccessNode from "./AccessNode.tsx";
 import {Box} from "@mui/material";
-import useStore from "./model/store.ts";
+import useApiConsoleStore from "./model/store.ts";
 import AccessEdge from "./AccessEdge.tsx";
 
 const edgeTypes = {
@@ -31,12 +31,12 @@ const nodeTypes = {
 };
 
 const Visualizer = () => {
-    const updateSelectedNode = useStore((state) => state.updateSelectedNode);
+    const updateSelectedNode = useApiConsoleStore((state) => state.updateSelectedNode);
-    const viewport = useStore((state) => state.viewport);
+    const viewport = useApiConsoleStore((state) => state.viewport);
-    const updateViewport = useStore((state) => state.updateViewport);
+    const updateViewport = useApiConsoleStore((state) => state.updateViewport);
-    const nodes = useStore((state) => state.nodes);
+    const nodes = useApiConsoleStore((state) => state.nodes);
-    const updateNodes = useStore((state) => state.updateNodes);
+    const updateNodes = useApiConsoleStore((state) => state.updateNodes);
-    const edges = useStore((state) => state.edges);
+    const edges = useApiConsoleStore((state) => state.edges);
 
     const onNodesChange = (changes) => {
         updateNodes(applyNodeChanges(changes, nodes));

ui100/src/model/store.ts

@@ -31,7 +31,7 @@ type StoreAction = {
     updateSorting: (sorting: StoreState['sorting']) => void,
  };
 
-const useStore = create<StoreState & StoreAction>((set) => ({
+const useApiConsoleStore = create<StoreState & StoreAction>((set) => ({
     user: null,
     graph: new Graph(),
     environments: new Array<Environment>(),
@@ -54,4 +54,4 @@ const useStore = create<StoreState & StoreAction>((set) => ({
     updateSorting: (sorting) => set({sorting: sorting})
 }));
 
-export default useStore;
+export default useApiConsoleStore;