Merge branch 'dev' into brian

Author: BrianYan7

app/src/components/bottom/BottomPanel.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import BottomTabs from './BottomTabs';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
 
 const BottomPanel = (props): JSX.Element => {
   let y: number = 0;
@@ -15,18 +16,17 @@ const BottomPanel = (props): JSX.Element => {
     //Start listeners when the user clicks the bottom panel tab
     document.addEventListener('mousemove', mouseMoveHandler);
     document.addEventListener('mouseup', mouseUpHandler);
-    window.addEventListener('message', handleIframeMessage);//listens for messages from the iframe when the mouse is over it
+    window.addEventListener('message', handleIframeMessage); //listens for messages from the iframe when the mouse is over it
   };
-  
+
   //Interpret the messages from the iframe
   const handleIframeMessage = (e) => {
     if (e.data === 'iframeMouseUp') {
       mouseUpHandler();
-    }else if(e.data.type === 'iframeMouseMove'){
-      mouseMoveHandler(e.data)
+    } else if (e.data.type === 'iframeMouseMove') {
+      mouseMoveHandler(e.data);
     }
-  }    
-
+  };
 
   const mouseMoveHandler = function (e: MouseEvent): void {
     // How far the mouse has been moved
@@ -54,12 +54,21 @@ const BottomPanel = (props): JSX.Element => {
 
   return (
     <>
-    <div className="bottom-panel" id="resize" ref={node}>
-      <div id="resize-drag" onMouseDown={mouseDownHandler} tabIndex={0}>
-        ......
+      <div className="bottom-panel" id="resize" ref={node}>
+        <div
+          id="resize-drag"
+          onMouseDown={mouseDownHandler}
+          onClick={() => props.setBottomShow(true)}
+          tabIndex={0}
+        >
+          {props.bottomShow ? <ExpandMore /> : <ExpandLess />}
+        </div>
+        <BottomTabs
+          setBottomShow={props.setBottomShow}
+          isThemeLight={props.isThemeLight}
+        />
       </div>
-      <BottomTabs setBottomShow = {props.setBottomShow} isThemeLight={props.isThemeLight} />
-    </div></>
+    </>
   );
 };
 

app/src/components/bottom/BottomTabs.tsx

@@ -57,7 +57,7 @@ const BottomTabs = (props): JSX.Element => {
         zIndex: 1,
         borderTop: '2px solid grey'
       }}
-      onMouseOver={() => {
+      onClick={() => {
         props.setBottomShow(true);
       }}
     >

app/src/components/left/RoomsContainer.tsx

@@ -28,6 +28,7 @@ import {
   addPassedInProps,
   deletePassedInProps,
   deleteElement,
+  resetAllState,
   updateStylesheet
 } from '../../redux/reducers/slice/appStateSlice';
 import {
@@ -132,6 +133,11 @@ const RoomsContainer = () => {
         }
       );
 
+      // dispatch clear canvas action to local state when the host of the room has clear canvas
+      socket.on('clear canvas from server', () => {
+        store.dispatch(resetAllState());
+      });
+
       // dispatch all updates to local state when another user has saved from Bottom Panel
       socket.on('update data from server', (updateData: BottomPanelObj) => {
         // console.log('update data received from server', updateData);

app/src/components/top/NavBarButtons.tsx

@@ -21,6 +21,7 @@ import { resetAllState } from '../../redux/reducers/slice/appStateSlice';
 import { setStyle } from '../../redux/reducers/slice/styleSlice';
 import store from '../../redux/store';
 import withStyles from '@mui/styles/withStyles';
+import { emitEvent } from '../../helperFunctions/socket';
 
 const { API_BASE_URL } = config;
 
@@ -97,6 +98,8 @@ function navbarDropDown(props) {
   //   state: store.appState
   // }));
   const state = useSelector((store: RootState) => store.appState);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
+  const userName = useSelector((store: RootState) => store.roomSlice.userName);
 
   const closeModal = () => setModal('');
   const handleClick = (event) => {
@@ -106,7 +109,8 @@ function navbarDropDown(props) {
   const clearWorkspace = () => {
     // Reset state for project to initial state
     const resetState = () => {
-      dispatch(resetAllState());
+      if (roomCode) emitEvent('clearCanvasAction', roomCode, userName);
+      else dispatch(resetAllState());
     };
     // Set modal options
     const children = (
@@ -129,6 +133,7 @@ function navbarDropDown(props) {
         </ListItem>
       </List>
     );
+
     // Create modal
     setModal(
       createModal({

app/src/containers/MainContainer.tsx

@@ -119,6 +119,7 @@ const MainContainer = (props): JSX.Element => {
       </div>
       <div className={showPanel} ref={ref}>
         <BottomPanel
+          bottomShow={bottomShow}
           setBottomShow={setBottomShow}
           isThemeLight={props.isThemeLight}
         />

app/src/redux/store.ts

@@ -3,14 +3,6 @@ import { configureStore } from '@reduxjs/toolkit';
 // Import of combined reducers in rootReducer
 import rootReducer from './reducers/rootReducer';
 
-/*
-// Define the root state type based on the rootReducer
-export type RootState = ReturnType<typeof rootReducer>;
-
-// Define the type of the Redux store
-export type AppStore = Store<RootState>;
-*/
-
 const store = configureStore({
   reducer: rootReducer,
   middleware: (getDefaultMiddleware) => {