Add sharing bgColor

src/components/drawing/DrawingView.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { drawingActions } from '../../store/slices/drawingSlice';
+import { setDrawingBgColor } from '../../store/actions/drawingActions';
 import { DrawingState } from '../../store/slices/drawingSlice';
 
 import { fabric } from 'fabric';
@@ -411,7 +412,7 @@ const DrawingView = ({ width, height }: DrawingViewProps): JSX.Element => {
 	};
 
 	const handleUseBgColor = (selectedColor: DrawingState['bgColor']) => {
-		dispatch(drawingActions.setDrawingBgColor(selectedColor));
+		dispatch(setDrawingBgColor(selectedColor));
 
 		setCanvas((prevState) => {
 			if (prevState) {

src/store/actions/drawingActions.tsx

@@ -1,5 +1,5 @@
 import { Logger } from '../../utils/Logger';
-import { drawingActions } from '../slices/drawingSlice';
+import { drawingActions, DrawingState } from '../slices/drawingSlice';
 import { AppThunk } from '../store';
 
 const logger = new Logger('DrawingActions');
@@ -41,4 +41,26 @@ AppThunk<Promise<void>> => async (
 	} catch (error) {
 		logger.error('moderator:disableDrawing() [error:"%o"]', error);
 	}
+};
+
+/**
+ * This thunk action set background color of drawing.
+ * 
+ * @returns {AppThunk<Promise<void>>} Promise.
+ */
+export const setDrawingBgColor = (bgColor: DrawingState['bgColor']): 
+AppThunk<Promise<void>> => async (
+	dispatch,
+	getState,
+	{ signalingService }
+): Promise<void> => {
+	logger.debug('setDrawingBgColor()');
+
+	try {
+		await signalingService.sendRequest('setDrawingBgColor', bgColor);
+
+		dispatch(drawingActions.setDrawingBgColor(bgColor));
+	} catch (error) {
+		logger.error('setDrawingBgColor() [error:"%o"]', error);
+	}
 };

src/store/actions/roomActions.tsx

@@ -86,6 +86,7 @@ export const joinRoom = (): AppThunk<Promise<void>> => async (
 			drawingActions.enableDrawing(true) : 
 			drawingActions.disableDrawing(false)
 		);
+		dispatch(drawingActions.setDrawingBgColor(drawing.bgColor));
 	});
 
 	if (!getState().me.audioMuted) dispatch(updateMic());

src/store/middlewares/drawingMiddleware.tsx

@@ -40,6 +40,15 @@ const createDrawingMiddleware = ({
 
 								break;
 							}
+
+							case 'settedDrawingBgColor': {
+
+								const bgColor = notification.data.bgColor;
+
+								dispatch(drawingActions.setDrawingBgColor(bgColor));
+
+								break;
+							}
 						}
 					} catch (error) {
 						logger.error('error on signalService "notification" event [error:%o]', error);