added socket emitters to css editor stylesEditor file

Author: lauraafor

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

@@ -20,7 +20,8 @@ import {
   updateUseContext,
   updateCss,
   updateAttributes,
-  updateEvents
+  updateEvents,
+  updateStylesheet
 } from '../../redux/reducers/slice/appStateSlice';
 import {
   setRoomCode,
@@ -122,7 +123,6 @@ const RoomsContainer = () => {
         store.dispatch(deleteChild(deleteData));
       });
 
-      //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}));
@@ -132,6 +132,11 @@ const RoomsContainer = () => {
         store.dispatch(updateEvents({events: updateData.events, contextParam: updateData.contextParam}));
       }); 
 
+      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) => {

server/server.ts

@@ -207,7 +207,11 @@ io.on('connection', (client) => {
 
   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(