diff --git a/app/actions/remote/groups.ts b/app/actions/remote/groups.ts index f18729a73..53d87ede2 100644 --- a/app/actions/remote/groups.ts +++ b/app/actions/remote/groups.ts @@ -13,7 +13,7 @@ export const fetchGroupsForAutocomplete = async (serverUrl: string, query: strin try { const {operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl); const client: Client = NetworkManager.getClient(serverUrl); - const response = await client.getGroups(query); + const response = await client.getGroups({query, includeMemberCount: true}); return operator.handleGroups({groups: response, prepareRecordsOnly: fetchOnly}); } catch (error) { @@ -30,7 +30,7 @@ export const fetchGroupsByNames = async (serverUrl: string, names: string[], fet const promises: Array > = []; names.forEach((name) => { - promises.push(client.getGroups(name)); + promises.push(client.getGroups({query: name})); }); const groups = (await Promise.all(promises)).flat(); diff --git a/app/client/rest/groups.ts b/app/client/rest/groups.ts index ff7aaa775..9cedf521f 100644 --- a/app/client/rest/groups.ts +++ b/app/client/rest/groups.ts @@ -6,7 +6,7 @@ import {buildQueryString} from '@utils/helpers'; import {PER_PAGE_DEFAULT} from './constants'; export interface ClientGroupsMix { - getGroups: (query?: string, filterAllowReference?: boolean, page?: number, perPage?: number, since?: number) => Promise; + getGroups: (params: {query?: string; filterAllowReference?: boolean; page?: number; perPage?: number; since?: number; includeMemberCount?: boolean}) => Promise; getAllGroupsAssociatedToChannel: (channelId: string, filterAllowReference?: boolean) => Promise<{groups: Group[]; total_group_count: number}>; getAllGroupsAssociatedToMembership: (userId: string, filterAllowReference?: boolean) => Promise; getAllGroupsAssociatedToTeam: (teamId: string, filterAllowReference?: boolean) => Promise<{groups: Group[]; total_group_count: number}>; @@ -16,16 +16,27 @@ export interface ClientGroupsMix { } const ClientGroups = (superclass: any) => class extends superclass { - getGroups = async (query = '', filterAllowReference = true, page = 0, perPage = PER_PAGE_DEFAULT, since = 0) => { + getGroups = async ({query = '', filterAllowReference = true, page = 0, perPage = PER_PAGE_DEFAULT, since = 0, includeMemberCount = false}) => { return this.doFetch( - `${this.urlVersion}/groups${buildQueryString({q: query, filter_allow_reference: filterAllowReference, page, per_page: perPage, since})}`, + `${this.urlVersion}/groups${buildQueryString({ + q: query, + filter_allow_reference: filterAllowReference, + page, + per_page: perPage, + since, + include_member_count: includeMemberCount, + })}`, {method: 'get'}, ); }; getAllGroupsAssociatedToChannel = async (channelId: string, filterAllowReference = false) => { return this.doFetch( - `${this.urlVersion}/channels/${channelId}/groups${buildQueryString({paginate: false, filter_allow_reference: filterAllowReference})}`, + `${this.urlVersion}/channels/${channelId}/groups${buildQueryString({ + paginate: false, + filter_allow_reference: filterAllowReference, + include_member_count: true, + })}`, {method: 'get'}, ); }; diff --git a/app/components/autocomplete/at_mention/at_mention.tsx b/app/components/autocomplete/at_mention/at_mention.tsx index b19044355..b1436395e 100644 --- a/app/components/autocomplete/at_mention/at_mention.tsx +++ b/app/components/autocomplete/at_mention/at_mention.tsx @@ -319,6 +319,7 @@ const AtMention = ({ key={`autocomplete-group-${item.name}`} name={item.name} displayName={item.displayName} + memberCount={item.memberCount} onPress={completeMention} testID='autocomplete.group_mention_item' /> diff --git a/app/components/autocomplete/at_mention_group/at_mention_group.tsx b/app/components/autocomplete/at_mention_group/at_mention_group.tsx index d820bbef7..1bd9880c8 100644 --- a/app/components/autocomplete/at_mention_group/at_mention_group.tsx +++ b/app/components/autocomplete/at_mention_group/at_mention_group.tsx @@ -44,21 +44,34 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { }, rowDisplayName: { color: theme.centerChannelColor, - flexShrink: 5, + flexShrink: 1, ...typography('Body', 200), }, rowName: { ...typography('Body', 200), color: changeOpacity(theme.centerChannelColor, 0.64), - flexShrink: 1, + flexShrink: 2, marginLeft: 2, }, + rowTag: { + ...typography('Heading', 25), + backgroundColor: changeOpacity(theme.centerChannelColor, 0.08), + color: changeOpacity(theme.centerChannelColor, 0.64), + marginLeft: 'auto', + width: 20, + borderRadius: 4, + overflow: 'hidden', + marginTop: 2, + paddingHorizontal: 4, + textAlign: 'center', + }, }; }); type Props = { name: string; displayName: string; + memberCount: number; onPress: (handle: string) => void; testID?: string; } @@ -67,6 +80,7 @@ const GroupMentionItem = ({ onPress, name, displayName, + memberCount, testID, }: Props) => { const insets = useSafeAreaInsets(); @@ -100,16 +114,22 @@ const GroupMentionItem = ({ {`${displayName} `} {`@${name}`} + {`${memberCount >= 100 ? '99+' : memberCount}`} ); };