chore: move owner out of zustand

Author: brettkolodny

src/client/App.tsx

@@ -1,37 +1,42 @@
 import { Editor } from "@/client/Editor";
 import { Preview } from "@/client/Preview";
-import { Logo } from "@/client/components/Logo";
-import {
-	ResizableHandle,
-	ResizablePanelGroup,
-} from "@/client/components/Resizable";
+import { Button } from "@/client/components/Button";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuPortal,
 	DropdownMenuTrigger,
 } from "@/client/components/DropdownMenu";
-import { type FC, useEffect, useMemo, useRef, useState } from "react";
-import { useTheme } from "@/client/contexts/theme";
-import { MoonIcon, ShareIcon, SunIcon, SunMoonIcon } from "lucide-react";
-import { Button } from "@/client/components/Button";
+import { Logo } from "@/client/components/Logo";
+import {
+	ResizableHandle,
+	ResizablePanelGroup,
+} from "@/client/components/Resizable";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
 } from "@/client/components/Tooltip";
+import { useTheme } from "@/client/contexts/theme";
+import { defaultCode } from "@/client/snippets";
+import type {
+	ParameterWithSource,
+	PreviewOutput,
+	WorkspaceOwner,
+} from "@/gen/types";
 import { rpc } from "@/utils/rpc";
-import { useLoaderData, type LoaderFunctionArgs } from "react-router";
 import {
+	type WasmLoadState,
 	getDynamicParametersOutput,
 	initWasm,
-	type WasmLoadState,
 } from "@/utils/wasm";
-import { defaultCode } from "@/client/snippets";
-import type { ParameterWithSource, PreviewOutput } from "@/gen/types";
-import { useDebouncedValue } from "./hooks/debounce";
 import isEqual from "lodash/isEqual";
+import { MoonIcon, ShareIcon, SunIcon, SunMoonIcon } from "lucide-react";
+import { type FC, useEffect, useMemo, useRef, useState } from "react";
+import { type LoaderFunctionArgs, useLoaderData } from "react-router";
+import { useDebouncedValue } from "./hooks/debounce";
+import { mockUsers } from "@/owner";
 
 /**
  * Load the shared code if present.
@@ -69,6 +74,7 @@ export const App = () => {
 	>({});
 	const [output, setOutput] = useState<PreviewOutput | null>(null);
 	const [parameters, setParameters] = useState<ParameterWithSource[]>([]);
+	const [owner, setOwner] = useState<WorkspaceOwner>(mockUsers.admin);
 
 	const onDownloadOutput = () => {
 		const blob = new Blob([JSON.stringify(output, null, 2)], {
@@ -149,7 +155,7 @@ export const App = () => {
 			return;
 		}
 
-		getDynamicParametersOutput(debouncedCode, parameterValues)
+		getDynamicParametersOutput(debouncedCode, parameterValues, owner)
 			.catch((e) => {
 				console.error(e);
 				setWasmLoadingState("error");
@@ -159,7 +165,7 @@ export const App = () => {
 			.then((output) => {
 				setOutput(output);
 			});
-	}, [debouncedCode, parameterValues, wasmLoadState]);
+	}, [debouncedCode, parameterValues, wasmLoadState, owner]);
 
 	return (
 		<main className="flex h-dvh w-screen flex-col items-center bg-surface-primary">
@@ -221,6 +227,10 @@ export const App = () => {
 					setParameterValues={setParameterValues}
 					parameters={parameters}
 					onReset={onReset}
+					setOwner={(owner) => {
+						onReset();
+						setOwner(owner);
+					}}
 				/>
 			</ResizablePanelGroup>
 		</main>

src/client/Preview.tsx

@@ -57,6 +57,7 @@ type PreviewProps = {
 	>;
 	parameters: ParameterWithSource[];
 	onReset: () => void;
+	setOwner: (owner: WorkspaceOwner) => void;
 };
 
 export const Preview: FC<PreviewProps> = ({
@@ -67,6 +68,7 @@ export const Preview: FC<PreviewProps> = ({
 	setParameterValues,
 	parameters,
 	onReset,
+	setOwner,
 }) => {
 	const $errors = useStore((state) => state.errors);
 	const [params] = useSearchParams();
@@ -236,7 +238,7 @@ export const Preview: FC<PreviewProps> = ({
 										) : null}
 									</AnimatePresence>
 								</div>
-								<UserSelect />
+								<UserSelect setOwner={setOwner} />
 							</div>
 						}
 						{parameters.length === 0 ? (
@@ -253,11 +255,7 @@ export const Preview: FC<PreviewProps> = ({
 							</div>
 						)}
 						<div className="flex w-full justify-between gap-3">
-							<Button
-								variant="outline"
-								onClick={onReset}
-								className="w-fit"
-							>
+							<Button variant="outline" onClick={onReset} className="w-fit">
 								Reset form
 							</Button>
 							<ViewOutput parameters={parameters} />
@@ -571,43 +569,42 @@ type FormElementProps = {
 		React.SetStateAction<Record<string, string>>
 	>;
 };
-const FormElement: FC<FormElementProps> = React.memo(({
-	parameter,
-	value,
-	setParameterValues,
-}) => {
-	const defaultValue =
-		parameter.default_value.value !== "??"
-			? parameter.default_value.value
-			: undefined;
-
-	const onValueChange = (value: string) => {
-		setParameterValues((curr) => {
-			return { ...curr, [parameter.name]: value };
-		});
-	};
-
-	return (
-		<DynamicParameter
-			parameter={parameter}
-			value={value ?? defaultValue}
-			autofill={false}
-			onChange={onValueChange}
-			disabled={parameter.styling.disabled}
-		/>
-	);
-});
+const FormElement: FC<FormElementProps> = React.memo(
+	({ parameter, value, setParameterValues }) => {
+		const defaultValue =
+			parameter.default_value.value !== "??"
+				? parameter.default_value.value
+				: undefined;
+
+		const onValueChange = (value: string) => {
+			setParameterValues((curr) => {
+				return { ...curr, [parameter.name]: value };
+			});
+		};
+
+		return (
+			<DynamicParameter
+				parameter={parameter}
+				value={value ?? defaultValue}
+				autofill={false}
+				onChange={onValueChange}
+				disabled={parameter.styling.disabled}
+			/>
+		);
+	},
+);
 FormElement.displayName = "FormElement";
 
-const UserSelect: FC = () => {
-	const $setWorkspaceOwner = useStore((state) => state.setWorkspaceOwner);
-
+type UserSelectProps = {
+	setOwner: (owner: WorkspaceOwner) => void;
+};
+const UserSelect: FC<UserSelectProps> = ({ setOwner }) => {
 	return (
 		<Select
 			defaultValue="admin"
 			onValueChange={(value) => {
 				const users: Record<string, WorkspaceOwner | undefined> = mockUsers;
-				$setWorkspaceOwner(users[value] ?? mockUsers.admin);
+				setOwner(users[value] ?? mockUsers.admin);
 			}}
 		>
 			<SelectTrigger className="w-fit min-w-40">

src/client/store.tsx

@@ -1,5 +1,4 @@
 import type { Diagnostic } from "@/client/diagnostics";
-import type { WorkspaceOwner } from "@/gen/types";
 import type { editor } from "monaco-editor";
 import { create } from "zustand";
 import { defaultCode } from "./snippets";
@@ -16,16 +15,13 @@ const defaultErrorsState: ErrorsState = {
 
 type State = {
 	editor: editor.IStandaloneCodeEditor | null;
-	owner: WorkspaceOwner;
 	errors: ErrorsState;
 	setError: (diagnostics: Diagnostic[]) => void;
 	toggleShowError: (open?: boolean) => void;
 	setEditor: (editor: editor.IStandaloneCodeEditor) => void;
-	setWorkspaceOwner: (owner: WorkspaceOwner) => void;
 };
 
 export const useStore = create<State>()((set) => ({
-	_force: 0,
 	code: window.CODE ?? defaultCode,
 	editor: null,
 	owner: mockUsers.admin,
@@ -48,10 +44,4 @@ export const useStore = create<State>()((set) => ({
 			};
 		}),
 	setEditor: (editor) => set(() => ({ editor })),
-	setWorkspaceOwner: (owner) =>
-		set((state) => ({
-			...state,
-			owner,
-			form: {},
-		})),
 }));