From d158d06ccec73c9cff052434474baad1addfa746 Mon Sep 17 00:00:00 2001
From: Maximilian <max@klandest.in>
Date: Tue, 6 Apr 2021 01:06:28 +0200
Subject: [PATCH] add generation, change key->identifier

---
 moodconsole/src/App.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/moodconsole/src/App.tsx b/moodconsole/src/App.tsx
index 442cb10..96876ec 100644
--- a/moodconsole/src/App.tsx
+++ b/moodconsole/src/App.tsx
@@ -51,6 +51,7 @@ interface EffectActive {
 
 interface State {
   initialized: number;
+  generation: string;
   chain: EffectActive[];
 }
 
@@ -63,9 +64,9 @@ interface Options {
 const ActiveEffect: FC<{
   availableEffects: EffectOption[];
   effect: EffectActive;
-  key: string;
+  identifier: string;
   onChange: (name: string, value: number) => void;
-}> = ({ availableEffects, effect, onChange, key }) => {
+}> = ({ availableEffects, effect, onChange, identifier }) => {
   const effectUsed = availableEffects.find(
     (e) => e.function === effect.function
   );
@@ -80,9 +81,9 @@ const ActiveEffect: FC<{
         ([name, paramOptions], idx) => {
           if (paramOptions.type === "slider") {
             const currentValue = effect.params[name];
-            const id = `${key}-input-${name}-${idx}`;
+            const id = `${identifier}-input-${name}-${idx}`;
             return (
-              <div>
+              <div key={id}>
                 <div className="flex">
                   <div className="text-sm">{paramOptions.min}</div>
                   <input
@@ -177,6 +178,19 @@ function App() {
     }
   }, [socket]);
 
+  useEffect(() => {
+    return () => {
+      socket?.close();
+    };
+  }, []);
+
+  /*
+  useEffect(() => {
+    console.log("new state:");
+    console.log(state);
+  }, [state]);
+  */
+
   const propagateState = (state: State) => {
     socket?.send(JSON.stringify({ type: "mutation", payload: state }));
   };
@@ -258,7 +272,7 @@ function App() {
                   }}
                 >
                   <ActiveEffect
-                    key={key}
+                    identifier={key}
                     effect={effect}
                     availableEffects={options.effects.available}
                     onChange={(name, value) => {