diff --git a/manifest.json b/manifest.json index 85b7167..ddcb602 100644 --- a/manifest.json +++ b/manifest.json @@ -1,5 +1,5 @@ { - "requiredSdkVersion": "~0.0.65", + "requiredSdkVersion": "~0.0.92", "name": "PickRandomUserPlugin", "javascriptEntrypointUrl": "PickRandomUserPlugin.js", "localesBaseUrl": "locales", diff --git a/package-lock.json b/package-lock.json index c01a2d1..0c2fc33 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,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", "path": "^0.12.7", "react": "^18.2.0", "react-chat-elements": "^12.0.14", @@ -3622,9 +3622,9 @@ "license": "MIT" }, "node_modules/bigbluebutton-html-plugin-sdk": { - "version": "0.0.89", - "resolved": "https://registry.npmjs.org/bigbluebutton-html-plugin-sdk/-/bigbluebutton-html-plugin-sdk-0.0.89.tgz", - "integrity": "sha512-KD09jHDaANHkDOFn3dNZtVrgP0OY5RK03m3Nw+LOyuXfg2KTjR9DWgmxU55k6JD5F8bYJ6uw0Zr6MB7jIWusDw==", + "version": "0.0.92", + "resolved": "https://registry.npmjs.org/bigbluebutton-html-plugin-sdk/-/bigbluebutton-html-plugin-sdk-0.0.92.tgz", + "integrity": "sha512-Muw4Yfr3c3tVgWAX4AIEQ3BUmG6tQ8PzLkYvD+5UJ53o87omrQ8Ynm7YPZ8Ioqx72+NhQ/9/oWgYrJxn8tXabw==", "dependencies": { "@apollo/client": "^3.8.7", "@browser-bunyan/console-formatted-stream": "^1.8.0", diff --git a/package.json b/package.json index d0cb46e..4a74484 100644 --- a/package.json +++ b/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", diff --git a/public/locales/en.json b/public/locales/en.json index e15908c..4e772a7 100644 --- a/public/locales/en.json +++ b/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" } diff --git a/public/locales/pt-BR.json b/public/locales/pt-BR.json index 85bfd03..5b4621b 100644 --- a/public/locales/pt-BR.json +++ b/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}" } diff --git a/src/components/modal/presenter-view/component.tsx b/src/components/modal/presenter-view/component.tsx index 18b9adf..930d27c 100644 --- a/src/components/modal/presenter-view/component.tsx +++ b/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) { {`${users?.length} ${userRoleLabel}: `} - {makeHorizontalListOfNames(users)} + {makeHorizontalListOfNames(users, intl)} diff --git a/src/components/pick-random-user/component.tsx b/src/components/pick-random-user/component.tsx index 4a76360..1b8767c 100644 --- a/src/components/pick-random-user/component.tsx +++ b/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(USERS_MORE_INFORMATION); + const allUsersInfo = pluginApi.useUsersBasicInfo(); const { data: allUsers } = allUsersInfo; const { diff --git a/src/components/pick-random-user/queries.ts b/src/components/pick-random-user/queries.ts deleted file mode 100644 index a1c498c..0000000 --- a/src/components/pick-random-user/queries.ts +++ /dev/null @@ -1,12 +0,0 @@ -export const USERS_MORE_INFORMATION = ` -subscription usersMoreInformation { - user { - color - name - userId - role - presenter - avatar - } -} -`; diff --git a/src/components/pick-random-user/types.ts b/src/components/pick-random-user/types.ts index bc5ee58..9d86cf5 100644 --- a/src/components/pick-random-user/types.ts +++ b/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; diff --git a/src/components/pick-random-user/utils.ts b/src/components/pick-random-user/utils.ts index b1053af..05c69fb 100644 --- a/src/components/pick-random-user/utils.ts +++ b/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[], filterOptions: FilterOptionsType, ) => ({