Add sync for clear canvas

Author: Eliza612

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/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) => {

server/server.ts

@@ -191,6 +191,18 @@ io.on('connection', (client) => {
     }
   });
 
+  client.on('clearCanvasAction', async (roomCode: string, userName: string) => {
+    if (roomCode) {
+      // server send clear canvas to everyone in the room if action is from the host
+      if (userName === Object.values(roomLists[roomCode])[0]) {
+        io.to(roomCode).emit(
+          'clear canvas from server',
+          Object.values(roomLists[roomCode])
+        );
+      }
+    }
+  });
+
   client.on(
     'deleteElementAction',
     (roomCode: string, deleteElementData: object) => {