feat: Add new useUsersBasicInfo from latest update in SDK

manifest.json

@@ -1,5 +1,5 @@
 {
-  "requiredSdkVersion": "~0.0.65",
+  "requiredSdkVersion": "~0.0.92",
   "name": "PickRandomUserPlugin",
   "javascriptEntrypointUrl": "PickRandomUserPlugin.js",
   "localesBaseUrl": "locales",

package.json

@@ -10,7 +10,7 @@
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "bigbluebutton-html-plugin-sdk": "0.0.89",
+    "bigbluebutton-html-plugin-sdk": "0.0.92",
     "react-intl": "^6.6.8",
     "path": "^0.12.7",
     "react": "^18.2.0",

public/locales/en.json

@@ -18,5 +18,7 @@
   "pickRandomUserPlugin.modal.presenterView.previouslyPickedSection.pickButtonLabel.pickUser": "Pick {0}",
   "pickRandomUserPlugin.modal.presenterView.previouslyPickedSection.pickButtonLabel.pickAgain": "Pick again",
   "pickRandomUserPlugin.actionsButtonDropdown.label.pickUser": "Pick random user",
-  "pickRandomUserPlugin.actionsButtonDropdown.label.viewLastPickedUser": "Display last randomly picked user"
+  "pickRandomUserPlugin.actionsButtonDropdown.label.viewLastPickedUser": "Display last randomly picked user",
+  "pickRandomUserPlugin.modal.presenterView.previouslyPickedSection.pickButtonLabel.namesListEnding": "and {0} other",
+  "pickRandomUserPlugin.modal.presenterView.previouslyPickedSection.pickButtonLabel.namesListEndingPlural": "and {0} others"
 }

public/locales/pt-BR.json

@@ -16,5 +16,7 @@
   "pickRandomUserPlugin.modal.presenterView.previouslyPickedSection.pickButtonLabel.pickUser": "Selecionar {0}",
   "pickRandomUserPlugin.modal.presenterView.previouslyPickedSection.pickButtonLabel.pickAgain": "Selecionar novamente",
   "pickRandomUserPlugin.actionsButtonDropdown.label.pickUser": "Selecionar usuário aleatório",
-  "pickRandomUserPlugin.actionsButtonDropdown.label.viewLastPickedUser": "Exibir último usuário selecionado aleatoriamente"
+  "pickRandomUserPlugin.actionsButtonDropdown.label.viewLastPickedUser": "Exibir último usuário selecionado aleatoriamente",
+  "pickRandomUserPlugin.modal.presenterView.previouslyPickedSection.pickButtonLabel.namesListEnding": "e outro {0}",
+  "pickRandomUserPlugin.modal.presenterView.previouslyPickedSection.pickButtonLabel.namesListEndingPlural": "e outros {0}"
 }

src/components/modal/presenter-view/component.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RESET_DATA_CHANNEL } from 'bigbluebutton-html-plugin-sdk';
 import { DataChannelEntryResponseType } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/types';
-import { defineMessages } from 'react-intl';
+import { defineMessages, IntlShape } from 'react-intl';
 import { useContext } from 'react';
 
 import * as Styled from './styles';
@@ -80,17 +80,36 @@ const intlMessages = defineMessages({
     description: 'Label of the button to pick another user',
     defaultMessage: 'Pick again',
   },
+  namesListEnding: {
+    id: 'pickRandomUserPlugin.modal.presenterView.previouslyPickedSection.pickButtonLabel.namesListEnding',
+    description: 'End of horizontal list of available users to be picked (singular)',
+    defaultMessage: 'and {0} other.',
+  },
+  namesListEndingPlural: {
+    id: 'pickRandomUserPlugin.modal.presenterView.previouslyPickedSection.pickButtonLabel.namesListEndingPlural',
+    description: 'End of horizontal list of available users to be picked (plural)',
+    defaultMessage: 'and {0} others.',
+  },
 });
 
 const MAX_NAMES_TO_SHOW = 3;
 
-const makeHorizontalListOfNames = (list?: PickedUser[]) => {
+const makeHorizontalListOfNames = (list?: PickedUser[], intl?: IntlShape) => {
   const length = list?.length;
   const formattedList = list?.filter((_, index) => {
     if (length > MAX_NAMES_TO_SHOW) return index < MAX_NAMES_TO_SHOW;
     return true;
   }).reduce((accumulator, currentValue) => ((accumulator !== '') ? `${accumulator}, ${currentValue.name}` : currentValue.name), '');
-  if (length > MAX_NAMES_TO_SHOW) return `${formattedList}...`;
+  if (length > MAX_NAMES_TO_SHOW) {
+    const remainderUsers = length - MAX_NAMES_TO_SHOW;
+    let message;
+    if (remainderUsers > 1) {
+      message = intl.formatMessage(intlMessages.namesListEndingPlural, { 0: remainderUsers });
+    } else {
+      message = intl.formatMessage(intlMessages.namesListEnding, { 0: remainderUsers });
+    }
+    return `${formattedList} ${message}`;
+  }
   return formattedList;
 };
 
@@ -213,7 +232,7 @@ export function PresenterViewComponent(props: PresenterViewComponentProps) {
         </Styled.PresenterViewSectionTitle>
         <Styled.PresenterViewSectionContent>
           {`${users?.length} ${userRoleLabel}: `}
-          {makeHorizontalListOfNames(users)}
+          {makeHorizontalListOfNames(users, intl)}
         </Styled.PresenterViewSectionContent>
       </Styled.PresenterViewSectionWrapper>
       <Styled.PresenterViewSectionWrapper>

src/components/pick-random-user/component.tsx

@@ -13,10 +13,8 @@ import {
   PickRandomUserPluginProps,
   PickedUserSeenEntryDataChannel,
   PickedUser,
-  UsersMoreInformationGraphqlResponse,
 } from './types';
 import { FilterOptionsContext } from './context';
-import { USERS_MORE_INFORMATION } from './queries';
 import { PickUserModal } from '../modal/component';
 import ActionButtonDropdownManager from '../extensible-areas/action-button-dropdown/component';
 import { filterPossibleUsersToBePicked } from './utils';
@@ -38,8 +36,7 @@ function PickRandomUserPlugin({ pluginUuid: uuid }: PickRandomUserPluginProps) {
   const currentUserInfo = pluginApi.useCurrentUser();
   const shouldUnmountPlugin = pluginApi.useShouldUnmountPlugin();
   const { data: currentUser } = currentUserInfo;
-  const allUsersInfo = pluginApi
-    .useCustomSubscription<UsersMoreInformationGraphqlResponse>(USERS_MORE_INFORMATION);
+  const allUsersInfo = pluginApi.useUsersBasicInfo();
   const { data: allUsers } = allUsersInfo;
 
   const {

src/components/pick-random-user/types.ts

@@ -17,10 +17,6 @@ export interface PickRandomUserPluginProps {
     pluginUuid: string,
 }
 
-export interface UsersMoreInformationGraphqlResponse {
-    user: PickedUser[];
-}
-
 export interface PickedUserSeenEntryDataChannel {
     pickedUserId: string;
     seenByUserId: string;

src/components/pick-random-user/utils.ts

@@ -1,13 +1,12 @@
-import { DataChannelEntryResponseType } from 'bigbluebutton-html-plugin-sdk';
+import { DataChannelEntryResponseType, UsersBasicInfoResponseFromGraphqlWrapper } from 'bigbluebutton-html-plugin-sdk';
 import {
   FilterOptionsType,
   PickedUser,
-  UsersMoreInformationGraphqlResponse,
 } from './types';
 import { Role } from './enums';
 
 export const filterPossibleUsersToBePicked = (
-  allUsers: UsersMoreInformationGraphqlResponse,
+  allUsers: UsersBasicInfoResponseFromGraphqlWrapper,
   pickedUserFromDataChannel: DataChannelEntryResponseType<PickedUser>[],
   filterOptions: FilterOptionsType,
 ) => ({