Merge pull request #25 from coder/brett/improve-rendering

fix: force re-mount component only when owner changes or reset

Author: brettkolodny

src/client/Preview.tsx

@@ -55,6 +55,7 @@ import {
 	SelectValue,
 } from "@/client/components/Select";
 import { mockUsers } from "@/owner";
+import { checkerModule } from "./snippets";
 
 export const Preview: FC = () => {
 	const $wasmState = useStore((state) => state.wasmState);
@@ -107,6 +108,7 @@ export const Preview: FC = () => {
 				const rawOutput = await window.go_preview?.(
 					{
 						"main.tf": debouncedCode,
+						"checker/main.tf": checkerModule,
 					},
 					$owner,
 					$form,
@@ -529,24 +531,28 @@ const Log: FC<LogProps> = ({ log }) => {
 type FormProps = { parameters: ParameterWithSource[] };
 
 const Form: FC<FormProps> = ({ parameters }) => {
-	return parameters
-		.sort((a, b) => a.order - b.order)
-		// Since the form is sourced from constantly changing terraform, we are not sure
-		// if the parameters are the "same" as the previous render.
-		.map((p) => <FormElement key={window.crypto.randomUUID()} parameter={p} />);
+	const $force = useStore((state) => state._force);
+
+	const getParameterHash = (p: ParameterWithSource) =>
+		`${$force}:${p.name}:${p.form_type}`;
+
+	return (
+		parameters
+			.sort((a, b) => a.order - b.order)
+			// Since the form is sourced from constantly changing terraform, we are not sure
+			// if the parameters are the "same" as the previous render.
+			.map((p) => <FormElement key={getParameterHash(p)} parameter={p} />)
+	);
 };
 
 type FormElementProps = { parameter: ParameterWithSource };
 const FormElement: FC<FormElementProps> = ({ parameter }) => {
 	const $form = useStore((state) => state.form);
 	const $setForm = useStore((state) => state.setFormState);
 
-	const value = useMemo(
-		() =>
-			$form[parameter.name] ??
-			undefined,
-		[$form, parameter],
-	);
+	const value = useMemo(() => {
+		return $form[parameter.name];
+	}, [$form, parameter.name]);
 
 	const onValueChange = (value: string) => {
 		$setForm(parameter.name, value);

src/client/snippets.ts

@@ -11,7 +11,7 @@ export const textInput = `data "coder_parameter" "project-name" {
   display_name = "An input"
   name         = "an-input"
   description  = "What is the name of your project?"
-  order        = 1
+  order        = 4
 
   form_type = "input"
   type      = "string"
@@ -94,3 +94,38 @@ export const switchInput = `data "coder_parameter" "switch" {
   defalt       = true
   order        = 1
 }`
+
+export const checkerModule = `
+variable "solutions" {
+  type = map(list(string))
+}
+variable "guess" {
+  type = list(string)
+}
+locals {
+# [for connection, solution in local.solutions : connection if (length(setintersection(solution, jsondecode(data.coder_parameter.rows["yellow"].value))) == 4)]
+  diff = [for connection, solution in var.solutions : {
+    connection = connection
+    distance = 4 - length(setintersection(solution, var.guess))
+  }]
+  solved = [for diff in local.diff : diff.connection if diff.distance == 0]
+  one_away = [for diff in local.diff : diff.connection if diff.distance == 1]
+  description = length(local.one_away) == 1 && length(var.guess) == 4 ? "One away..." : (
+      length(local.solved) == 1 ? "Solved!" : (
+      "Select 4 words that share a common connection."
+    )
+  )
+}
+output "out" {
+  value = local.one_away
+}
+output "title" {
+  value = length(local.solved) == 1 ? "\${local.solved[0]}" : "??"
+}
+output "description" {
+  value = local.description
+}
+output "solved" {
+  value = length(local.solved) == 1 ? true : false
+}
+`;

src/client/store.tsx

@@ -5,7 +5,7 @@ import { create } from "zustand";
 import { defaultCode } from "./snippets";
 import { mockUsers } from "@/owner";
 
-type FormState = Record<string, string>;
+export type FormState = Record<string, string>;
 
 type WasmState = "loaded" | "loading" | "error";
 
@@ -19,6 +19,7 @@ const defaultErrorsState: ErrorsState = {
 };
 
 type State = {
+	_force: number;
 	code: string;
 	editor: editor.IStandaloneCodeEditor | null;
 	parameters: ParameterWithSource[];
@@ -38,6 +39,7 @@ type State = {
 };
 
 export const useStore = create<State>()((set) => ({
+	_force: 0,
 	code: window.CODE ?? defaultCode,
 	editor: null,
 	parameters: [],
@@ -72,7 +74,18 @@ export const useStore = create<State>()((set) => ({
 
 			return { form };
 		}),
-	resetForm: () => set(() => ({ form: {} })),
+	resetForm: () =>
+		set((state) => ({
+			form: {},
+			_force: state._force + 1,
+		})),
 	setEditor: (editor) => set(() => ({ editor })),
-	setWorkspaceOwner: (owner) => set(() => ({ owner })),
+	setWorkspaceOwner: (owner) =>
+		set((state) => ({
+			...state,
+			owner,
+			_force: state._force + 1,
+			form: {},
+			parameters: [...state.parameters],
+		})),
 }));