From 9c9e11ac5177a46845a7a5fbadd0d96793cf416e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mose=20M=C3=BCller?= <mosemueller@gmail.com>
Date: Wed, 2 Aug 2023 12:06:20 +0200
Subject: [PATCH] frontend: remote states from slider component

---
 frontend/src/App.tsx                        |  2 +-
 frontend/src/components/SliderComponent.tsx | 24 +++++----------------
 2 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 6684542..9ff2bf1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useReducer } from 'react';
 import { Component, ComponentLabel } from './components/component';
 import { ButtonComponent } from './components/ButtonComponent';
-import { socket } from './socket';
 import { NumberComponent } from './components/NumberComponent';
 import { SliderComponent } from './components/SliderComponent';
 import { EnumComponent } from './components/EnumComponent';
+import { socket } from './socket';
 
 type AttributeType =
   | 'str'
diff --git a/frontend/src/components/SliderComponent.tsx b/frontend/src/components/SliderComponent.tsx
index 950cf2c..96db19a 100644
--- a/frontend/src/components/SliderComponent.tsx
+++ b/frontend/src/components/SliderComponent.tsx
@@ -1,15 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import {
-  OverlayTrigger,
-  Badge,
-  Tooltip,
-  InputGroup,
-  Form,
-  Row,
-  Col,
-  Button,
-  Collapse
-} from 'react-bootstrap';
+import { InputGroup, Form, Row, Col, Button, Collapse } from 'react-bootstrap';
 import { socket } from '../socket';
 import RangeSlider from 'react-bootstrap-range-slider';
 import { DocStringComponent } from './DocStringComponent';
@@ -33,10 +23,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
     renderCount.current++;
   });
 
-  const { name, parent_path, value, readOnly, docString } = props;
-  const [min, setMin] = useState(props.min);
-  const [max, setMax] = useState(props.max);
-  const [stepSize, setStepSize] = useState(props.stepSize);
+  const { name, parent_path, value, min, max, stepSize, readOnly, docString } = props;
 
   const socketEmit = (
     newNumber: number,
@@ -56,18 +43,17 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   const handleValueChange = (newValue: number, valueType: string) => {
     switch (valueType) {
       case 'min':
-        setMin(newValue);
+        socketEmit(value, newValue, max, stepSize);
         break;
       case 'max':
-        setMax(newValue);
+        socketEmit(value, min, newValue, stepSize);
         break;
       case 'stepSize':
-        setStepSize(newValue);
+        socketEmit(value, min, max, newValue);
         break;
       default:
         break;
     }
-    socketEmit(value, min, max, stepSize);
   };
 
   return (