Merge pull request #24 from oslabs-beta/rose

Add socket emitters

Author: Skilzsz

app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx

@@ -11,6 +11,7 @@ import { addComponentToContext } from '../../../redux/reducers/slice/contextRedu
 import { useSelector, useDispatch } from 'react-redux';
 import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../../redux/store';
+import { emitEvent } from '../../../../src/helperFunctions/socket';
 
 const AssignContainer = () => {
   const dispatch = useDispatch();
@@ -23,6 +24,7 @@ const AssignContainer = () => {
     state: store.appState,
     contextParam: store.contextSlice
   }));
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
 
   //sets table data if it exists
   const renderTable = (targetContext) => {
@@ -52,6 +54,7 @@ const AssignContainer = () => {
       componentInput === null
     )
       return;
+
     dispatch(
       addComponentToContext({
         context: contextInput,
@@ -60,6 +63,16 @@ const AssignContainer = () => {
     );
     //trigger generateCode(), update code preview tab
     dispatch(deleteElement({ id: 'FAKE_ID', contextParam: contextParam }));
+
+    if (roomCode) {
+      emitEvent('assignContextActions', roomCode, {
+        context: contextInput,
+        component: componentInput,
+        id: 'FAKE_ID',
+        contextParam: contextParam
+      });
+    }
+
     renderComponentTable(componentInput);
   };
 

app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx

@@ -12,9 +12,12 @@ import {
 } from '../../../redux/reducers/slice/contextReducer';
 import { useSelector, useDispatch } from 'react-redux';
 import { RootState } from '../../../redux/store';
+import { emitEvent } from '../../../../src/helperFunctions/socket';
 
 const CreateContainer = () => {
   const state = useSelector((store: RootState) => store.contextSlice);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
+
   const [contextInput, setContextInput] = React.useState('');
   const [currentContext, setCurrentContext] = React.useState('');
   const [errorMsg, setErrorMsg] = React.useState('');
@@ -49,6 +52,11 @@ const CreateContainer = () => {
     }
 
     dispatch(addContext({ name: contextInput }));
+
+    if (roomCode) {
+      emitEvent('addContextAction', roomCode, { name: contextInput });
+    }
+
     setContextInput('');
   };
 
@@ -73,11 +81,24 @@ const CreateContainer = () => {
   //update data store when user add new key-value pair to context
   const handleClickInputData = (name, { inputKey, inputValue }) => {
     dispatch(addContextValues({ name, inputKey, inputValue }));
+
+    if (roomCode) {
+      emitEvent('addContextValuesAction', roomCode, {
+        name,
+        inputKey,
+        inputValue
+      });
+    }
   };
 
   //update data store when user deletes context
   const handleDeleteContextClick = () => {
     dispatch(deleteContext({ name: currentContext }));
+
+    if (roomCode) {
+      emitEvent('deleteContextAction', roomCode, { name: currentContext });
+    }
+
     setContextInput('');
     setCurrentContext('');
   };

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/HTMLPanel.tsx

@@ -8,6 +8,7 @@ import { addElement } from '../../redux/reducers/slice/appStateSlice';
 import makeStyles from '@mui/styles/makeStyles';
 import MuiAlert, { AlertProps } from '@mui/material/Alert';
 import Snackbar from '@mui/material/Snackbar';
+import { emitEvent } from '../../helperFunctions/socket';
 
 /*
 DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
@@ -32,6 +33,8 @@ const HTMLPanel = (props): JSX.Element => {
   const [errorStatus, setErrorStatus] = useState(false);
   const [alertOpen, setAlertOpen] = React.useState<boolean>(false);
   const state = useSelector((store: RootState) => store.appState);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
+
   const dispatch = useDispatch();
   let startingID = 0;
   state.HTMLTypes.forEach((element) => {
@@ -106,6 +109,11 @@ const HTMLPanel = (props): JSX.Element => {
     };
 
     dispatch(addElement(newElement));
+
+    if (roomCode) {
+      emitEvent('addElementAction', roomCode, newElement);
+    }
+
     setCurrentID(currentID + 1);
     setTag('');
     setName('');

app/src/components/left/RoomsContainer.tsx

@@ -20,8 +20,20 @@ import {
   updateUseContext,
   updateCss,
   updateAttributes,
-  updateEvents
+  updateEvents,
+  addComponent,
+  addElement,
+  addState,
+  deleteState,
+  addPassedInProps,
+  deletePassedInProps,
+  deleteElement
 } from '../../redux/reducers/slice/appStateSlice';
+import {
+  addContext,
+  deleteContext,
+  addContextValues
+} from '../../redux/reducers/slice/contextReducer';
 import {
   setRoomCode,
   setUserName,
@@ -38,6 +50,12 @@ import {
   getSocket,
   disconnectSocket
 } from '../../helperFunctions/socket';
+import {
+  AddContextPayload,
+  AddContextValuesPayload,
+  DeleteContextPayload,
+  addComponentToContext
+} from '../../../src/redux/reducers/slice/contextReducer';
 import Canvas from '../components/main/Canvas';
 
 // // for websockets
@@ -125,12 +143,37 @@ const RoomsContainer = () => {
       //write out emitters for reach function inside of CusomizationPanel HandleSave//no need to pull the function into RoomsContainer
       socket.on('update data from server', (updateData: BottomPanelObj) => {
         console.log('update data received from server', updateData);
-        store.dispatch(updateStateUsed({stateUsedObj: updateData.stateUsedObj, contextParam: updateData.contextParam}));
-        store.dispatch(updateUseContext({useContextObj: updateData.useContextObj, contextParam: updateData.contextParam}));
-        store.dispatch(updateCss({style: updateData.style, contextParam: updateData.contextParam}));
-        store.dispatch(updateAttributes({attributes: updateData.attributes, contextParam: updateData.contextParam}));
-        store.dispatch(updateEvents({events: updateData.events, contextParam: updateData.contextParam}));
-      }); 
+        store.dispatch(
+          updateStateUsed({
+            stateUsedObj: updateData.stateUsedObj,
+            contextParam: updateData.contextParam
+          })
+        );
+        store.dispatch(
+          updateUseContext({
+            useContextObj: updateData.useContextObj,
+            contextParam: updateData.contextParam
+          })
+        );
+        store.dispatch(
+          updateCss({
+            style: updateData.style,
+            contextParam: updateData.contextParam
+          })
+        );
+        store.dispatch(
+          updateAttributes({
+            attributes: updateData.attributes,
+            contextParam: updateData.contextParam
+          })
+        );
+        store.dispatch(
+          updateEvents({
+            events: updateData.events,
+            contextParam: updateData.contextParam
+          })
+        );
+      });
 
       socket.on(
         'item position data from server',
@@ -142,6 +185,72 @@ const RoomsContainer = () => {
           store.dispatch(changePosition(itemPositionData));
         }
       );
+
+      socket.on('new component data from server', (newComponent: object) => {
+        store.dispatch(addComponent(newComponent));
+      });
+
+      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(
+        'PassedInProps delete data from server',
+        (passedInProps: object) => {
+          store.dispatch(deletePassedInProps(passedInProps));
+        }
+      );
+
+      socket.on('new context from server', (context: AddContextPayload) => {
+        store.dispatch(addContext(context));
+      });
+
+      socket.on(
+        'new context value from server',
+        (contextVal: AddContextValuesPayload) => {
+          store.dispatch(addContextValues(contextVal));
+        }
+      );
+
+      socket.on(
+        'delete context data from server',
+        (context: DeleteContextPayload) => {
+          store.dispatch(deleteContext(context));
+        }
+      );
+
+      socket.on('assign context data from server', (data) => {
+        store.dispatch(
+          addComponentToContext({
+            context: data.context,
+            component: data.component
+          })
+        );
+        store.dispatch(
+          deleteElement({ id: 'FAKE_ID', contextParam: data.contextParam })
+        );
+      });
     }
   }