add websocket emitters for Context Manager

Author: jujupro

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,17 @@ 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/left/RoomsContainer.tsx

@@ -26,8 +26,14 @@ import {
   addState,
   deleteState,
   addPassedInProps,
-  deletePassedInProps
+  deletePassedInProps,
+  deleteElement
 } from '../../redux/reducers/slice/appStateSlice';
+import {
+  addContext,
+  deleteContext,
+  addContextValues
+} from '../../redux/reducers/slice/contextReducer';
 import {
   setRoomCode,
   setUserName,
@@ -44,6 +50,12 @@ import {
   getSocket,
   disconnectSocket
 } from '../../helperFunctions/socket';
+import {
+  AddContextPayload,
+  AddContextValuesPayload,
+  DeleteContextPayload,
+  addComponentToContext
+} from '../../../src/redux/reducers/slice/contextReducer';
 
 // // for websockets
 // // Part  - join room and room code functionality
@@ -203,13 +215,34 @@ const RoomsContainer = () => {
       );
 
       socket.on(
-        'new PassedInProps delete data from server',
+        '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(data[0]));
+        store.dispatch(deleteElement(data[1]));
+      });
     }
   }
 

app/src/redux/reducers/slice/contextReducer.ts

@@ -9,17 +9,17 @@ interface Context {
   components: string[];
 }
 
-interface AddContextPayload {
+export interface AddContextPayload {
   name: string;
 }
 
-interface AddContextValuesPayload {
+export interface AddContextValuesPayload {
   name: string;
   inputKey: string;
   inputValue: string;
 }
 
-interface DeleteContextPayload {
+export interface DeleteContextPayload {
   name: string;
 }
 

server/server.ts

@@ -262,14 +262,43 @@ io.on('connection', (client) => {
       if (roomCode) {
         client
           .to(roomCode)
-          .emit(
-            'new PassedInProps delete data from server',
-            passedInPropsDelete
-          );
+          .emit('PassedInProps delete data from server', passedInPropsDelete);
+      }
+    }
+  );
+
+  client.on('addContextAction', (roomCode: string, context: object) => {
+    if (roomCode) {
+      client.to(roomCode).emit('new context from server', context);
+    }
+  });
+
+  client.on(
+    'addContextValuesAction',
+    (roomCode: string, contextVal: object) => {
+      if (roomCode) {
+        client.to(roomCode).emit('new context value from server', contextVal);
       }
     }
   );
 
+  client.on(
+    'deleteContextAction',
+    (roomCode: string, contextDelete: object) => {
+      if (roomCode) {
+        client
+          .to(roomCode)
+          .emit('delete context data from server', contextDelete);
+      }
+    }
+  );
+
+  client.on('assignContextActions', (roomCode: string, data: []) => {
+    if (roomCode) {
+      client.to(roomCode).emit('assign context data from server', data);
+    }
+  });
+
   //remote cursor
   client.on('cursorData', (roomCode: string, remoteData: object) => {
     client.to(roomCode).emit('remote cursor data from server', remoteData);