panels: squash the unowned panel bug

JackDotJS · Apr 14, 2024 · 2b92acf · 2b92acf
1 parent e77ba9e
commit 2b92acf
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/src/MemoryContext.tsx b/src/MemoryContext.tsx
@@ -24,13 +24,15 @@ export interface IMemory {
   [x: string]: any // TODO: **REMOVE THIS LINE WHEN PROJECT IS DONE!**
 }
 
+type PanelFunction = () => JSX.Element;
+
 export const MemoryContext = createContext<{
   masterAnalyser: AnalyserNode,
   audioContext: AudioContext,
 
-  panels: JSX.Element[],
-  addPanel(NewPanel: JSX.Element): void,
-  removePanel(OldPanel: JSX.Element): void,
+  panels: (PanelFunction)[],
+  addPanel(NewPanel: PanelFunction): void,
+  removePanel(OldPanel: PanelFunction): void,
 
   mousePosition: MousePosition
 }>();
@@ -47,19 +49,19 @@ export function MemoryProvider(props: { children: JSX.Element }) {
   const masterAnalyser = audioContext.createAnalyser();
 
   const [panelsStore, setPanelsStore] = createStore(
-    [] as JSX.Element[]
+    [] as PanelFunction[]
   );
 
   const memory = {
     audioContext,
     masterAnalyser,
 
     panels: panelsStore,
-    addPanel(NewPanel: JSX.Element) {
+    addPanel(NewPanel: PanelFunction) {
       console.log("Adding a panel...");
       return setPanelsStore([...panelsStore, NewPanel]);
     },
-    removePanel(OldPanel: JSX.Element) {
+    removePanel(OldPanel: PanelFunction) {
       console.log("Removing a panel...");
       return setPanelsStore(panelsStore.filter((panel) => panel !== OldPanel));
     },

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -17,7 +17,7 @@ export default function Header() {
       <button>Track</button>
       <button>Help</button>
       <button onClick={() => {
-        memoryContext.addPanel(<Panel />);
+        memoryContext.addPanel(() => <Panel />);
         // memoryContext.setPanels([...memoryContext.panels, <Panel />]);
         console.log(memoryContext.panels);
       }}>+ Panel</button>

diff --git a/src/components/PanelHandler.tsx b/src/components/PanelHandler.tsx
@@ -18,7 +18,7 @@ export default function PanelHandler() {
       "display": "flex"
     }}>
       <For each={panels}>
-        {(P) => P}
+        {(P) => P()}
       </For>
     </div>
   )