Merge branch 'dev' into sean

Skilzsz · Skilzsz · commit 16480dd9541a · 2024-01-07T16:05:29.000-08:00
diff --git a/app/src/components/bottom/CodePreview.tsx b/app/src/components/bottom/CodePreview.tsx
@@ -4,8 +4,6 @@ import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/theme-dracula';
 import 'ace-builds/src-noconflict/theme-terminal';
 
-import * as esbuild from 'esbuild-wasm';
-
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   codePreviewInput,
@@ -19,22 +17,14 @@ import { RootState } from '../../redux/store';
 import { fetchPlugin } from '../../plugins/fetch-plugin';
 import { unpkgPathPlugin } from '../../plugins/unpkg-path-plugin';
 import useResizeObserver from '../../tree/useResizeObserver';
+import { initializeEsbuild } from '../../helperFunctions/esbuildService';
 
 const CodePreview: React.FC<{
   theme: string | null;
   setTheme: any | null;
 }> = ({ theme, setTheme }) => {
   const ref = useRef<any>();
 
-  /**
-   * Starts the Web Assembly service.
-   */
-  const startService = async () => {
-    ref.current = await esbuild.initialize({
-      worker: true,
-      wasmURL: 'https://unpkg.com/esbuild-wasm@0.8.27/esbuild.wasm'
-    });
-  };
   const dispatch = useDispatch();
 
   const wrapper = useRef();
@@ -49,7 +39,8 @@ const CodePreview: React.FC<{
   const [input, setInput] = useState('');
 
   useEffect(() => {
-    startService();
+    //Starts the Web Assembly service
+    initializeEsbuild();
   }, []);
 
   useEffect(() => {
@@ -61,6 +52,13 @@ const CodePreview: React.FC<{
     dispatch(codePreviewInput(currentComponent.code));
   }, [currentComponent, state.components]);
 
+  useEffect(() => {
+    console.log('CodePreview Mounted');
+    return () => {
+      console.log('CodePreview Unmounted');
+    };
+  }, []);
+
   /**
    * Handler thats listens to changes in code editor
    * @param {string} data - Code entered by the user
diff --git a/app/src/components/left/HTMLItem.tsx b/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"
diff --git a/app/src/components/left/RoomsContainer.tsx b/app/src/components/left/RoomsContainer.tsx
@@ -8,12 +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
+  changePosition,
+  resetState,
+  updateStateUsed,
+  updateUseContext,
+  updateCss,
+  updateAttributes,
+  updateEvents
 } from '../../redux/reducers/slice/appStateSlice';
 import {
   setRoomCode,
@@ -115,6 +122,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) => {
@@ -137,7 +154,6 @@ const RoomsContainer = () => {
     //edge case: if userList is not empty, reset it to empty array
     if (userList.length !== 0) dispatch(setUserList([]));
     handleUserEnteredRoom(roomCode);
-
     dispatch(setRoomCode(roomCode)); //?
     dispatch(setUserJoined(true)); //setting joined room to true for rendering leave room button
   }
@@ -146,6 +162,7 @@ const RoomsContainer = () => {
     let socket = getSocket();
     if (socket) {
       socket.disconnect(); //disconnecting socket from server
+      console.log(socket);
       socket = null;
       console.log('user leaves the room');
     }
@@ -154,6 +171,7 @@ const RoomsContainer = () => {
     dispatch(setUserName(''));
     dispatch(setUserList([]));
     dispatch(setUserJoined(false)); //setting joined to false so join room UI appear
+    dispatch(resetState(''));
   }
 
   //checking empty input field (not including spaces)
diff --git a/app/src/containers/CustomizationPanel.tsx b/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);
diff --git a/app/src/helperFunctions/esbuildService.ts b/app/src/helperFunctions/esbuildService.ts
@@ -0,0 +1,15 @@
+import * as esbuild from 'esbuild-wasm';
+
+/* Singleton pattern for initializing esbuild */
+/* This ensures that esbuild is only initialized once, regardless of how many times CodePreview is mounted and unmounted */
+let isEsbuildInitialized = false;
+
+export const initializeEsbuild = async () => {
+  if (!isEsbuildInitialized) {
+    await esbuild.initialize({
+      worker: true,
+      wasmURL: 'https://unpkg.com/esbuild-wasm@0.8.27/esbuild.wasm'
+    });
+    isEsbuildInitialized = true;
+  }
+};
diff --git a/app/src/helperFunctions/socket.ts b/app/src/helperFunctions/socket.ts
@@ -16,10 +16,11 @@ import config from '../../../config';
 let socket = null;
 
 export const initializeSocket = () => {
-  if (socket) socket.disconnect();
+  if (socket) socket.connect();
   if (!socket) {
     socket = io(config.API_BASE_URL, { transports: ['websocket'] });
     console.log('A user connected');
+    console.log('socket:', socket);
   }
 };
 
diff --git a/app/src/interfaces/Interfaces.ts b/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;
+}
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
@@ -163,15 +163,24 @@ io.on('connection', (client) => {
 
   //disconnecting functionality
   client.on('disconnecting', () => {
-    // the client.rooms Set contains at least the socket ID
     const roomCode = Array.from(client.rooms)[1]; //grabbing current room client was in when disconnecting
+    const userList = Object.keys(roomLists[roomCode]); //[ bHhFDmzPGam, mqri45c94E3 ] order is not perserved?
+    const hostID = userList[0];
+    // the client.rooms Set contains at least the socket ID
+    console.log(`${client.id} will be leaving the room`);
+    console.log(client.id === hostID);
+    console.log(roomLists[roomCode]);
     delete roomLists[roomCode][client.id];
+    console.log(roomLists[roomCode]);
     //if room empty, delete room from room list
     if (!Object.keys(roomLists[roomCode]).length) {
       delete roomLists[roomCode];
     } else {
       //else emit updated user list
-      io.to(roomCode).emit('updateUserList', roomLists[roomCode]);
+      io.to(roomCode).emit(
+        'updateUserList',
+        Object.values(roomLists[roomCode])
+      );
     }
   });
 
@@ -196,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) => {
