Merge pull request #9 from oslabs-beta/Lauren

Skilzsz · web-flow · commit 91fd4e7cf991 · 2023-12-19T13:18:06.000-08:00
Added events for position, delete, focus, and add
diff --git a/app/src/components/left/RoomsContainer.tsx b/app/src/components/left/RoomsContainer.tsx
@@ -10,7 +10,10 @@ import { RootState } from '../../redux/store';
 import TextField from '@mui/material/TextField';
 import {
   allCooperativeState,
-  addChild
+  addChild,
+  changeFocus,
+  deleteChild,
+  changePosition
 } from '../../redux/reducers/slice/appStateSlice';
 import {
   setRoomCode,
@@ -76,13 +79,35 @@ const RoomsContainer = () => {
 
       // update user list when there's a change: new join or leave the room
       socket.on('updateUserList', (newUserList) => {
+        console.log('user list received from server');
         dispatch(setUserList(newUserList));
       });
 
       socket.on('child data from server', (childData: object) => {
         console.log('child data received by users', childData);
         store.dispatch(addChild(childData));
       });
+
+      socket.on('focus data from server', (focusData: object) => {
+        console.log('focus data received from server', focusData);
+        store.dispatch(changeFocus(focusData));
+      });
+
+      socket.on('delete data from server', (deleteData: object) => {
+        console.log('delete data received from server', deleteData);
+        store.dispatch(deleteChild(deleteData));
+      });
+
+      socket.on(
+        'item position data from server',
+        (itemPositionData: object) => {
+          console.log(
+            'item position data received from server',
+            itemPositionData
+          );
+          store.dispatch(changePosition(itemPositionData));
+        }
+      );
     }
   }
 
diff --git a/app/src/components/main/Canvas.tsx b/app/src/components/main/Canvas.tsx
@@ -39,6 +39,14 @@ function Canvas(props: {}): JSX.Element {
     childId?: number | null
   ) => {
     dispatch(changeFocus({ componentId, childId }));
+    //if room exists, send focus dispatcht to all users
+    if (roomCode) {
+      emitEvent('changeFocusAction', roomCode, {
+        componentId: componentId,
+        childId: childId
+      });
+    }
+    console.log('emit changeFocusAction event is triggered in canvas');
   };
 
   // onClickHandler is responsible for changing the focused component and child component
@@ -98,7 +106,7 @@ function Canvas(props: {}): JSX.Element {
         let hasDiffParent = false;
         const components = state.components;
         let newChildName = '';
-        // loop over componenets array
+        // loop over components array
         for (let i = 0; i < components.length; i++) {
           const comp = components[i];
           //loop over each componenets child
@@ -133,6 +141,16 @@ function Canvas(props: {}): JSX.Element {
             contextParam: contextParam
           })
         );
+        if (roomCode) {
+          emitEvent('addChildAction', roomCode, {
+            type: item.instanceType,
+            typeId: item.instanceTypeId,
+            childId: null,
+            contextParam: contextParam
+          });
+
+          console.log('emit addChildAction event is triggered in canvas');
+        }
       }
     },
     collect: (monitor) => ({
diff --git a/app/src/components/main/DeleteButton.tsx b/app/src/components/main/DeleteButton.tsx
@@ -3,14 +3,27 @@ import { DeleteButtons } from '../../interfaces/Interfaces';
 import { useDispatch, useSelector } from 'react-redux';
 import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
+import { emitEvent } from '../../helperFunctions/socket';
 
 function DeleteButton({ id, name }: DeleteButtons) {
   const contextParam = useSelector((store: RootState) => store.contextSlice);
 
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
+
   const dispatch = useDispatch();
 
   const deleteHTMLtype = (id: number) => {
     dispatch(deleteChild({ id: id, contextParam: contextParam }));
+    if (roomCode) {
+      emitEvent('deleteChildAction', roomCode, {
+        id,
+        contextParam
+      });
+
+      console.log(
+        'emit deleteChildAction event is triggered in DeleteButton.tsx'
+      );
+    }
   };
 
   return (
diff --git a/app/src/components/main/DirectChildComponent.tsx b/app/src/components/main/DirectChildComponent.tsx
@@ -8,9 +8,12 @@ import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 import { useDispatch, useSelector } from 'react-redux';
 import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
+import { emitEvent } from '../../helperFunctions/socket';
 
 function DirectChildComponent({ childId, type, typeId, name }: ChildElement) {
   const state = useSelector((store: RootState) => store.appState);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
+
   const dispatch = useDispatch();
 
   // find the top-level component corresponding to this instance of the component
@@ -34,6 +37,13 @@ function DirectChildComponent({ childId, type, typeId, name }: ChildElement) {
   });
   const changeFocusFunction = (componentId: number, childId: number | null) => {
     dispatch(changeFocus({ componentId, childId }));
+    if (roomCode) {
+      emitEvent('changeFocusAction', roomCode, {
+        componentId: componentId,
+        childId: childId
+      });
+      console.log('emit focus event from DirectChildComponent');
+    }
   };
 
   // onClickHandler is responsible for changing the focused component and child component
diff --git a/app/src/components/main/DirectChildHTML.tsx b/app/src/components/main/DirectChildHTML.tsx
@@ -8,9 +8,13 @@ import DeleteButton from './DeleteButton';
 import { useDispatch, useSelector } from 'react-redux';
 import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
+import { emitEvent } from '../../helperFunctions/socket';
 
 function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
   const state = useSelector((store: RootState) => store.appState);
+
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
+
   const dispatch = useDispatch();
 
   // find the HTML element corresponding with this instance of an HTML element
@@ -35,6 +39,13 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
 
   const changeFocusFunction = (componentId: number, childId: number | null) => {
     dispatch(changeFocus({ componentId, childId }));
+    if (roomCode) {
+      emitEvent('changeFocusAction', roomCode, {
+        componentId: componentId,
+        childId: childId
+      });
+      console.log('emit focus event from DirectChildHTML');
+    }
   };
 
   // onClickHandler is responsible for changing the focused component and child component
diff --git a/app/src/components/main/DirectChildHTMLNestable.tsx b/app/src/components/main/DirectChildHTMLNestable.tsx
@@ -12,6 +12,7 @@ import AddRoute from './AddRoute';
 import AddLink from './AddLink';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../redux/store';
+import { emitEvent } from '../../helperFunctions/socket';
 
 import {
   changeFocus,
@@ -33,6 +34,8 @@ function DirectChildHTMLNestable({
   const contextParam = useSelector((store: RootState) => store.contextSlice);
 
   const dispatch = useDispatch();
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
+
   const ref = useRef(null);
 
   // takes a snapshot of state to be used in UNDO and REDO cases.  snapShotFunc is also invoked in Canvas.tsx
@@ -104,6 +107,18 @@ function DirectChildHTMLNestable({
               contextParam: contextParam
             })
           );
+          if (roomCode) {
+            emitEvent('addChildAction', roomCode, {
+              type: item.instanceType,
+              typeId: item.instanceTypeId,
+              childId: childId,
+              contextParam: contextParam
+            });
+
+            console.log(
+              'emit addChildAction event is triggered in DirectChildHTMLNestable'
+            );
+          }
         }
       }
       // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
@@ -117,6 +132,17 @@ function DirectChildHTMLNestable({
               contextParam: contextParam
             })
           );
+          if (roomCode) {
+            emitEvent('changePositionAction', roomCode, {
+              currentChildId: item.childId,
+              newParentChildId: childId,
+              contextParam: contextParam
+            });
+
+            console.log(
+              'emit changePosition event is triggered in DirectChildHTMLNestable'
+            );
+          }
         }
       }
     },
@@ -130,6 +156,13 @@ function DirectChildHTMLNestable({
 
   const changeFocusFunction = (componentId: number, childId: number | null) => {
     dispatch(changeFocus({ componentId, childId }));
+    if (roomCode) {
+      emitEvent('changeFocusAction', roomCode, {
+        componentId: componentId,
+        childId: childId
+      });
+      console.log('emit focus event from DirectChildHTMLNestable');
+    }
   };
 
   // onClickHandler is responsible for changing the focused component and child component
@@ -185,7 +218,9 @@ function DirectChildHTMLNestable({
       id={`canv${childId}`}
     >
       <span>
-        <strong style={{ color: '#f2fbf8' }}>{HTMLType.placeHolderShort}</strong>
+        <strong style={{ color: '#f2fbf8' }}>
+          {HTMLType.placeHolderShort}
+        </strong>
         <strong style={{ color: '#29a38a' }}>
           {attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
         </strong>
diff --git a/app/src/components/main/SeparatorChild.tsx b/app/src/components/main/SeparatorChild.tsx
@@ -14,6 +14,7 @@ import {
   changePosition,
   addChild
 } from '../../redux/reducers/slice/appStateSlice';
+import { emitEvent } from '../../helperFunctions/socket';
 
 function DirectChildHTMLNestable({
   childId,
@@ -25,6 +26,8 @@ function DirectChildHTMLNestable({
   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 ref = useRef(null);
 
@@ -80,6 +83,18 @@ function DirectChildHTMLNestable({
               contextParam: contextParam
             })
           );
+          if (roomCode) {
+            emitEvent('addChildAction', roomCode, {
+              type: item.instanceType,
+              typeId: item.instanceTypeId,
+              childId: childId,
+              contextParam: contextParam
+            });
+
+            console.log(
+              'emit addChildAction event is triggered in SeparatorChild'
+            );
+          }
         }
       }
       // if item is not a new instance, change position of element dragged inside separator so that separator is new parent (until replacement)
@@ -93,6 +108,17 @@ function DirectChildHTMLNestable({
               contextParam: contextParam
             })
           );
+          if (roomCode) {
+            emitEvent('changePositionAction', roomCode, {
+              currentChildId: item.childId,
+              newParentChildId: childId,
+              contextParam: contextParam
+            });
+
+            console.log(
+              'emit changePosition event is triggered in SeparatorChild'
+            );
+          }
         }
       }
     },
diff --git a/app/src/redux/reducers/slice/userSlice.ts b/app/src/redux/reducers/slice/userSlice.ts
diff --git a/server/server.ts b/server/server.ts
@@ -169,6 +169,27 @@ io.on('connection', (client) => {
       client.to(roomCode).emit('child data from server', childData);
     }
   });
+
+  client.on('changeFocusAction', (roomCode: string, focusData: object) => {
+    //console.log('focus data received on server:', focusData);
+    if (roomCode) {
+      //server send the focus data to everyone in room
+      client.to(roomCode).emit('focus data from server', focusData);
+    }
+  });
+
+  client.on('deleteChildAction', (roomCode: string, deleteData: object) => {
+    client.to(roomCode).emit('delete data from server', deleteData);
+  });
+
+  client.on(
+    'changePositionAction',
+    (roomCode: string, itemPositionData: object) => {
+      client
+        .to(roomCode)
+        .emit('item position data from server', itemPositionData);
+    }
+  );
 });
 
 //--------------------------------
