Merge pull request #20 from oslabs-beta/laura

Laura

Author: jujupro

app/src/components/left/HTMLItem.tsx

@@ -129,7 +129,6 @@ const HTMLItem: React.FC<{
           className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
           id="HTMLItem"
         >
-          {/* <Icon fontSize="small" align-items="center" /> */}
           {typeof IconComponent !== 'undefined' && (
             <IconComponent fontSize="small" align-items="center" />
           )}
@@ -146,7 +145,7 @@ const HTMLItem: React.FC<{
             className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
             id="HTMLItem"
           >
-            <h3>{name}</h3>
+            <div>{name}</div>
           </div>
           <button
             id="newElement"

app/src/components/left/RoomsContainer.tsx

@@ -8,13 +8,19 @@ import Button from '@mui/material/Button';
 import React, { useState } from 'react';
 import { RootState } from '../../redux/store';
 import TextField from '@mui/material/TextField';
+import { BottomPanelObj } from '../../interfaces/Interfaces';
 import {
   allCooperativeState,
   addChild,
   changeFocus,
   deleteChild,
   changePosition,
-  resetState
+  resetState,
+  updateStateUsed,
+  updateUseContext,
+  updateCss,
+  updateAttributes,
+  updateEvents
 } from '../../redux/reducers/slice/appStateSlice';
 import {
   setRoomCode,
@@ -115,6 +121,16 @@ 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}));
+        store.dispatch(updateUseContext({useContextObj: updateData.useContextObj, contextParam: updateData.contextParam}));
+        store.dispatch(updateCss({style: updateData.style, contextParam: updateData.contextParam}));
+        store.dispatch(updateAttributes({attributes: updateData.attributes, contextParam: updateData.contextParam}));
+        store.dispatch(updateEvents({events: updateData.events, contextParam: updateData.contextParam}));
+      }); 
+
       socket.on(
         'item position data from server',
         (itemPositionData: object) => {

app/src/containers/CustomizationPanel.tsx

@@ -38,6 +38,8 @@ import createModal from '../components/right/createModal';
 import makeStyles from '@mui/styles/makeStyles';
 import { ColumnTab } from '../interfaces/Interfaces';
 import { RootState } from '../redux/store';
+import { emitEvent } from '../helperFunctions/socket';
+import { Number } from 'mongoose';
 
 // Previously named rightContainer, Renamed to Customizationpanel this now hangs on BottomTabs
 // need to pass in props to use the useHistory feature of react router
@@ -46,6 +48,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   const dispatch = useDispatch();
   const state = useSelector((store: RootState) => store.appState);
   const contextParam = useSelector((store: RootState) => store.contextSlice);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
   const style = useSelector((store: RootState) => store.styleSlice);
 
   const [displayMode, setDisplayMode] = useState('');
@@ -370,25 +373,42 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     if (compText !== '') attributesObj.compText = compText;
     if (compLink !== '') attributesObj.compLink = compLink;
     if (cssClasses !== '') attributesObj.cssClasses = cssClasses;
-
     dispatch(
       updateAttributes({
         attributes: attributesObj,
         contextParam: contextParam
       })
     );
-
+    
     const eventsObj: any = {};
     if (eventAll[0] !== '') eventsObj[eventAll[0]] = eventAll[1];
     dispatch(updateEvents({ events: eventsObj, contextParam: contextParam }));
 
+    if (roomCode) {
+      emitEvent('updateChildAction', roomCode, {
+        stateUsedObj: stateUsedObj,
+        contextParam: contextParam,
+        useContextObj: useContextObj,
+        attributes: attributesObj,
+        style: styleObj,
+        events: eventsObj
+      });
+      console.log('emit updateChildAction event is triggered in CustomizationPanel.tsx');
+    }
+
     return styleObj;
+    
   };
   const handleTailwind = (): void => {
     dispatch(changeTailwind(true));
     handleSave();
   };
 
+  // const clickToUpdate = () => {
+  //   handleSave();
+  //   saveEmitter();
+  // }
+
   // UNDO/REDO functionality--onClick these functions will be invoked.
   const handleUndo = () => {
     dispatch(undo({ contextParam }));
@@ -399,7 +419,15 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   // placeholder for handling deleting instance
   const handleDelete = () => {
     dispatch(deleteChild({ id: {}, contextParam: contextParam }));
+    if (roomCode) {
+      emitEvent('deleteChildAction', roomCode, {
+        id: {},
+        contextParam: contextParam
+      });
+      console.log('emit deleteChildAction event is triggered in CustomizationPanel.tsx');
+    }
   };
+  
   const handlePageDelete = (id) => () => {
     // TODO: return modal
     if (isLinkedTo()) return setDeleteLinkedPageError(true);

app/src/interfaces/Interfaces.ts

@@ -191,3 +191,12 @@ export interface MouseState {
   clientX: number;
   clientY: number;
 }
+
+export interface BottomPanelObj {
+  stateUsedObj: object;
+  contextParam: object;
+  useContextObj: object;
+  attributes: object;
+  style: object;
+  events: object;
+}

server/server.ts

@@ -205,6 +205,11 @@ io.on('connection', (client) => {
     client.to(roomCode).emit('delete data from server', deleteData);
   });
 
+  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(
     'changePositionAction',
     (roomCode: string, itemPositionData: object) => {