further TS changes

Author: HadriChan

app/src/components/left/RoomsContainer.tsx

@@ -23,6 +23,7 @@ import { io } from 'socket.io-client';
 import store from '../../redux/store';
 //pasted from navbarbuttons
 import debounce from '../../../../node_modules/lodash/debounce.js';
+import { deepEqual } from 'assert';
 
 // // for websockets
 // // Part  - join room and room code functionality
@@ -92,8 +93,9 @@ const RoomsContainer = () => {
     const newState = store.getState();
     const roomCode = newState.roomSlice.roomCode;
 
-    if (newState !== previousState) {
+    if (JSON.stringify(newState) !== JSON.stringify(previousState)) {
       // Send the current state to the server
+      console.log('emit state unequal');
       socket.emit('custom-event', JSON.stringify(newState), roomCode);
       previousState = newState;
     }
@@ -106,7 +108,7 @@ const RoomsContainer = () => {
   });
 
   function joinRoom() {
-    if (userList.length !== 0) setUserList([]); //edge case check if userList not empty.
+    if (userList.length !== 0) dispatch(setUserList([])); //edge case check if userList not empty.
     handleUserEnteredRoom(roomCode); // Call handleUserEnteredRoom when joining a room
     dispatch(setRoomCode(roomCode));
     dispatch(setUserJoined(true)); //setting joined room to true for rendering leave room button

app/src/components/main/Canvas.tsx

@@ -121,7 +121,7 @@ function Canvas(props: {}): JSX.Element {
   });
 
   // Styling for Canvas
-  const defaultCanvasStyle = {
+  const defaultCanvasStyle: React.CSSProperties = {
     width: '100%',
     minHeight: '100%',
     backgroundColor: isOver ? '#191919' : '#191919',
@@ -134,7 +134,10 @@ function Canvas(props: {}): JSX.Element {
   // The render children function renders all direct children of a given component
   // Direct children are draggable/clickable
 
-  const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
+  const canvasStyle: React.CSSProperties = combineStyles(
+    defaultCanvasStyle,
+    currentComponent.style
+  );
 
   return (
     <div

app/src/components/main/CanvasContainer.tsx

@@ -9,54 +9,45 @@ import { Button } from '@mui/material';
 // The CanvasContainer sets the boundaries on the width/height of the canvas
 function CanvasContainer(props): JSX.Element {
   const [theme, setTheme] = useState('solarized_light'); // theme for ACE editor, taken from BottomTabs
-  const { state } = useSelector(
-    (store: RootState) => ({
-      state: store.appState,
-    })
-  );
+  const { state } = useSelector((store: RootState) => ({
+    state: store.appState
+  }));
   const dispatch = useDispatch();
 
   // onClickCodePreview swaps the rendered component from the canvas to the code preview editor
   const onClickCodePreview = () => {
     dispatch(toggleCodePreview());
-  }
+  };
 
-  const canvasContainerStyle = {
+  const canvasContainerStyle: React.CSSProperties = {
     width: '100%',
     backgroundColor: 'lightgrey',
     border: '2px solid grey',
     borderBottom: 'none',
-    overflow: 'auto',    
+    overflow: 'auto'
   };
 
-  const codePreviewStyle = {
+  const codePreviewStyle: React.CSSProperties = {
     position: 'fixed',
     width: 'max-content',
     height: 'max-content',
-    bottom: '100px', 
-    right: '51vw', 
+    bottom: '100px',
+    right: '51vw',
     textAlign: 'center',
-    color: '#ffffff', 
+    color: '#ffffff',
     backgroundColor: '#151515',
     zIndex: 0,
     border: '2px solid #186BB4'
- 
-    
-    
   } as const;
 
   return (
     <div style={canvasContainerStyle}>
-      {state.codePreview && <CodePreview theme={theme} setTheme={setTheme}/>}
-      {!state.codePreview && <Canvas isThemeLight={props.isThemeLight}/>}
-     
-      <Button
-        style={codePreviewStyle}
-        onClick={onClickCodePreview}
-      >
+      {state.codePreview && <CodePreview theme={theme} setTheme={setTheme} />}
+      {!state.codePreview && <Canvas isThemeLight={props.isThemeLight} />}
+
+      <Button style={codePreviewStyle} onClick={onClickCodePreview}>
         Code Preview
       </Button>
-     
     </div>
   );
 }

package-lock.json

@@ -135,6 +135,7 @@
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "d3": "^7.6.1",
+    "deep-equal": "^2.2.3",
     "dotenv": "^16.0.1",
     "electron-debug": "^3.2.0",
     "electron-devtools-installer": "^3.2.0",