fix: move whiteboard last state collection to parent component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugnmeet-client",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "author": "Jibon L. Costa",
   "license": "MIT",
   "scripts": {

src/components/main-area/mainComponents.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { createSelector } from '@reduxjs/toolkit';
+import type { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types';
 
 import { RootState, store, useAppDispatch, useAppSelector } from '../../store';
 import ScreenShareElements from '../media-elements/screenshare';
@@ -19,6 +20,8 @@ import {
   updateIsActiveParticipantsPanel,
 } from '../../store/slices/bottomIconsActivitySlice';
 import SpeechToTextService from '../speech-to-text-service';
+import { useCallbackRefState } from '../whiteboard/helpers/hooks/useCallbackRefState';
+import { savePageData } from '../whiteboard/helpers/utils';
 
 interface IMainComponentsProps {
   currentConnection: IConnectLivekit;
@@ -67,6 +70,8 @@ const MainComponents = ({
   const [showVideoElms, setShowVideoElms] = useState<boolean>(false);
   const [isActiveScreenShare, setIsActiveScreenShare] =
     useState<boolean>(false);
+  const [excalidrawAPI, excalidrawRefCallback] =
+    useCallbackRefState<ExcalidrawImperativeAPI>();
 
   useEffect(() => {
     setHasVideoElms(currentConnection.videoSubscribersMap.size > 0);
@@ -127,8 +132,22 @@ const MainComponents = ({
   }, [showVideoElms, isActiveWhiteboard, dispatch]);
 
   const whiteboardElm = useMemo(() => {
+    // if we disable whiteboard during that time we should collect elements from parent component
+    // otherwise if we make it null then we won't be able to get last state
+    if (!isActiveWhiteboard && excalidrawAPI) {
+      const s = store.getState();
+      const isPresenter = s.session.currentUser?.metadata?.is_presenter;
+      // we'll only do it for presenter
+      if (isPresenter) {
+        const lastPage = s.whiteboard.currentPage;
+        savePageData(excalidrawAPI, lastPage);
+      }
+    }
     // for whiteboard, it's better to null not hide
-    return !isActiveScreenShare && isActiveWhiteboard ? <Whiteboard /> : null;
+    return !isActiveScreenShare && isActiveWhiteboard ? (
+      <Whiteboard onReadyExcalidrawAPI={excalidrawRefCallback} />
+    ) : null;
+    //eslint-disable-next-line
   }, [isActiveScreenShare, isActiveWhiteboard]);
 
   // we can't disable to show both external player & link.

src/components/whiteboard/index.tsx

@@ -7,18 +7,15 @@ import {
   MainMenu,
   getSceneVersion,
 } from '@excalidraw/excalidraw';
-// eslint-disable-next-line import/no-unresolved
-import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types';
-import {
+import type { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types';
+import type {
   ExcalidrawImperativeAPI,
   Gesture,
   Collaborator,
   BinaryFileData,
   AppState,
-  // eslint-disable-next-line import/no-unresolved
 } from '@excalidraw/excalidraw/types/types';
 
-import './style.scss';
 import { RootState, store, useAppSelector } from '../../store';
 import { useCallbackRefState } from './helpers/hooks/useCallbackRefState';
 import {
@@ -43,9 +40,14 @@ import ManageFiles from './manageFiles';
 import {
   addPreloadedLibraryItems,
   displaySavedPageData,
-  savePageData,
 } from './helpers/utils';
 
+import './style.scss';
+
+interface WhiteboardProps {
+  onReadyExcalidrawAPI: (excalidrawAPI: ExcalidrawImperativeAPI) => void;
+}
+
 const whiteboardSelector = createSelector(
   (state: RootState) => state.whiteboard,
   (whiteboard) => whiteboard,
@@ -68,7 +70,7 @@ const screenWidthSelector = createSelector(
   (screenWidth) => screenWidth,
 );
 
-const Whiteboard = () => {
+const Whiteboard = ({ onReadyExcalidrawAPI }: WhiteboardProps) => {
   const currentUser = store.getState().session.currentUser;
   const currentRoom = store.getState().session.currentRoom;
   const CURSOR_SYNC_TIMEOUT = 33;
@@ -117,13 +119,6 @@ const Whiteboard = () => {
     ) {
       setViewModeEnabled(false);
     }
-
-    return () => {
-      if (excalidrawAPI && isPresenter) {
-        const lastPage = s.whiteboard.currentPage;
-        savePageData(excalidrawAPI, lastPage);
-      }
-    };
     //eslint-disable-next-line
   }, [excalidrawAPI]);
 
@@ -502,11 +497,20 @@ const Whiteboard = () => {
     );
   };
 
+  const handleOnReadyExcalidrawRef = (
+    value: ExcalidrawImperativeAPI | null,
+  ) => {
+    if (value) {
+      excalidrawRefCallback(value);
+      onReadyExcalidrawAPI(value);
+    }
+  };
+
   return (
     <>
       <div className="excalidraw-wrapper flex-1 w-full max-w-[1200px] m-auto h-[calc(100%-50px)] sm:px-5 mt-9 z-[0]">
         <Excalidraw
-          ref={excalidrawRefCallback as any}
+          ref={handleOnReadyExcalidrawRef}
           onChange={onChange}
           onPointerUpdate={onPointerUpdate}
           viewModeEnabled={viewModeEnabled}