add websocket emitters for functionality in bottom panel: State Manager & ComponentPanelItem

Author: jujupro

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -16,10 +16,12 @@ import TableStateProps from './TableStateProps';
 import TableParentProps from './TableParentProps';
 import TablePassedInProps from './TablePassedInProps';
 import { RootState } from '../../../../redux/store';
+import { emitEvent } from '../../../../helperFunctions/socket';
 
 const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
   const state = useSelector((store: RootState) => store.appState);
   const contextParam = useSelector((store: RootState) => store.contextSlice);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
 
   const dispatch = useDispatch();
   const classes = useStyles();
@@ -159,6 +161,15 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
           contextParam: contextParam
         })
       );
+
+      if (roomCode) {
+        emitEvent('addStateAction', roomCode, {
+          newState: newState,
+          setNewState: setNewState,
+          contextParam: contextParam
+        });
+      }
+
       setRows1([...rows1, newState]);
       setErrorStatus(false);
       clearForm();

app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

@@ -6,10 +6,12 @@ import makeStyles from '@mui/styles/makeStyles';
 import AddIcon from '@mui/icons-material/Add';
 import { addPassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../../../redux/store';
+import { emitEvent } from '../../../../helperFunctions/socket';
 
 const TableParentProps = (props) => {
   const state = useSelector((store: RootState) => store.appState);
   const contextParam = useSelector((store: RootState) => store.contextSlice);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
 
   const dispatch = useDispatch();
   const classes = useStyles();
@@ -76,6 +78,15 @@ const TableParentProps = (props) => {
         contextParam: contextParam
       })
     );
+
+    if (roomCode) {
+      emitEvent('addPassedInPropsAction', roomCode, {
+        passedInProps: parentComponentProps,
+        rowId: rowId,
+        parentComponent: parentComponent,
+        contextParam: contextParam
+      });
+    }
   };
 
   useEffect(() => {

app/src/components/StateManagement/CreateTab/components/TablePassedInProps.tsx

@@ -7,10 +7,12 @@ import { useDispatch, useSelector } from 'react-redux';
 import { deletePassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../../../redux/store';
 import { ColumnTab } from '../../../../interfaces/Interfaces';
+import { emitEvent } from '../../../../helperFunctions/socket';
 
 const TablePassedInProps = (props) => {
   const state = useSelector((store: RootState) => store.appState);
   const contextParam = useSelector((store: RootState) => store.contextSlice);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
 
   const dispatch = useDispatch();
   const classes = useStyles();
@@ -75,6 +77,13 @@ const TablePassedInProps = (props) => {
     // remove the state that the button is clicked
     // send a dispatch to rerender the table
     dispatch(deletePassedInProps({ rowId: rowId, contextParam: contextParam }));
+
+    if (roomCode) {
+      emitEvent('deletePassedInPropsAction', roomCode, {
+        rowId: rowId,
+        contextParam: contextParam
+      });
+    }
   };
 
   useEffect(() => {

app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx

@@ -8,10 +8,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import { deleteState } from '../../../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../../../redux/store';
 import { ColumnTab } from '../../../../interfaces/Interfaces';
+import { emitEvent } from '../../../../helperFunctions/socket';
+
 // updates state mgmt boxes and data grid
 const TableStateProps = (props) => {
   const state = useSelector((store: RootState) => store.appState);
   const contextParam = useSelector((store: RootState) => store.contextSlice);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
 
   const dispatch = useDispatch();
   const classes = useStyles();
@@ -84,6 +87,14 @@ const TableStateProps = (props) => {
         contextParam: contextParam
       })
     );
+
+    if (roomCode) {
+      emitEvent('deleteStateAction', roomCode, {
+        stateProps: filtered,
+        rowId: selectedId,
+        contextParam: contextParam
+      });
+    }
   };
 
   useEffect(() => {

app/src/components/left/RoomsContainer.tsx

@@ -22,7 +22,11 @@ import {
   updateAttributes,
   updateEvents,
   addComponent,
-  addElement
+  addElement,
+  addState,
+  deleteState,
+  addPassedInProps,
+  deletePassedInProps
 } from '../../redux/reducers/slice/appStateSlice';
 import {
   setRoomCode,
@@ -176,6 +180,36 @@ const RoomsContainer = () => {
       socket.on('new element data from server', (newElement: object) => {
         store.dispatch(addElement(newElement));
       });
+
+      socket.on(
+        'new component state data from server',
+        (componentState: object) => {
+          store.dispatch(addState(componentState));
+        }
+      );
+
+      socket.on(
+        'delete component state data from server',
+        (componentStateDelete: object) => {
+          store.dispatch(deleteState(componentStateDelete));
+        }
+      );
+
+      socket.on(
+        'new PassedInProps data from server',
+        (passedInProps: object) => {
+          store.dispatch(addPassedInProps(passedInProps));
+        }
+      );
+
+      socket.on(
+        'new PassedInProps delete data from server',
+        (passedInProps: object) => {
+          store.dispatch(deletePassedInProps(passedInProps));
+        }
+      );
+
+      //
     }
   }
 

app/src/components/right/ComponentPanelItem.tsx

@@ -6,6 +6,7 @@ import { ItemTypes } from '../../constants/ItemTypes';
 import { useDispatch, useSelector } from 'react-redux';
 import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
+import { emitEvent } from '../../helperFunctions/socket';
 /*
 DESCRIPTION: This component is each box beneath the 'HTML Elements' and
   'reusable components' (in classic React mode) headings. Drag-and-drop
@@ -24,6 +25,7 @@ const ComponentPanelItem: React.FC<{
 }> = ({ name, id, root, isFocus, isThemeLight }) => {
   const classes = useStyles();
   const state = useSelector((store: RootState) => store.appState);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
   const dispatch = useDispatch();
 
   // useDrag hook allows components in left panel to be drag source
@@ -44,6 +46,13 @@ const ComponentPanelItem: React.FC<{
   const handleClick = () => {
     //LEGACY PD
     dispatch(changeFocus({ componentId: id, childId: null }));
+
+    if (roomCode) {
+      emitEvent('changeFocusAction', roomCode, {
+        componentId: id,
+        childId: null
+      });
+    }
   };
 
   return (
@@ -73,7 +82,7 @@ const ComponentPanelItem: React.FC<{
 
 const useStyles = makeStyles({
   activeFocus: {
-    backgroundColor: 'rgba (0, 0, 0, 0.54)', //this doesnt do anything....
+    backgroundColor: 'rgba (0, 0, 0, 0.54)' //this doesnt do anything....
   },
   focusMark: {
     backgroundColor: '#29A38A',

server/server.ts

@@ -223,6 +223,53 @@ io.on('connection', (client) => {
     }
   });
 
+  client.on('addStateAction', (roomCode: string, componentState: object) => {
+    if (roomCode) {
+      client
+        .to(roomCode)
+        .emit('new component state data from server', componentState);
+    }
+  });
+
+  client.on(
+    'deleteStateAction',
+    (roomCode: string, componentStateDelete: object) => {
+      if (roomCode) {
+        client
+          .to(roomCode)
+          .emit(
+            'delete component state data from server',
+            componentStateDelete
+          );
+      }
+    }
+  );
+
+  client.on(
+    'addPassedInPropsAction',
+    (roomCode: string, passedInProps: object) => {
+      if (roomCode) {
+        client
+          .to(roomCode)
+          .emit('new PassedInProps data from server', passedInProps);
+      }
+    }
+  );
+
+  client.on(
+    'deletePassedInPropsAction',
+    (roomCode: string, passedInPropsDelete: object) => {
+      if (roomCode) {
+        client
+          .to(roomCode)
+          .emit(
+            'new PassedInProps delete data from server',
+            passedInPropsDelete
+          );
+      }
+    }
+  );
+
   //remote cursor
   client.on('cursorData', (roomCode: string, remoteData: object) => {
     client.to(roomCode).emit('remote cursor data from server', remoteData);