From f64db7cbba9a6bcf25c56423c7935387514dba61 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Wed, 23 Oct 2024 14:07:21 +0300
Subject: [PATCH] Persist playground model across page refresh

---
 app/playground/page.tsx      | 6 ++++++
 components/ModelSelector.tsx | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index 41ece90..9fd4181 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -17,6 +17,7 @@ import { errorMessage } from "@/lib/utils";
 import { ZombieSurvival } from "@/simulators/zombie-survival";
 
 const STORAGE_MAP_KEY = "playground-map";
+const STORAGE_MODEL_KEY = "playground-model";
 
 export default function PlaygroundPage() {
   const isAdmin = useQuery(api.users.isAdmin);
@@ -114,6 +115,7 @@ export default function PlaygroundPage() {
   function handleChangeModel(value: string) {
     setModel(value);
     setError(null);
+    window.localStorage.setItem(STORAGE_MODEL_KEY, value);
   }
 
   function handleEdit() {
@@ -172,10 +174,14 @@ export default function PlaygroundPage() {
 
   React.useEffect(() => {
     const maybeMap = window.localStorage.getItem(STORAGE_MAP_KEY);
+    const maybeModel = window.localStorage.getItem(STORAGE_MODEL_KEY);
 
     if (maybeMap !== null) {
       setMap(JSON.parse(maybeMap));
     }
+    if (maybeModel !== null) {
+      setModel(maybeModel);
+    }
   }, []);
 
   React.useEffect(() => {
diff --git a/components/ModelSelector.tsx b/components/ModelSelector.tsx
index 06b9a04..3598898 100644
--- a/components/ModelSelector.tsx
+++ b/components/ModelSelector.tsx
@@ -19,10 +19,10 @@ export function ModelSelector({
   const models = useQuery(api.models.getActiveModels);
 
   React.useEffect(() => {
-    if (models !== undefined && models.length !== 0) {
+    if (models !== undefined && models.length !== 0 && value === "") {
       onChange(models[0].slug);
     }
-  }, [models]);
+  }, [models, value]);
 
   if (models === undefined) {
     return <p>Loading...</p>;