From 1bc86c359e4fa952e3bec3bd50656494ae3dee00 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Wed, 3 Jan 2024 01:04:39 -0500
Subject: [PATCH] state

---
 website/src/repl/Repl.jsx              | 17 +++++++++++++----
 website/src/repl/panel/PatternsTab.jsx |  3 +--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 404db1bd..6756ac5e 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -18,6 +18,7 @@ import {
   settingsMap,
   updateUserCode,
   useSettings,
+  useActivePattern,
 } from '../settings.mjs';
 import { Header } from './Header';
 import Loader from './Loader';
@@ -33,7 +34,7 @@ export const ReplContext = createContext(null);
 
 const { latestCode } = settingsMap.get();
 
-let modulesLoading, presets, drawContext, clearCanvas, isIframe;
+let modulesLoading, presets, drawContext, clearCanvas, isIframe, viewingPatternID;
 if (typeof window !== 'undefined') {
   initAudioOnFirstClick();
   modulesLoading = loadModules();
@@ -140,8 +141,10 @@ export function Repl({ embedded = false }) {
 
   const handleTogglePlay = async () => editorRef.current?.toggle();
 
-  // payload = {reset: boolean, code: string, evaluate: boolean}
-  const handleUpdate = async ({ reset = false, code = null, evaluate = true }) => {
+  // payload = {reset?: boolean, code?: string, evaluate?: boolean, patternID?: string }
+  const handleUpdate = async (payload) => {
+    const { reset = false, code = null, evaluate = true, patternID = null } = payload;
+    console.log(payload);
     if (reset) {
       clearCanvas();
       resetLoadedSounds();
@@ -150,9 +153,15 @@ export function Repl({ embedded = false }) {
     }
     if (code != null) {
       editorRef.current.setCode(code);
+      viewingPatternID = patternID;
     }
-    if (evaluate && isDirty) {
+    console.log(isDirty);
+    if (evaluate) {
       editorRef.current.evaluate();
+
+      if (viewingPatternID != null) {
+        setActivePattern(viewingPatternID);
+      }
     }
   };
   const handleShuffle = async () => {
diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 602c4eaa..23d00d3b 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -46,8 +46,7 @@ export function PatternsTab({ context }) {
   const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]);
   const onPatternClick = (key, data) => {
     const { code } = data;
-    setActivePattern(key);
-    context.handleUpdate({ code, evaluate: false });
+    context.handleUpdate({ patternID: key, code, evaluate: false });
   };
 
   const examplePatterns = {};