extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-26 20:52:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michael Quigley 2025-01-24 11:24:54 -05:00
parent 7df7141ac8
commit e986c90185
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
12 changed files with 46 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui100/src/AccessPanel.tsx
View File

@ -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);

4
ui100/src/AccountNode.tsx
View File

@ -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 = (

4
ui100/src/AccountPanel.tsx
View File

@ -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} />

20
ui100/src/ApiConsole.tsx
View File

@ -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 graph = useStore((state) => state.graph);
const updateGraph = useStore((state) => state.updateGraph);
const user = useApiConsoleStore((state) => state.user);
const graph = useApiConsoleStore((state) => state.graph);
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 nodes = useStore((state) => state.nodes);
const updateSparkdata = useApiConsoleStore((state) => state.updateSparkdata);
const nodes = useApiConsoleStore((state) => state.nodes);
const nodesRef = useRef<Node[]>();
nodesRef.current = nodes;
const updateNodes = useStore((state) => state.updateNodes);
const updateEdges = useStore((state) => state.updateEdges);
const selectedNode = useStore((state) => state.selectedNode);
const updateNodes = useApiConsoleStore((state) => state.updateNodes);
const updateEdges = useApiConsoleStore((state) => state.updateEdges);
const selectedNode = useApiConsoleStore((state) => state.selectedNode);
const [mainPanel, setMainPanel] = useState(<Visualizer />);
const [sidePanel, setSidePanel] = useState<JSX>(null);
const [visualizerEnabled, setVisualizerEnabled] = useState<boolean>(true);

6
ui100/src/App.tsx
View File

@ -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 updateUser = useStore((state) => state.updateUser);
const user = useApiConsoleStore((state) => state.user);
const updateUser = useApiConsoleStore((state) => state.updateUser);
useEffect(() => {
const checkUser = () => {

4
ui100/src/EnvironmentNode.tsx
View File

@ -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 = (

4
ui100/src/EnvironmentPanel.tsx
View File

@ -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);

4
ui100/src/ShareNode.tsx
View File

@ -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 = <></>;

4
ui100/src/SharePanel.tsx
View File

@ -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);

20
ui100/src/TabularView.tsx
View File

@ -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 selectedNode = useStore((state) => state.selectedNode);
const updateSelectedNode = useStore((state) => state.updateSelectedNode);
const sparkdata = useStore((state) => state.sparkdata);
const storedPagination = useStore((state) => state.pagination);
const updatePagination = useStore((state) => state.updatePagination);
const storedSorting = useStore((state) => state.sorting);
const updateSorting = useStore((state) => state.updateSorting);
const updateNodes = useApiConsoleStore((state) => state.updateNodes);
const selectedNode = useApiConsoleStore((state) => state.selectedNode);
const updateSelectedNode = useApiConsoleStore((state) => state.updateSelectedNode);
const sparkdata = useApiConsoleStore((state) => state.sparkdata);
const storedPagination = useApiConsoleStore((state) => state.pagination);
const updatePagination = useApiConsoleStore((state) => state.updatePagination);
const storedSorting = useApiConsoleStore((state) => state.sorting);
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);

14
ui100/src/Visualizer.tsx
View File

@ -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 viewport = useStore((state) => state.viewport);
const updateViewport = useStore((state) => state.updateViewport);
const nodes = useStore((state) => state.nodes);
const updateNodes = useStore((state) => state.updateNodes);
const edges = useStore((state) => state.edges);
const updateSelectedNode = useApiConsoleStore((state) => state.updateSelectedNode);
const viewport = useApiConsoleStore((state) => state.viewport);
const updateViewport = useApiConsoleStore((state) => state.updateViewport);
const nodes = useApiConsoleStore((state) => state.nodes);
const updateNodes = useApiConsoleStore((state) => state.updateNodes);
const edges = useApiConsoleStore((state) => state.edges);
const onNodesChange = (changes) => {
updateNodes(applyNodeChanges(changes, nodes));

4
ui100/src/model/store.ts
View File

@ -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;