Add communication with server (sharing enabled/disabled state)

src/components/menuitems/Drawing.tsx

@@ -11,6 +11,7 @@ import {
 import { MenuItemProps } from '../floatingmenu/FloatingMenu';
 import MoreActions from '../moreactions/MoreActions';
 import { drawingActions } from '../../store/slices/drawingSlice'; // eslint-disable-line
+import { enableDrawing, disableDrawing } from '../../store/actions/drawingActions'; // eslint-disable-line
 import { permissions } from '../../utils/roles'; // eslint-disable-line
 import DrawingIcon from '@mui/icons-material/Edit';
 // import RemoveDrawingIcon from '@mui/icons-material/Backspace';
@@ -32,9 +33,7 @@ const Drawing = ({
 			// disabled={!hasExtraVideoPermission}
 			onClick={() => {
 				onClick();
-
-				// drawingOpen ? dispatch(unlock()) : dispatch(lock());
-				dispatch(drawingActions.setDrawingEnabled(!drawingEnabled));
+				dispatch(!drawingEnabled ? enableDrawing() : disableDrawing());
 			}}
 		>
 			{ <DrawingIcon /> }

src/store/actions/drawingActions.tsx

@@ -9,24 +9,19 @@ const logger = new Logger('DrawingActions');
  * 
  * @returns {AppThunk<Promise<void>>} Promise.
  */
-export const enableDrawing = (): 
-AppThunk<Promise<void>> => async (
-	dispatch,
-	getState,
-	{ signalingService }
-): Promise<void> => {
+export const enableDrawing = (): AppThunk<Promise<void>> => async (dispatch, getState, { signalingService }): Promise<void> => {
 	logger.debug('moderator:enableDrawing()');
 
 	try {
 		await signalingService.sendRequest('moderator:enableDrawing');
 
-		dispatch(drawingActions.enableDrawing());
+		dispatch(drawingActions.enableDrawing(true));
 	} catch (error) {
 		logger.error('moderator:enableDrawing() [error:"%o"]', error);
 	}
 };
 
-/** 
+/**
  * This thunk action disables the drawing.
  * 
  * @returns {AppThunk<Promise<void>>} Promise.
@@ -42,85 +37,8 @@ AppThunk<Promise<void>> => async (
 	try {
 		await signalingService.sendRequest('moderator:disableDrawing');
 
-		// const peerId = getState().me.id;
-
-		dispatch(drawingActions.disableDrawing());
+		dispatch(drawingActions.disableDrawing(false));
 	} catch (error) {
 		logger.error('moderator:disableDrawing() [error:"%o"]', error);
 	}
-};
-
-/**
- * 
- * This thunk action starts the drawing.
- * 
- * @returns {AppThunk<Promise<void>>} Promise.
- * 
- */
-export const startDrawing = (): 
-AppThunk<Promise<void>> => async (
-	dispatch,
-	getState,
-	{ signalingService }
-): Promise<void> => {
-	logger.debug('startDrawing)');
-
-	try {
-		await signalingService.sendRequest('moderator:startDrawing');
-
-	} catch (error) {
-		logger.error('startDrawing() [error:"%o"]', error);
-	}
-};
-
-/**
- * 
- * This thunk action stops the drawing.
- * 
- * @returns {AppThunk<Promise<void>>} Promise.
- *
- */
-export const stopDrawing = (): 
-AppThunk<Promise<void>> => async (
-	dispatch,
-	getState,
-	{ signalingService }
-): Promise<void> => {
-	logger.debug('stopDrawing()');
-
-	try {
-		await signalingService.sendRequest('moderator:stopDrawing');
-
-	} catch (error) {
-		logger.error('stopDrawing() [error:"%o"]', error);
-	}
-};
-
-/**
- * 
- * This thunk action sets the drawing remaining time.
- * 
- * @param time - Time to set.
- * @returns {AppThunk<Promise<void>>} Promise.
- *
- */
-export const updateDrawing = (time : string): 
-AppThunk<Promise<void>> => async (
-	dispatch,
-	getState,
-	{ signalingService }
-): Promise<void> => {
-	logger.debug('updateDrawing() [time:"%s"]', time);
-
-	try {
-
-		signalingService.sendRequest('moderator:updateDrawing', time);
-
-		// dispatch(drawingActions.updateDrawingRemainingTime(time));
-
-		// dispatch(drawingActions.updateDrawing(time));
-
-	} catch (error) {
-		logger.error('updateDrawing() [error:"%o"]', error);
-	}
 };

src/store/actions/roomActions.tsx

@@ -4,6 +4,7 @@ import { meActions } from '../slices/meSlice';
 import { peersActions } from '../slices/peersSlice';
 import { permissionsActions } from '../slices/permissionsSlice';
 import { roomActions } from '../slices/roomSlice';
+import { drawingActions } from '../slices/drawingSlice';
 import { signalingActions } from '../slices/signalingSlice';
 import { AppThunk, fileService } from '../store';
 import { updateMic, updateWebcam } from './mediaActions';
@@ -62,6 +63,7 @@ export const joinRoom = (): AppThunk<Promise<void>> => async (
 		tracker,
 		chatHistory,
 		fileHistory,
+		drawing,
 		breakoutRooms,
 		locked,
 		lobbyPeers,
@@ -80,6 +82,10 @@ export const joinRoom = (): AppThunk<Promise<void>> => async (
 		dispatch(lobbyPeersActions.addPeers(lobbyPeers));
 		dispatch(roomSessionsActions.addMessages({ sessionId, messages: chatHistory }));
 		dispatch(roomSessionsActions.addFiles({ sessionId, files: fileHistory }));
+		dispatch(drawing.isEnabled ? 
+			drawingActions.enableDrawing(true) : 
+			drawingActions.disableDrawing(false)
+		);
 	});
 
 	if (!getState().me.audioMuted) dispatch(updateMic());

src/store/middlewares/drawingMiddleware.tsx

@@ -0,0 +1,56 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { Logger } from '../../utils/Logger';
+
+import { drawingActions } from '../slices/drawingSlice';
+import { signalingActions } from '../slices/signalingSlice';
+import { AppDispatch, MiddlewareOptions, RootState } from '../store';
+// import { notificationsActions } from '../slices/notificationsSlice';
+// import { drawingFinishedLabel } from '../../components/translated/translatedComponents';
+
+const logger = new Logger('ChatMiddleware');
+
+const createDrawingMiddleware = ({
+	signalingService
+}: MiddlewareOptions): Middleware => {
+	logger.debug('createChatMiddleware()');
+
+	const middleware: Middleware = ({
+		dispatch
+	}: {
+		dispatch: AppDispatch,
+		getState: () => RootState
+	}) =>
+		(next) => (action) => {
+
+			if (signalingActions.connect.match(action)) {
+				signalingService.on('notification', (notification) => {
+					try {
+						switch (notification.method) {
+
+							case 'moderator:enabledDrawing': {
+
+								dispatch(drawingActions.enableDrawing(true));
+
+								break;
+							}
+
+							case 'moderator:disabledDrawing': {
+
+								dispatch(drawingActions.disableDrawing(false));
+
+								break;
+							}
+						}
+					} catch (error) {
+						logger.error('error on signalService "notification" event [error:%o]', error);
+					}
+				});
+			}
+
+			return next(action);
+		};
+
+	return middleware;
+};
+
+export default createDrawingMiddleware;

src/store/slices/drawingSlice.tsx

@@ -48,7 +48,10 @@ const drawingSlice = createSlice({
 	name: 'drawing',
 	initialState,
 	reducers: {
-		setDrawingEnabled: ((state, action: PayloadAction<boolean>) => {
+		enableDrawing: ((state, action: PayloadAction<boolean>) => {
+			state.drawingEnabled = action.payload;
+		}),
+		disableDrawing: ((state, action: PayloadAction<boolean>) => {
 			state.drawingEnabled = action.payload;
 		}),
 		setDrawingTool: ((state, action: PayloadAction<DrawingState['tool']>) => {

src/store/store.tsx

@@ -27,6 +27,7 @@ import createPeerMiddleware from './middlewares/peerMiddleware';
 import createPermissionsMiddleware from './middlewares/permissionsMiddleware';
 import createChatMiddleware from './middlewares/chatMiddleware';
 import createNotificationMiddleware from './middlewares/notificationMiddleware';
+import createDrawingMiddleware from './middlewares/drawingMiddleware';
 import roomSlice from './slices/roomSlice';
 import meSlice from './slices/meSlice';
 import consumersSlice from './slices/consumersSlice';
@@ -150,6 +151,7 @@ export const store = configureStore({
 			createRoomMiddleware(middlewareOptions),
 			createNotificationMiddleware(middlewareOptions),
 			createEffectsMiddleware(middlewareOptions),
+			createDrawingMiddleware(middlewareOptions),
 			...(edumeetConfig.reduxLoggingEnabled ? [ createLogger({
 				duration: true,
 				timestamp: false,