New changes to laura

Author: Skilzsz

app/src/components/bottom/StylesEditor.tsx

@@ -12,6 +12,7 @@ import Fab from '@mui/material/Fab';
 import { RootState } from '../../redux/store';
 import SaveIcon from '@mui/icons-material/Save';
 import { updateStylesheet } from '../../redux/reducers/slice/appStateSlice';
+import { emitEvent } from '../../helperFunctions/socket';
 
 const StylesEditor: React.FC<{
   theme: string | null;
@@ -21,6 +22,8 @@ const StylesEditor: React.FC<{
   const stylesheet = useSelector(
     (state: RootState) => state.appState.stylesheet
   );
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
+  
   //sets state for what text is currently in the csseditor
   const [css, setCss] = useState(stylesheet);
 
@@ -30,6 +33,10 @@ const StylesEditor: React.FC<{
   const saveCss = (e) => {
     e.preventDefault();
     dispatch(updateStylesheet(css));
+    if (roomCode) {
+      emitEvent('updateCSSAction', roomCode, css);
+      console.log('emit updateCSSAction event is triggered in StylesEditor.tsx');
+    }
   };
 
   //handles changes in the ace editor

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

@@ -27,7 +27,8 @@ import {
   deleteState,
   addPassedInProps,
   deletePassedInProps,
-  deleteElement
+  deleteElement,
+  updateStylesheet
 } from '../../redux/reducers/slice/appStateSlice';
 import {
   addContext,
@@ -126,24 +127,27 @@ const RoomsContainer = () => {
       });
 
       socket.on('child data from server', (childData: object) => {
-        console.log(`child data received by socket ${socket.id}`, childData);
-        console.log(socket);
+        // 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));
       });
 
-      //write out emitters for reach function inside of CusomizationPanel HandleSave//no need to pull the function into RoomsContainer
+      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,
@@ -176,6 +180,11 @@ const RoomsContainer = () => {
         );
       });
 
+      socket.on('update css data from server', (cssData: object) => {
+        // console.log('CSS data received from server', cssData);
+        store.dispatch(updateStylesheet(cssData));
+      });
+
       socket.on(
         'item position data from server',
         (itemPositionData: object) => {

app/src/components/main/Canvas.tsx

@@ -15,7 +15,8 @@ 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 {
   const state = useSelector((store: RootState) => store.appState);
@@ -191,7 +192,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
@@ -359,7 +360,7 @@ function Canvas(props: {}): JSX.Element {
                 color: userColors[userList.indexOf(cursor.remoteUserName)]
               }}
             >
-              {<GiBoba />}
+              {<FaMousePointer />}
               {cursor.remoteUserName}
             </div>
           )

app/src/containers/CustomizationPanel.tsx

@@ -585,16 +585,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                 ? ' component'
                 : ' element'}{' '}
               <br />
-              <br />
-              <span
-                className={
-                  isThemeLight
-                    ? `${classes.compName} ${classes.lightThemeFontColor}`
-                    : `${classes.compName} ${classes.darkThemeFontColor}`
-                }
-              >
                 {configTarget.child.name}
-              </span>
             </h4>
           </div>
           <section className={'customization-section'}>
@@ -891,7 +882,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                   SAVE
                 </Button>
               </div>
-              <div className={classes.buttonRow}>
+              {/* <div className={classes.buttonRow}>
                 <Button
                   variant="contained"
                   color="primary"
@@ -926,7 +917,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                 >
                   Tailwind
                 </Button>
-              </div>
+              </div> */}
               {configTarget.child ? (
                 <div className={classes.buttonRow}>
                   <Button

server/server.ts

@@ -198,9 +198,17 @@ 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);
-    console.log('client received update from server!');
+  });
+
+  client.on('updateCSSAction', (roomCode: string, cssData: object) => {
+    client.to(roomCode).emit('update css data from server', cssData);
+    console.log('client received css update from server!')
   });
 
   client.on(