Merge pull request #25 from GuiLeme/issue-10

fix: fix problem when new user comes in, modal pops up
bigbluebutton · Nov 12, 2024 · 3362d98 · 3362d98
2 parents 94ff3b7 + e3c8eea
commit 3362d98
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 42 deletions.
diff --git a/src/components/extensible-areas/action-button-dropdown/component.tsx b/src/components/extensible-areas/action-button-dropdown/component.tsx
@@ -6,7 +6,7 @@ import { ActionButtonDropdownManagerProps } from './types';
 
 function ActionButtonDropdownManager(props: ActionButtonDropdownManagerProps): React.ReactNode {
   const {
-    pickedUser,
+    pickedUserWithEntryId,
     currentUser,
     pluginApi,
     setShowModal,
@@ -27,7 +27,7 @@ function ActionButtonDropdownManager(props: ActionButtonDropdownManagerProps): R
           },
         }),
       ]);
-    } else if (!currentUser?.presenter && pickedUser) {
+    } else if (!currentUser?.presenter && pickedUserWithEntryId) {
       pluginApi.setActionButtonDropdownItems([
         new ActionButtonDropdownSeparator(),
         new ActionButtonDropdownOption({
@@ -43,7 +43,7 @@ function ActionButtonDropdownManager(props: ActionButtonDropdownManagerProps): R
     } else {
       pluginApi.setActionButtonDropdownItems([]);
     }
-  }, [currentUserInfo, pickedUser]);
+  }, [currentUserInfo, pickedUserWithEntryId]);
   return null;
 }
 

diff --git a/src/components/extensible-areas/action-button-dropdown/types.ts b/src/components/extensible-areas/action-button-dropdown/types.ts
@@ -1,8 +1,8 @@
 import { CurrentUserData, GraphqlResponseWrapper, PluginApi } from 'bigbluebutton-html-plugin-sdk';
-import { PickedUser } from '../../pick-random-user/types';
+import { PickedUserWithEntryId } from '../../pick-random-user/types';
 
 export interface ActionButtonDropdownManagerProps {
-    pickedUser: PickedUser;
+    pickedUserWithEntryId: PickedUserWithEntryId;
     currentUser: CurrentUserData;
     pluginApi: PluginApi;
     setShowModal: React.Dispatch<React.SetStateAction<boolean>>;

diff --git a/src/components/modal/component.tsx b/src/components/modal/component.tsx
@@ -11,7 +11,8 @@ export function PickUserModal(props: PickUserModalProps) {
     showModal,
     handleCloseModal,
     users,
-    pickedUser,
+    updatePickedRandomUser,
+    pickedUserWithEntryId,
     handlePickRandomUser,
     currentUser,
     filterOutPresenter,
@@ -31,16 +32,16 @@ export function PickUserModal(props: PickUserModalProps) {
   } else {
     userRole = (users?.length !== 1) ? 'users' : 'user';
   }
-  const title = (pickedUser?.userId === currentUser?.userId)
+  const title = (pickedUserWithEntryId?.pickedUser?.userId === currentUser?.userId)
     ? 'You have been randomly picked'
     : 'Randomly picked user';
 
   const [showPresenterView, setShowPresenterView] = useState<boolean>(
-    currentUser?.presenter && !pickedUser,
+    currentUser?.presenter && !pickedUserWithEntryId,
   );
   useEffect(() => {
-    setShowPresenterView(currentUser?.presenter && !pickedUser);
-  }, [currentUser, pickedUser]);
+    setShowPresenterView(currentUser?.presenter && !pickedUserWithEntryId);
+  }, [currentUser, pickedUserWithEntryId]);
   return (
     <ReactModal
       className="plugin-modal"
@@ -59,6 +60,7 @@ export function PickUserModal(props: PickUserModalProps) {
           onClick={() => {
             handleCloseModal();
           }}
+          aria-label="Close button"
         >
           <i
             className="icon-bbb-close"
@@ -79,7 +81,7 @@ export function PickUserModal(props: PickUserModalProps) {
                 deletionFunction,
                 handlePickRandomUser,
                 dataChannelPickedUsers,
-                pickedUser,
+                pickedUserWithEntryId,
                 users,
                 userRole,
                 dispatcherPickedUser,
@@ -88,8 +90,9 @@ export function PickUserModal(props: PickUserModalProps) {
           ) : (
             <PickedUserViewComponent
               {...{
-                pickedUser,
+                pickedUserWithEntryId,
                 title,
+                updatePickedRandomUser,
                 currentUser,
                 setShowPresenterView,
                 dispatcherPickedUser,

diff --git a/src/components/modal/picked-user-view/component.tsx b/src/components/modal/picked-user-view/component.tsx
@@ -4,12 +4,30 @@ import { PickedUserViewComponentProps } from './types';
 export function PickedUserViewComponent(props: PickedUserViewComponentProps) {
   const {
     title,
-    pickedUser,
+    pickedUserWithEntryId,
     currentUser,
+    updatePickedRandomUser,
     setShowPresenterView,
     dispatcherPickedUser,
   } = props;
 
+  React.useEffect(() => {
+    if (currentUser?.presenter) {
+      updatePickedRandomUser(pickedUserWithEntryId.entryId, {
+        ...pickedUserWithEntryId.pickedUser,
+        isPresenterViewing: true,
+      });
+    }
+    return () => {
+      if (currentUser?.presenter) {
+        updatePickedRandomUser(pickedUserWithEntryId.entryId, {
+          ...pickedUserWithEntryId.pickedUser,
+          isPresenterViewing: false,
+        });
+      }
+    };
+  }, []);
+
   const handleBackToPresenterView = () => {
     if (currentUser?.presenter) {
       setShowPresenterView(true);
@@ -24,15 +42,15 @@ export function PickedUserViewComponent(props: PickedUserViewComponentProps) {
     >
       <h1 className="title">{title}</h1>
       {
-        (pickedUser) ? (
+        (pickedUserWithEntryId) ? (
           <>
             <div
               className="modal-avatar"
-              style={{ backgroundColor: `${pickedUser?.color}` }}
+              style={{ backgroundColor: `${pickedUserWithEntryId.pickedUser?.color}` }}
             >
-              {pickedUser?.name.slice(0, 2)}
+              {pickedUserWithEntryId.pickedUser?.name.slice(0, 2)}
             </div>
-            <p className="user-name">{pickedUser?.name}</p>
+            <p className="user-name">{pickedUserWithEntryId.pickedUser?.name}</p>
           </>
         ) : null
       }

diff --git a/src/components/modal/picked-user-view/types.ts b/src/components/modal/picked-user-view/types.ts
@@ -1,10 +1,11 @@
 import { CurrentUserData } from 'bigbluebutton-html-plugin-sdk';
-import { PushEntryFunction } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/types';
-import { PickedUser } from '../../pick-random-user/types';
+import { PushEntryFunction, ReplaceEntryFunction } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/types';
+import { PickedUser, PickedUserWithEntryId } from '../../pick-random-user/types';
 
 export interface PickedUserViewComponentProps {
     title: string;
-    pickedUser: PickedUser;
+    updatePickedRandomUser: ReplaceEntryFunction<PickedUser>;
+    pickedUserWithEntryId: PickedUserWithEntryId;
     currentUser: CurrentUserData;
     setShowPresenterView: React.Dispatch<React.SetStateAction<boolean>>;
     dispatcherPickedUser: PushEntryFunction

diff --git a/src/components/modal/presenter-view/component.tsx b/src/components/modal/presenter-view/component.tsx
@@ -45,7 +45,7 @@ export function PresenterViewComponent(props: PresenterViewComponentProps) {
     deletionFunction,
     handlePickRandomUser,
     dataChannelPickedUsers,
-    pickedUser,
+    pickedUserWithEntryId,
     users,
     userRole,
   } = props;
@@ -140,7 +140,7 @@ export function PresenterViewComponent(props: PresenterViewComponentProps) {
             }}
           >
             {
-            (pickedUser) ? 'Pick again' : `Pick ${userRole}`
+            (pickedUserWithEntryId) ? 'Pick again' : `Pick ${userRole}`
             }
           </button>
         ) : (

diff --git a/src/components/modal/presenter-view/types.ts b/src/components/modal/presenter-view/types.ts
@@ -1,6 +1,6 @@
 import { DataChannelEntryResponseType } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/types';
 import { DeleteEntryFunction } from 'bigbluebutton-html-plugin-sdk';
-import { PickedUser } from '../../pick-random-user/types';
+import { PickedUser, PickedUserWithEntryId } from '../../pick-random-user/types';
 
 export interface PresenterViewComponentProps {
     filterOutPresenter: boolean;
@@ -12,7 +12,7 @@ export interface PresenterViewComponentProps {
     deletionFunction: DeleteEntryFunction;
     handlePickRandomUser: () => void;
     dataChannelPickedUsers?: DataChannelEntryResponseType<PickedUser>[];
-    pickedUser: PickedUser;
+    pickedUserWithEntryId: PickedUserWithEntryId;
     users?: PickedUser[];
     userRole: string;
 }
diff --git a/src/components/modal/types.ts b/src/components/modal/types.ts
@@ -1,12 +1,13 @@
 import { CurrentUserData, DeleteEntryFunction } from 'bigbluebutton-html-plugin-sdk';
-import { DataChannelEntryResponseType, PushEntryFunction } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/types';
-import { PickedUser } from '../pick-random-user/types';
+import { DataChannelEntryResponseType, PushEntryFunction, ReplaceEntryFunction } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/types';
+import { PickedUser, PickedUserWithEntryId } from '../pick-random-user/types';
 
 export interface PickUserModalProps {
   showModal: boolean;
+  updatePickedRandomUser: ReplaceEntryFunction<PickedUser>;
   handleCloseModal: () => void;
   users?: PickedUser[];
-  pickedUser: PickedUser;
+  pickedUserWithEntryId: PickedUserWithEntryId;
   handlePickRandomUser: () => void;
   currentUser: CurrentUserData;
   filterOutPresenter: boolean,

diff --git a/src/components/pick-random-user/component.tsx b/src/components/pick-random-user/component.tsx
@@ -6,6 +6,7 @@ import {
   ModalInformationFromPresenter,
   PickRandomUserPluginProps,
   PickedUser,
+  PickedUserWithEntryId,
   UsersMoreInformationGraphqlResponse,
 } from './types';
 import { USERS_MORE_INFORMATION } from './queries';
@@ -16,7 +17,9 @@ import ActionButtonDropdownManager from '../extensible-areas/action-button-dropd
 function PickRandomUserPlugin({ pluginUuid: uuid }: PickRandomUserPluginProps) {
   BbbPluginSdk.initialize(uuid);
   const [showModal, setShowModal] = useState<boolean>(false);
-  const [pickedUser, setPickedUser] = useState<PickedUser | undefined>();
+  const [
+    pickedUserWithEntryId,
+    setPickedUserWithEntryId] = useState<PickedUserWithEntryId | undefined>();
   const [userFilterViewer, setUserFilterViewer] = useState<boolean>(true);
   const [filterOutPresenter, setFilterOutPresenter] = useState<boolean>(true);
   const [filterOutPickedUsers, setFilterOutPickedUsers] = useState<boolean>(true);
@@ -30,6 +33,7 @@ function PickRandomUserPlugin({ pluginUuid: uuid }: PickRandomUserPluginProps) {
   const {
     data: pickedUserFromDataChannelResponse,
     pushEntry: pushPickedUser,
+    replaceEntry: updatePickedRandomUser,
     deleteEntry: deletePickedUser,
   } = pluginApi.useDataChannel<PickedUser>('pickRandomUser');
   const {
@@ -97,18 +101,25 @@ function PickRandomUserPlugin({ pluginUuid: uuid }: PickRandomUserPluginProps) {
       && pickedUserFromDataChannel.data?.length > 0) {
       const pickedUserToUpdate = pickedUserFromDataChannel
         .data[0];
-      setPickedUser(pickedUserToUpdate?.payloadJson);
-      if (pickedUserToUpdate?.payloadJson) setShowModal(true);
+      if (pickedUserToUpdate?.entryId !== pickedUserWithEntryId?.entryId) {
+        setPickedUserWithEntryId({
+          pickedUser: pickedUserToUpdate?.payloadJson,
+          entryId: pickedUserToUpdate.entryId,
+        });
+      }
+      if (pickedUserToUpdate?.payloadJson && pickedUserToUpdate?.payloadJson.isPresenterViewing) {
+        setShowModal(true);
+      }
     } else if (pickedUserFromDataChannel.data
         && pickedUserFromDataChannel.data?.length === 0) {
-      setPickedUser(null);
+      setPickedUserWithEntryId(null);
       if (currentUser && !currentUser.presenter) setShowModal(false);
     }
   }, [pickedUserFromDataChannelResponse]);
 
   useEffect(() => {
-    if (!pickedUser && !currentUser?.presenter) setShowModal(false);
-  }, [pickedUser]);
+    if (!pickedUserWithEntryId && !currentUser?.presenter) setShowModal(false);
+  }, [pickedUserWithEntryId]);
 
   useEffect(() => {
     if (!currentUser?.presenter && dispatchModalInformationFromPresenter) handleCloseModal();
@@ -120,7 +131,7 @@ function PickRandomUserPlugin({ pluginUuid: uuid }: PickRandomUserPluginProps) {
           showModal,
           handleCloseModal,
           users: usersToBePicked?.user,
-          pickedUser,
+          pickedUserWithEntryId,
           handlePickRandomUser,
           currentUser,
           filterOutPresenter,
@@ -130,13 +141,14 @@ function PickRandomUserPlugin({ pluginUuid: uuid }: PickRandomUserPluginProps) {
           filterOutPickedUsers,
           setFilterOutPickedUsers,
           dataChannelPickedUsers: pickedUserFromDataChannel.data,
+          updatePickedRandomUser,
           dispatcherPickedUser: pushPickedUser,
           deletionFunction: deletePickedUser,
         }}
       />
       <ActionButtonDropdownManager
         {...{
-          pickedUser,
+          pickedUserWithEntryId,
           currentUser,
           pluginApi,
           setShowModal,

diff --git a/src/components/pick-random-user/types.ts b/src/components/pick-random-user/types.ts
@@ -1,11 +1,17 @@
 export interface PickedUser {
+    isPresenterViewing: boolean;
     presenter: boolean;
     userId: string;
     name: string;
     role: string;
     color: string;
 }
 
+export interface PickedUserWithEntryId {
+    pickedUser: PickedUser;
+    entryId: string;
+}
+
 export interface PickRandomUserPluginProps {
     pluginName: string,
     pluginUuid: string,

diff --git a/src/index.tsx b/src/index.tsx
@@ -8,11 +8,9 @@ const pluginName = document.currentScript?.getAttribute('pluginName') || 'plugin
 
 const root = ReactDOM.createRoot(document.getElementById(uuid));
 root.render(
-  <React.StrictMode>
-    <PickRandomUserPlugin {...{
-      pluginUuid: uuid,
-      pluginName,
-    }}
-    />
-  </React.StrictMode>,
+  <PickRandomUserPlugin {...{
+    pluginUuid: uuid,
+    pluginName,
+  }}
+  />,
 );