chnage cursor and add websocket emitter to custom elementdelete

Author: lauraafor

app/src/components/left/DragDropPanel.tsx

@@ -4,6 +4,7 @@ import HTMLItem from './HTMLItem';
 import React from 'react';
 import { RootState } from '../../redux/store';
 import { deleteElement } from '../../redux/reducers/slice/appStateSlice';
+import { emitEvent } from '../../helperFunctions/socket';
 
 /*
 DESCRIPTION: This is the top half of the left panel, starting from the 'HTML
@@ -23,10 +24,18 @@ const DragDropPanel = (props): 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 handleDelete = (id: number): void => {
     dispatch(deleteElement({ id: id, contextParam: contextParam }));
+    if (roomCode) {
+      emitEvent('deleteElementAction', roomCode, {
+        id,
+        contextParam
+      });
+    }
   };
+
   // filter out separator so that it will not appear on the html panel
   const htmlTypesToRender = state.HTMLTypes.filter(
     (type) => type.name !== 'separator'

app/src/components/left/ElementsContainer.tsx

@@ -7,15 +7,23 @@ import DragDropPanel from './DragDropPanel';
 
 import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
+import { emitEvent } from '../../helperFunctions/socket';
 
 // Left-hand portion of the app, where predefined component options are displayed
 const ElementsContainer = (props): JSX.Element => {
   const contextParam = useSelector((store: RootState) => store.contextSlice);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
 
   const dispatch = useDispatch();
 
   const handleDelete = () => {
     dispatch(deleteChild({ id: {}, contextParam: contextParam }));
+    // if (roomCode) {
+    //   emitEvent('deleteChildAction', roomCode, {
+    //     id,
+    //     contextParam
+    //   });
+    // }
   };
 
   const keyBindedFunc = useCallback((e) => {

app/src/components/left/RoomsContainer.tsx

@@ -14,6 +14,7 @@ import {
   addChild,
   changeFocus,
   deleteChild,
+  deleteElement,
   changePosition,
   resetState,
   updateStateUsed,
@@ -39,7 +40,6 @@ import {
   getSocket,
   disconnectSocket
 } from '../../helperFunctions/socket';
-import Canvas from '../components/main/Canvas';
 
 // // for websockets
 // // Part  - join room and room code functionality
@@ -109,22 +109,27 @@ const RoomsContainer = () => {
       });
 
       socket.on('child data from server', (childData: object) => {
-        console.log('child data received by users', childData);
+        // 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);
+        // 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);
+        // console.log('delete data received from server', deleteData);
         store.dispatch(deleteChild(deleteData));
       });
 
+      socket.on('delete element data from server', (deleteElementData: object) => {
+        // console.log('delete element data received from server', deleteElementData);
+        store.dispatch(deleteElement(deleteElementData));
+      });
+
       socket.on('update data from server', (updateData: BottomPanelObj) => {
-        console.log('update data received from server', updateData);
+        // 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}));
@@ -133,7 +138,7 @@ const RoomsContainer = () => {
       }); 
 
       socket.on('update css data from server', (cssData: object) => {
-        console.log('CSS data received from server', cssData);
+        // console.log('CSS data received from server', cssData);
         store.dispatch(updateStylesheet(cssData));
       });
 

app/src/components/main/Canvas.tsx

@@ -15,7 +15,7 @@ import { RootState } from '../../redux/store';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 import { emitEvent, getSocket } from '../../helperFunctions/socket';
-import { GiBoba } from 'react-icons/gi';
+import { FaMousePointer } from 'react-icons/fa';
 import { Console } from 'console';
 
 function Canvas(props: {}): JSX.Element {
@@ -175,7 +175,7 @@ function Canvas(props: {}): JSX.Element {
         childId: childId
       });
     }
-    console.log('emit changeFocusAction event is triggered in canvas');
+    // console.log('emit changeFocusAction event is triggered in canvas');
   };
 
   // onClickHandler is responsible for changing the focused component and child component
@@ -341,7 +341,7 @@ function Canvas(props: {}): JSX.Element {
                 color: userColors[userList.indexOf(cursor.remoteUserName)]
               }}
             >
-              {<GiBoba />}
+              {<FaMousePointer />}
               {cursor.remoteUserName}
             </div>
           )

server/server.ts

@@ -205,6 +205,10 @@ io.on('connection', (client) => {
     client.to(roomCode).emit('delete data from server', deleteData);
   });
 
+  client.on('deleteElementAction', (roomCode: string, deleteElementData: object) => {
+    client.to(roomCode).emit('delete element data from server', deleteElementData);
+  });
+
   client.on('updateChildAction', (roomCode: string, updateData: object) => {
     client.to(roomCode).emit('update data from server', updateData);
   });