feat: adding "emit_update" function

frontend/src/components/AsyncMethodComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { socket } from '../socket';
+import { emit_update } from '../socket';
 import { InputGroup, Form, Button } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 
@@ -31,11 +31,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
       method_name = `start_${name}`;
     }
 
-    socket.emit('frontend_update', {
+    emit_update(method_name, parent_path, { args: args });
-      name: method_name,
-      parent_path: parent_path,
-      value: { args: args }
-    });
   };
 
   useEffect(() => {

frontend/src/components/ButtonComponent.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { ToggleButton } from 'react-bootstrap';
-import { socket } from '../socket';
+import { emit_update } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
 
 interface ButtonComponentProps {
@@ -23,11 +23,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   const buttonName = mapping ? (value ? mapping[0] : mapping[1]) : name;
 
   const setChecked = (checked: boolean) => {
-    socket.emit('frontend_update', {
+    emit_update(name, parent_path, checked);
-      name: name,
-      parent_path: parent_path,
-      value: checked
-    });
   };
 
   return (

frontend/src/components/EnumComponent.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { InputGroup, Form, Row, Col } from 'react-bootstrap';
-import { socket } from '../socket';
+import { emit_update } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
 
 interface EnumComponentProps {
@@ -21,11 +21,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
   const { name, parent_path, value, docString, enumDict } = props;
 
   const handleValueChange = (newValue: string) => {
-    socket.emit('frontend_update', {
+    emit_update(name, parent_path, newValue);
-      name: name,
-      parent_path: parent_path,
-      value: newValue
-    });
   };
 
   return (

frontend/src/components/MethodComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { socket } from '../socket';
+import { emit_update } from '../socket';
 import { Button, InputGroup, Form, Collapse } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 
@@ -27,20 +27,12 @@ export const MethodComponent = React.memo((props: MethodProps) => {
     Object.keys(props.parameters).forEach(
       (name) => (args[name] = event.target[name].value)
     );
-    socket.emit(
+    emit_update(name, parent_path, { args: args }, (ack) => {
-      'frontend_update',
+      // Update the functionCalls state with the new call if we get an acknowledge msg
-      {
+      if (ack !== undefined) {
-        name: name,
+        setFunctionCalls((prevCalls) => [...prevCalls, { name, args, result: ack }]);
-        parent_path: parent_path,
-        value: { args: args }
-      },
-      (ack) => {
-        // Update the functionCalls state with the new call if we get an acknowledge msg
-        if (ack !== undefined) {
-          setFunctionCalls((prevCalls) => [...prevCalls, { name, args, result: ack }]);
-        }
       }
-    );
+    });
   };
 
   useEffect(() => {

frontend/src/components/SliderComponent.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { InputGroup, Form, Row, Col, Button, Collapse } from 'react-bootstrap';
-import { socket } from '../socket';
+import { emit_update } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
 import { Slider } from '@mui/material';
 
@@ -31,10 +31,11 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
     max: number = props.max,
     stepSize: number = props.stepSize
   ) => {
-    socket.emit('frontend_update', {
+    emit_update(name, parent_path, {
-      name: name,
+      value: newNumber,
-      parent_path: parent_path,
+      min: min,
-      value: { value: newNumber, min: min, max: max, step_size: stepSize }
+      max: max,
+      step_size: stepSize
     });
   };
   const handleOnChange = (event, newNumber: number | number[]) => {

frontend/src/socket.ts

@@ -8,3 +8,12 @@ const URL = `ws://${hostname}:${port}/`;
 console.debug('Websocket: ', URL);
 
 export const socket = io(URL, { path: '/ws/socket.io', transports: ['websocket'] });
+
+export const emit_update = (
+  name: string,
+  parent_path: string,
+  value: unknown,
+  callback?: (ack: unknown) => void
+) => {
+  socket.emit('frontend_update', { name, parent_path, value }, callback);
+};