moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'group-composer' into 'develop' 

Update Group Members to use Entity Store

See merge request soapbox-pub/soapbox!2342
This commit is contained in:
Chewbacca 2023-03-14 19:31:52 +00:00
parent 7e74e215cc 7070630eaf
commit c6c12fa60f
29 changed files with 868 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/soapbox/components/ui/column/column.tsx
View File

@ -7,10 +7,10 @@ import { useSoapboxConfig } from 'soapbox/hooks';
import { Card, CardBody, CardHeader, CardTitle } from '../card/card';
type IColumnHeader = Pick<IColumn, 'label' | 'backHref' |'className'>;
type IColumnHeader = Pick<IColumn, 'label' | 'backHref' | 'className' | 'action'>;
/** Contains the column title with optional back button. */
const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, className }) => {
const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, className, action }) => {
const history = useHistory();
const handleBackClick = () => {
@ -29,6 +29,12 @@ const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, className }) =
return (
<CardHeader className={className} onBackClick={handleBackClick}>
<CardTitle title={label} />
{action && (
<div className='flex grow justify-end'>
{action}
</div>
)}
</CardHeader>
);
};
@ -48,11 +54,12 @@ export interface IColumn {
ref?: React.Ref<HTMLDivElement>
/** Children to display in the column. */
children?: React.ReactNode
action?: React.ReactNode
}
/** A backdrop for the main section of the UI. */
const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
const { backHref, children, label, transparent = false, withHeader = true, className } = props;
const { backHref, children, label, transparent = false, withHeader = true, className, action } = props;
const soapboxConfig = useSoapboxConfig();
return (
@ -75,6 +82,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
label={label}
backHref={backHref}
className={clsx({ 'px-4 pt-4 sm:p-0': transparent })}
action={action}
/>
)}

7
app/soapbox/entity-store/entities.ts Normal file
View File

@ -0,0 +1,7 @@
export enum Entities {
GROUPS = 'Groups',
GROUP_RELATIONSHIPS = 'GroupRelationships',
GROUP_MEMBERSHIPS = 'GroupMemberships',
POPULAR_GROUPS = 'PopularGroups',
SUGGESTED_GROUPS = 'SuggestedGroups',
}

32
app/soapbox/entity-store/hooks/useEntities.ts
View File

@ -14,8 +14,12 @@ import type { RootState } from 'soapbox/store';
type EntityPath = [
/** Name of the entity type for use in the global cache, eg `'Notification'`. */
entityType: string,
/** Name of a particular index of this entity type. You can use empty-string (`''`) if you don't need separate lists. */
listKey: string,
/**
* Name of a particular index of this entity type.
* Multiple params get combined into one string with a `:` separator.
* You can use empty-string (`''`) if you don't need separate lists.
*/
...listKeys: string[],
]
/** Additional options for the hook. */
@ -27,6 +31,8 @@ interface UseEntitiesOpts<TEntity extends Entity> {
* It is 1 minute by default, and can be set to `Infinity` to opt-out of automatic fetching.
*/
staleTime?: number
/** A flag to potentially disable sending requests to the API. */
enabled?: boolean
}
/** A hook for fetching and displaying API entities. */
@ -42,11 +48,16 @@ function useEntities<TEntity extends Entity>(
const dispatch = useAppDispatch();
const getState = useGetState();
const [entityType, listKey] = path;
const [entityType, ...listKeys] = path;
const listKey = listKeys.join(':');
const entities = useAppSelector(state => selectEntities<TEntity>(state, path));
const isEnabled = opts.enabled ?? true;
const isFetching = useListState(path, 'fetching');
const lastFetchedAt = useListState(path, 'lastFetchedAt');
const isFetched = useListState(path, 'fetched');
const isError = !!useListState(path, 'error');
const next = useListState(path, 'next');
const prev = useListState(path, 'prev');
@ -66,6 +77,7 @@ function useEntities<TEntity extends Entity>(
next: getNextLink(response),
prev: getPrevLink(response),
fetching: false,
fetched: true,
error: null,
lastFetchedAt: new Date(),
}));
@ -95,20 +107,22 @@ function useEntities<TEntity extends Entity>(
const staleTime = opts.staleTime ?? 60000;
useEffect(() => {
if (!isFetching && (!lastFetchedAt || lastFetchedAt.getTime() + staleTime <= Date.now())) {
if (isEnabled && !isFetching && (!lastFetchedAt || lastFetchedAt.getTime() + staleTime <= Date.now())) {
fetchEntities();
}
}, [endpoint]);
}, [endpoint, isEnabled]);
return {
entities,
fetchEntities,
isFetching,
isLoading: isFetching && entities.length === 0,
hasNextPage: !!next,
hasPreviousPage: !!prev,
fetchNextPage,
fetchPreviousPage,
hasNextPage: !!next,
hasPreviousPage: !!prev,
isError,
isFetched,
isFetching,
isLoading: isFetching && entities.length === 0,
};
}

2
app/soapbox/entity-store/types.ts
View File

@ -25,6 +25,8 @@ interface EntityListState {
prev: string | undefined
/** Error returned from the API, if any. */
error: any
/** Whether data has already been fetched */
fetched: boolean
/** Whether data for this list is currently being fetched. */
fetching: boolean
/** Date of the last API fetch for this list. */

3
app/soapbox/entity-store/utils.ts
View File

@ -29,8 +29,9 @@ const createList = (): EntityList => ({
state: {
next: undefined,
prev: undefined,
fetching: false,
error: null,
fetched: false,
fetching: false,
lastFetchedAt: undefined,
},
});

8
app/soapbox/features/group/components/group-header.tsx
View File

@ -118,7 +118,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
</div>
</div>
<Stack alignItems='center' space={3} className='mt-10 py-4'>
<Stack alignItems='center' space={3} className='mx-auto mt-10 w-5/6 py-4'>
<Text
size='xl'
weight='bold'
@ -132,7 +132,11 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
<GroupMemberCount group={group} />
</HStack>
<Text theme='muted' dangerouslySetInnerHTML={{ __html: group.note_emojified }} />
<Text
theme='muted'
align='center'
dangerouslySetInnerHTML={{ __html: group.note_emojified }}
/>
</Stack>
<GroupActionButton group={group} />

218
app/soapbox/features/group/components/group-member-list-item.tsx Normal file
View File

@ -0,0 +1,218 @@
import clsx from 'clsx';
import React, { useMemo } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { groupBlock, groupDemoteAccount, groupKick, groupPromoteAccount } from 'soapbox/actions/groups';
import { openModal } from 'soapbox/actions/modals';
import Account from 'soapbox/components/account';
import { HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import { useAccount, useAppDispatch } from 'soapbox/hooks';
import { BaseGroupRoles, useGroupRoles } from 'soapbox/hooks/useGroupRoles';
import toast from 'soapbox/toast';
import type { Menu as IMenu } from 'soapbox/components/dropdown-menu';
import type { Account as AccountEntity, Group, GroupMember } from 'soapbox/types/entities';
const messages = defineMessages({
blockConfirm: { id: 'confirmations.block_from_group.confirm', defaultMessage: 'Block' },
blockFromGroupMessage: { id: 'confirmations.block_from_group.message', defaultMessage: 'Are you sure you want to block @{name} from interacting with this group?' },
blocked: { id: 'group.group_mod_block.success', defaultMessage: 'Blocked @{name} from group' },
demotedToUser: { id: 'group.group_mod_demote.success', defaultMessage: 'Demoted @{name} to group user' },
groupModBlock: { id: 'group.group_mod_block', defaultMessage: 'Block @{name} from group' },
groupModDemote: { id: 'group.group_mod_demote', defaultMessage: 'Demote @{name}' },
groupModKick: { id: 'group.group_mod_kick', defaultMessage: 'Kick @{name} from group' },
groupModPromoteAdmin: { id: 'group.group_mod_promote_admin', defaultMessage: 'Promote @{name} to group administrator' },
groupModPromoteMod: { id: 'group.group_mod_promote_mod', defaultMessage: 'Promote @{name} to group moderator' },
kickConfirm: { id: 'confirmations.kick_from_group.confirm', defaultMessage: 'Kick' },
kickFromGroupMessage: { id: 'confirmations.kick_from_group.message', defaultMessage: 'Are you sure you want to kick @{name} from this group?' },
kicked: { id: 'group.group_mod_kick.success', defaultMessage: 'Kicked @{name} from group' },
promoteConfirm: { id: 'confirmations.promote_in_group.confirm', defaultMessage: 'Promote' },
promoteConfirmMessage: { id: 'confirmations.promote_in_group.message', defaultMessage: 'Are you sure you want to promote @{name}? You will not be able to demote them.' },
promotedToAdmin: { id: 'group.group_mod_promote_admin.success', defaultMessage: 'Promoted @{name} to group administrator' },
promotedToMod: { id: 'group.group_mod_promote_mod.success', defaultMessage: 'Promoted @{name} to group moderator' },
});
interface IGroupMemberListItem {
member: GroupMember
group: Group
}
const GroupMemberListItem = (props: IGroupMemberListItem) => {
const { member, group } = props;
const dispatch = useAppDispatch();
const intl = useIntl();
const { normalizeRole } = useGroupRoles();
const account = useAccount(member.account.id) as AccountEntity;
// Current user role
const isCurrentUserAdmin = normalizeRole(group.relationship?.role as any) === BaseGroupRoles.ADMIN;
const isCurrentUserModerator = normalizeRole(group.relationship?.role as any) === BaseGroupRoles.MODERATOR;
// Member role
const isMemberAdmin = normalizeRole(member.role as any) === BaseGroupRoles.ADMIN;
const isMemberModerator = normalizeRole(member.role as any) === BaseGroupRoles.MODERATOR;
const isMemberUser = normalizeRole(member.role as any) === BaseGroupRoles.USER;
const handleKickFromGroup = () => {
dispatch(openModal('CONFIRM', {
message: intl.formatMessage(messages.kickFromGroupMessage, { name: account.username }),
confirm: intl.formatMessage(messages.kickConfirm),
onConfirm: () => dispatch(groupKick(group.id, account.id)).then(() =>
toast.success(intl.formatMessage(messages.kicked, { name: account.acct })),
),
}));
};
const handleBlockFromGroup = () => {
dispatch(openModal('CONFIRM', {
message: intl.formatMessage(messages.blockFromGroupMessage, { name: account.username }),
confirm: intl.formatMessage(messages.blockConfirm),
onConfirm: () => dispatch(groupBlock(group.id, account.id)).then(() =>
toast.success(intl.formatMessage(messages.blocked, { name: account.acct })),
),
}));
};
const onPromote = (role: 'admin' | 'moderator', warning?: boolean) => {
if (warning) {
return dispatch(openModal('CONFIRM', {
message: intl.formatMessage(messages.promoteConfirmMessage, { name: account.username }),
confirm: intl.formatMessage(messages.promoteConfirm),
onConfirm: () => dispatch(groupPromoteAccount(group.id, account.id, role)).then(() =>
toast.success(intl.formatMessage(role === 'admin' ? messages.promotedToAdmin : messages.promotedToMod, { name: account.acct })),
),
}));
} else {
return dispatch(groupPromoteAccount(group.id, account.id, role)).then(() =>
toast.success(intl.formatMessage(role === 'admin' ? messages.promotedToAdmin : messages.promotedToMod, { name: account.acct })),
);
}
};
const handlePromoteToGroupAdmin = () => onPromote('admin', true);
const handlePromoteToGroupMod = () => {
onPromote('moderator', group.relationship!.role === 'moderator');
};
const handleDemote = () => {
dispatch(groupDemoteAccount(group.id, account.id, 'user')).then(() =>
toast.success(intl.formatMessage(messages.demotedToUser, { name: account.acct })),
).catch(() => {});
};
const menu: IMenu = useMemo(() => {
const items: IMenu = [];
if (!group || !account || !group.relationship?.role) {
return items;
}
if (
(isCurrentUserAdmin || isCurrentUserModerator) &&
(isMemberModerator || isMemberUser) &&
member.role !== group.relationship.role
) {
items.push({
text: intl.formatMessage(messages.groupModKick, { name: account.username }),
icon: require('@tabler/icons/user-minus.svg'),
action: handleKickFromGroup,
});
items.push({
text: intl.formatMessage(messages.groupModBlock, { name: account.username }),
icon: require('@tabler/icons/ban.svg'),
action: handleBlockFromGroup,
});
}
if (isCurrentUserAdmin && !isMemberAdmin && account.acct === account.username) {
items.push(null);
if (isMemberModerator) {
items.push({
text: intl.formatMessage(messages.groupModPromoteAdmin, { name: account.username }),
icon: require('@tabler/icons/arrow-up-circle.svg'),
action: handlePromoteToGroupAdmin,
});
items.push({
text: intl.formatMessage(messages.groupModDemote, { name: account.username }),
icon: require('@tabler/icons/arrow-down-circle.svg'),
action: handleDemote,
});
} else if (isMemberUser) {
items.push({
text: intl.formatMessage(messages.groupModPromoteMod, { name: account.username }),
icon: require('@tabler/icons/arrow-up-circle.svg'),
action: handlePromoteToGroupMod,
});
}
}
return items;
}, [group, account]);
return (
<HStack alignItems='center' justifyContent='between'>
<div className='w-full'>
<Account account={member.account} withRelationship={false} />
</div>
<HStack alignItems='center' space={2}>
{(isMemberAdmin || isMemberModerator) ? (
<span
className={
clsx('inline-flex items-center rounded px-2 py-1 text-xs font-medium capitalize', {
'bg-primary-200 text-primary-500': isMemberAdmin,
'bg-gray-200 text-gray-900': isMemberModerator,
})
}
>
{member.role}
</span>
) : null}
{menu.length > 0 && (
<Menu>
<MenuButton
as={IconButton}
src={require('@tabler/icons/dots.svg')}
className='px-2'
iconClassName='h-4 w-4'
children={null}
/>
<MenuList className='w-56'>
{menu.map((menuItem, idx) => {
if (typeof menuItem?.text === 'undefined') {
return <MenuDivider key={idx} />;
} else {
const Comp = (menuItem.action ? MenuItem : MenuLink) as any;
const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link, target: menuItem.target || '_self' };
return (
<Comp key={idx} {...itemProps} className='group'>
<HStack space={2} alignItems='center'>
{menuItem.icon && (
<SvgIcon src={menuItem.icon} className='h-4 w-4 flex-none text-gray-700 group-hover:text-gray-800' />
)}
<div className='truncate'>{menuItem.text}</div>
</HStack>
</Comp>
);
}
})}
</MenuList>
</Menu>
)}
</HStack>
</HStack>
);
};
export default GroupMemberListItem;

298
app/soapbox/features/group/group-members.tsx
View File

@ -1,283 +1,59 @@
import debounce from 'lodash/debounce';
import React, { useCallback, useEffect } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import React, { useMemo } from 'react';
import { expandGroupMemberships, fetchGroup, fetchGroupMemberships, groupBlock, groupDemoteAccount, groupKick, groupPromoteAccount } from 'soapbox/actions/groups';
import { openModal } from 'soapbox/actions/modals';
import Account from 'soapbox/components/account';
import ScrollableList from 'soapbox/components/scrollable-list';
import { CardHeader, CardTitle, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
import { makeGetAccount } from 'soapbox/selectors';
import toast from 'soapbox/toast';
import { useGroupMembers } from 'soapbox/hooks/api/useGroupMembers';
import { useGroupRoles } from 'soapbox/hooks/useGroupRoles';
import { useGroup } from 'soapbox/queries/groups';
import PlaceholderAccount from '../placeholder/components/placeholder-account';
import type { Menu as MenuType } from 'soapbox/components/dropdown-menu';
import type { GroupRole, List } from 'soapbox/reducers/group-memberships';
import type { GroupRelationship } from 'soapbox/types/entities';
import GroupMemberListItem from './components/group-member-list-item';
type RouteParams = { id: string };
const messages = defineMessages({
adminSubheading: { id: 'group.admin_subheading', defaultMessage: 'Group administrators' },
moderatorSubheading: { id: 'group.moderator_subheading', defaultMessage: 'Group moderators' },
userSubheading: { id: 'group.user_subheading', defaultMessage: 'Users' },
groupModKick: { id: 'group.group_mod_kick', defaultMessage: 'Kick @{name} from group' },
groupModBlock: { id: 'group.group_mod_block', defaultMessage: 'Block @{name} from group' },
groupModPromoteAdmin: { id: 'group.group_mod_promote_admin', defaultMessage: 'Promote @{name} to group administrator' },
groupModPromoteMod: { id: 'group.group_mod_promote_mod', defaultMessage: 'Promote @{name} to group moderator' },
groupModDemote: { id: 'group.group_mod_demote', defaultMessage: 'Demote @{name}' },
kickFromGroupMessage: { id: 'confirmations.kick_from_group.message', defaultMessage: 'Are you sure you want to kick @{name} from this group?' },
kickConfirm: { id: 'confirmations.kick_from_group.confirm', defaultMessage: 'Kick' },
blockFromGroupMessage: { id: 'confirmations.block_from_group.message', defaultMessage: 'Are you sure you want to block @{name} from interacting with this group?' },
blockConfirm: { id: 'confirmations.block_from_group.confirm', defaultMessage: 'Block' },
promoteConfirmMessage: { id: 'confirmations.promote_in_group.message', defaultMessage: 'Are you sure you want to promote @{name}? You will not be able to demote them.' },
promoteConfirm: { id: 'confirmations.promote_in_group.confirm', defaultMessage: 'Promote' },
kicked: { id: 'group.group_mod_kick.success', defaultMessage: 'Kicked @{name} from group' },
blocked: { id: 'group.group_mod_block.success', defaultMessage: 'Blocked @{name} from group' },
promotedToAdmin: { id: 'group.group_mod_promote_admin.success', defaultMessage: 'Promoted @{name} to group administrator' },
promotedToMod: { id: 'group.group_mod_promote_mod.success', defaultMessage: 'Promoted @{name} to group moderator' },
demotedToUser: { id: 'group.group_mod_demote.success', defaultMessage: 'Demoted @{name} to group user' },
});
interface IGroupMember {
accountId: string
accountRole: GroupRole
groupId: string
relationship?: GroupRelationship
}
const GroupMember: React.FC<IGroupMember> = ({ accountId, accountRole, groupId, relationship }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const getAccount = useCallback(makeGetAccount(), []);
const account = useAppSelector((state) => getAccount(state, accountId));
if (!account) return null;
const handleKickFromGroup = () => {
dispatch(openModal('CONFIRM', {
message: intl.formatMessage(messages.kickFromGroupMessage, { name: account.username }),
confirm: intl.formatMessage(messages.kickConfirm),
onConfirm: () => dispatch(groupKick(groupId, account.id)).then(() =>
toast.success(intl.formatMessage(messages.kicked, { name: account.acct })),
),
}));
};
const handleBlockFromGroup = () => {
dispatch(openModal('CONFIRM', {
message: intl.formatMessage(messages.blockFromGroupMessage, { name: account.username }),
confirm: intl.formatMessage(messages.blockConfirm),
onConfirm: () => dispatch(groupBlock(groupId, account.id)).then(() =>
toast.success(intl.formatMessage(messages.blocked, { name: account.acct })),
),
}));
};
const onPromote = (role: 'admin' | 'moderator', warning?: boolean) => {
if (warning) {
return dispatch(openModal('CONFIRM', {
message: intl.formatMessage(messages.promoteConfirmMessage, { name: account.username }),
confirm: intl.formatMessage(messages.promoteConfirm),
onConfirm: () => dispatch(groupPromoteAccount(groupId, account.id, role)).then(() =>
toast.success(intl.formatMessage(role === 'admin' ? messages.promotedToAdmin : messages.promotedToMod, { name: account.acct })),
),
}));
} else {
return dispatch(groupPromoteAccount(groupId, account.id, role)).then(() =>
toast.success(intl.formatMessage(role === 'admin' ? messages.promotedToAdmin : messages.promotedToMod, { name: account.acct })),
);
}
};
const handlePromoteToGroupAdmin = () => {
onPromote('admin', true);
};
const handlePromoteToGroupMod = () => {
onPromote('moderator', relationship!.role === 'moderator');
};
const handleDemote = () => {
dispatch(groupDemoteAccount(groupId, account.id, 'user')).then(() =>
toast.success(intl.formatMessage(messages.demotedToUser, { name: account.acct })),
).catch(() => {});
};
const makeMenu = () => {
const menu: MenuType = [];
if (!relationship || !relationship.role) return menu;
if (['admin', 'moderator'].includes(relationship.role) && ['moderator', 'user'].includes(accountRole) && accountRole !== relationship.role) {
menu.push({
text: intl.formatMessage(messages.groupModKick, { name: account.username }),
icon: require('@tabler/icons/user-minus.svg'),
action: handleKickFromGroup,
});
menu.push({
text: intl.formatMessage(messages.groupModBlock, { name: account.username }),
icon: require('@tabler/icons/ban.svg'),
action: handleBlockFromGroup,
});
}
if (relationship.role === 'admin' && accountRole !== 'admin' && account.acct === account.username) {
menu.push(null);
switch (accountRole) {
case 'moderator':
menu.push({
text: intl.formatMessage(messages.groupModPromoteAdmin, { name: account.username }),
icon: require('@tabler/icons/arrow-up-circle.svg'),
action: handlePromoteToGroupAdmin,
});
menu.push({
text: intl.formatMessage(messages.groupModDemote, { name: account.username }),
icon: require('@tabler/icons/arrow-down-circle.svg'),
action: handleDemote,
});
break;
case 'user':
menu.push({
text: intl.formatMessage(messages.groupModPromoteMod, { name: account.username }),
icon: require('@tabler/icons/arrow-up-circle.svg'),
action: handlePromoteToGroupMod,
});
break;
}
}
return menu;
};
const menu = makeMenu();
return (
<HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
<div className='w-full'>
<Account account={account} withRelationship={false} />
</div>
{menu.length > 0 && (
<Menu>
<MenuButton
as={IconButton}
src={require('@tabler/icons/dots.svg')}
theme='outlined'
className='px-2'
iconClassName='h-4 w-4'
children={null}
/>
<MenuList className='w-56'>
{menu.map((menuItem, idx) => {
if (typeof menuItem?.text === 'undefined') {
return <MenuDivider key={idx} />;
} else {
const Comp = (menuItem.action ? MenuItem : MenuLink) as any;
const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link, target: menuItem.target || '_self' };
return (
<Comp key={idx} {...itemProps} className='group'>
<HStack space={3} alignItems='center'>
{menuItem.icon && (
<SvgIcon src={menuItem.icon} className='h-5 w-5 flex-none text-gray-400 group-hover:text-gray-500' />
)}
<div className='truncate'>{menuItem.text}</div>
</HStack>
</Comp>
);
}
})}
</MenuList>
</Menu>
)}
</HStack>
);
};
import type { Group } from 'soapbox/types/entities';
interface IGroupMembers {
params: RouteParams
params: { id: string }
}
const GroupMembers: React.FC<IGroupMembers> = (props) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const { roles: { admin, moderator, user } } = useGroupRoles();
const groupId = props.params.id;
const relationship = useAppSelector((state) => state.group_relationships.get(groupId));
const admins = useAppSelector((state) => state.group_memberships.admin.get(groupId));
const moderators = useAppSelector((state) => state.group_memberships.moderator.get(groupId));
const users = useAppSelector((state) => state.group_memberships.user.get(groupId));
const { group, isFetching: isFetchingGroup } = useGroup(groupId);
const { groupMembers: admins, isFetching: isFetchingAdmins } = useGroupMembers(groupId, admin);
const { groupMembers: moderators, isFetching: isFetchingModerators } = useGroupMembers(groupId, moderator);
const { groupMembers: users, isFetching: isFetchingUsers, fetchNextPage, hasNextPage } = useGroupMembers(groupId, user);
const handleLoadMore = (role: 'admin' | 'moderator' | 'user') => {
dispatch(expandGroupMemberships(groupId, role));
};
const isLoading = isFetchingGroup || isFetchingAdmins || isFetchingModerators || isFetchingUsers;
const handleLoadMoreAdmins = useCallback(debounce(() => {
handleLoadMore('admin');
}, 300, { leading: true }), []);
const handleLoadMoreModerators = useCallback(debounce(() => {
handleLoadMore('moderator');
}, 300, { leading: true }), []);
const handleLoadMoreUsers = useCallback(debounce(() => {
handleLoadMore('user');
}, 300, { leading: true }), []);
const renderMemberships = (memberships: List | undefined, role: GroupRole, handler: () => void) => {
if (!memberships?.isLoading && !memberships?.items.count()) return;
return (
<React.Fragment key={role}>
<CardHeader className='mt-4'>
<CardTitle title={intl.formatMessage(messages[`${role}Subheading`])} />
</CardHeader>
<ScrollableList
scrollKey={`group_${role}s-${groupId}`}
hasMore={!!memberships?.next}
onLoadMore={handler}
isLoading={memberships?.isLoading}
showLoading={memberships?.isLoading && !memberships?.items?.count()}
placeholderComponent={PlaceholderAccount}
placeholderCount={3}
itemClassName='pb-4 last:pb-0'
>
{memberships?.items?.map(accountId => (
<GroupMember
key={accountId}
accountId={accountId}
accountRole={role}
groupId={groupId}
relationship={relationship}
/>
))}
</ScrollableList>
</React.Fragment>
);
};
useEffect(() => {
dispatch(fetchGroup(groupId));
dispatch(fetchGroupMemberships(groupId, 'admin'));
dispatch(fetchGroupMemberships(groupId, 'moderator'));
dispatch(fetchGroupMemberships(groupId, 'user'));
}, [groupId]);
const members = useMemo(() => [
...admins,
...moderators,
...users,
], [admins, moderators, users]);
return (
<>
{renderMemberships(admins, 'admin', handleLoadMoreAdmins)}
{renderMemberships(moderators, 'moderator', handleLoadMoreModerators)}
{renderMemberships(users, 'user', handleLoadMoreUsers)}
<ScrollableList
scrollKey='group-members'
hasMore={hasNextPage}
onLoadMore={fetchNextPage}
isLoading={isLoading || !group}
showLoading={!group || isLoading && members.length === 0}
placeholderComponent={PlaceholderAccount}
placeholderCount={3}
className='divide-y divide-solid divide-gray-300'
itemClassName='py-3 last:pb-0'
>
{members.map((member) => (
<GroupMemberListItem
group={group as Group}
member={member}
key={member?.account}
/>
))}
</ScrollableList>
</>
);
};

31
app/soapbox/features/group/group-timeline.tsx
View File

@ -5,9 +5,9 @@ import { Link } from 'react-router-dom';
import { groupCompose } from 'soapbox/actions/compose';
import { connectGroupStream } from 'soapbox/actions/streaming';
import { expandGroupTimeline } from 'soapbox/actions/timelines';
import { Avatar, HStack, Stack } from 'soapbox/components/ui';
import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
import ComposeForm from 'soapbox/features/compose/components/compose-form';
import { useAppDispatch, useAppSelector, useOwnAccount } from 'soapbox/hooks';
import { useAppDispatch, useGroup, useOwnAccount } from 'soapbox/hooks';
import Timeline from '../ui/components/timeline';
@ -23,7 +23,9 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
const groupId = props.params.id;
const relationship = useAppSelector((state) => state.group_relationships.get(groupId));
const { group } = useGroup(groupId);
const canComposeGroupStatus = !!account && group?.relationship?.member;
const handleLoadMore = (maxId: string) => {
dispatch(expandGroupTimeline(groupId, { maxId }));
@ -41,9 +43,13 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
};
}, [groupId]);
if (!group) {
return null;
}
return (
<Stack space={2}>
{!!account && relationship?.member && (
{canComposeGroupStatus && (
<div className='border-b border-solid border-gray-200 px-2 py-4 dark:border-gray-800'>
<HStack alignItems='start' space={4}>
<Link to={`/@${account.acct}`}>
@ -59,11 +65,26 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
</HStack>
</div>
)}
<Timeline
scrollKey='group_timeline'
timelineId={`group:${groupId}`}
onLoadMore={handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.group' defaultMessage='There are no posts in this group yet.' />}
emptyMessage={
<Stack space={4} className='py-6' justifyContent='center' alignItems='center'>
<div className='rounded-full bg-gray-200 p-4'>
<Icon
src={require('@tabler/icons/message-2.svg')}
className='h-6 w-6 text-gray-600'
/>
</div>
<Text theme='muted'>
<FormattedMessage id='empty_column.group' defaultMessage='There are no posts in this group yet.' />
</Text>
</Stack>
}
emptyMessageCard={false}
divideType='border'
showGroup={false}
/>

28
app/soapbox/features/groups/components/discover/popular-groups.tsx
View File

@ -1,9 +1,10 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Carousel, Stack, Text } from 'soapbox/components/ui';
import Link from 'soapbox/components/link';
import { Carousel, HStack, Stack, Text } from 'soapbox/components/ui';
import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover';
import { usePopularGroups } from 'soapbox/queries/groups';
import { usePopularGroups } from 'soapbox/hooks/api/usePopularGroups';
import GroupGridItem from './group-grid-item';
@ -15,12 +16,23 @@ const PopularGroups = () => {
return (
<Stack space={4}>
<Text size='xl' weight='bold'>
<FormattedMessage
id='groups.discover.popular.title'
defaultMessage='Popular Groups'
/>
</Text>
<HStack alignItems='center' justifyContent='between'>
<Text size='xl' weight='bold'>
<FormattedMessage
id='groups.discover.popular.title'
defaultMessage='Popular Groups'
/>
</Text>
<Link to='/groups/popular'>
<Text tag='span' weight='medium' size='sm' theme='inherit'>
<FormattedMessage
id='groups.discover.popular.show_more'
defaultMessage='Show More'
/>
</Text>
</Link>
</HStack>
{isEmpty ? (
<Text theme='muted'>

28
app/soapbox/features/groups/components/discover/suggested-groups.tsx
View File

@ -1,9 +1,10 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Carousel, Stack, Text } from 'soapbox/components/ui';
import Link from 'soapbox/components/link';
import { Carousel, HStack, Stack, Text } from 'soapbox/components/ui';
import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover';
import { useSuggestedGroups } from 'soapbox/queries/groups';
import { useSuggestedGroups } from 'soapbox/hooks/api/useSuggestedGroups';
import GroupGridItem from './group-grid-item';
@ -15,12 +16,23 @@ const SuggestedGroups = () => {
return (
<Stack space={4}>
<Text size='xl' weight='bold'>
<FormattedMessage
id='groups.discover.suggested.title'
defaultMessage='Suggested For You'
/>
</Text>
<HStack alignItems='center' justifyContent='between'>
<Text size='xl' weight='bold'>
<FormattedMessage
id='groups.discover.suggested.title'
defaultMessage='Suggested For You'
/>
</Text>
<Link to='/groups/suggested'>
<Text tag='span' weight='medium' size='sm' theme='inherit'>
<FormattedMessage
id='groups.discover.suggested.show_more'
defaultMessage='Show More'
/>
</Text>
</Link>
</HStack>
{isEmpty ? (
<Text theme='muted'>

10
app/soapbox/features/groups/index.tsx
View File

@ -60,9 +60,13 @@ const Groups: React.FC = () => {
return (
<Stack space={4}>
{features.groupsDiscovery && (
<TabBar activeTab={TabItems.MY_GROUPS} />
)}
{canCreateGroup && (
<Button
className='sm:w-fit sm:self-end xl:hidden'
className='xl:hidden'
icon={require('@tabler/icons/circles.svg')}
onClick={createGroup}
theme='secondary'
@ -72,10 +76,6 @@ const Groups: React.FC = () => {
</Button>
)}
{features.groupsDiscovery && (
<TabBar activeTab={TabItems.MY_GROUPS} />
)}
<PendingGroupsRow />
<ScrollableList

114
app/soapbox/features/groups/popular.tsx Normal file
View File

@ -0,0 +1,114 @@
import clsx from 'clsx';
import React, { useCallback, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
import { Column, HStack, Icon } from 'soapbox/components/ui';
import { usePopularGroups } from 'soapbox/hooks/api/usePopularGroups';
import GroupGridItem from './components/discover/group-grid-item';
import GroupListItem from './components/discover/group-list-item';
import type { Group } from 'soapbox/schemas';
const messages = defineMessages({
label: { id: 'groups.popular.label', defaultMessage: 'Popular Groups' },
});
enum Layout {
LIST = 'LIST',
GRID = 'GRID'
}
const GridList: Components['List'] = React.forwardRef((props, ref) => {
const { context, ...rest } = props;
return <div ref={ref} {...rest} className='flex flex-wrap' />;
});
const Popular: React.FC = () => {
const intl = useIntl();
const [layout, setLayout] = useState<Layout>(Layout.LIST);
const { groups, hasNextPage, fetchNextPage } = usePopularGroups();
const handleLoadMore = () => {
if (hasNextPage) {
fetchNextPage();
}
};
const renderGroupList = useCallback((group: Group, index: number) => (
<div
className={
clsx({
'pt-4': index !== 0,
})
}
>
<GroupListItem group={group} withJoinAction />
</div>
), []);
const renderGroupGrid = useCallback((group: Group, index: number) => (
<div className='pb-4'>
<GroupGridItem group={group} />
</div>
), []);
return (
<Column
label={intl.formatMessage(messages.label)}
action={
<HStack alignItems='center'>
<button onClick={() => setLayout(Layout.LIST)}>
<Icon
src={require('@tabler/icons/layout-list.svg')}
className={
clsx('h-5 w-5 text-gray-600', {
'text-primary-600': layout === Layout.LIST,
})
}
/>
</button>
<button onClick={() => setLayout(Layout.GRID)}>
<Icon
src={require('@tabler/icons/layout-grid.svg')}
className={
clsx('h-5 w-5 text-gray-600', {
'text-primary-600': layout === Layout.GRID,
})
}
/>
</button>
</HStack>
}
>
{layout === Layout.LIST ? (
<Virtuoso
useWindowScroll
data={groups}
itemContent={(index, group) => renderGroupList(group, index)}
endReached={handleLoadMore}
/>
) : (
<VirtuosoGrid
useWindowScroll
data={groups}
itemContent={(index, group) => renderGroupGrid(group, index)}
components={{
Item: (props) => (
<div {...props} className='w-1/2 flex-none' />
),
List: GridList,
}}
endReached={handleLoadMore}
/>
)}
</Column>
);
};
export default Popular;

114
app/soapbox/features/groups/suggested.tsx Normal file
View File

@ -0,0 +1,114 @@
import clsx from 'clsx';
import React, { useCallback, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
import { Column, HStack, Icon } from 'soapbox/components/ui';
import { useSuggestedGroups } from 'soapbox/hooks/api/useSuggestedGroups';
import GroupGridItem from './components/discover/group-grid-item';
import GroupListItem from './components/discover/group-list-item';
import type { Group } from 'soapbox/schemas';
const messages = defineMessages({
label: { id: 'groups.popular.label', defaultMessage: 'Suggested Groups' },
});
enum Layout {
LIST = 'LIST',
GRID = 'GRID'
}
const GridList: Components['List'] = React.forwardRef((props, ref) => {
const { context, ...rest } = props;
return <div ref={ref} {...rest} className='flex flex-wrap' />;
});
const Suggested: React.FC = () => {
const intl = useIntl();
const [layout, setLayout] = useState<Layout>(Layout.LIST);
const { groups, hasNextPage, fetchNextPage } = useSuggestedGroups();
const handleLoadMore = () => {
if (hasNextPage) {
fetchNextPage();
}
};
const renderGroupList = useCallback((group: Group, index: number) => (
<div
className={
clsx({
'pt-4': index !== 0,
})
}
>
<GroupListItem group={group} withJoinAction />
</div>
), []);
const renderGroupGrid = useCallback((group: Group, index: number) => (
<div className='pb-4'>
<GroupGridItem group={group} />
</div>
), []);
return (
<Column
label={intl.formatMessage(messages.label)}
action={
<HStack alignItems='center'>
<button onClick={() => setLayout(Layout.LIST)}>
<Icon
src={require('@tabler/icons/layout-list.svg')}
className={
clsx('h-5 w-5 text-gray-600', {
'text-primary-600': layout === Layout.LIST,
})
}
/>
</button>
<button onClick={() => setLayout(Layout.GRID)}>
<Icon
src={require('@tabler/icons/layout-grid.svg')}
className={
clsx('h-5 w-5 text-gray-600', {
'text-primary-600': layout === Layout.GRID,
})
}
/>
</button>
</HStack>
}
>
{layout === Layout.LIST ? (
<Virtuoso
useWindowScroll
data={groups}
itemContent={(index, group) => renderGroupList(group, index)}
endReached={handleLoadMore}
/>
) : (
<VirtuosoGrid
useWindowScroll
data={groups}
itemContent={(index, group) => renderGroupGrid(group, index)}
components={{
Item: (props) => (
<div {...props} className='w-1/2 flex-none' />
),
List: GridList,
}}
endReached={handleLoadMore}
/>
)}
</Column>
);
};
export default Suggested;

2
app/soapbox/features/ui/components/panels/suggested-groups-panel.tsx
View File

@ -3,7 +3,7 @@ import React from 'react';
import { Widget } from 'soapbox/components/ui';
import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item';
import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search';
import { useSuggestedGroups } from 'soapbox/queries/groups';
import { useSuggestedGroups } from 'soapbox/hooks/api/useSuggestedGroups';
const SuggestedGroupsPanel = () => {
const { groups, isFetching, isFetched, isError } = useSuggestedGroups();

4
app/soapbox/features/ui/index.tsx
View File

@ -118,6 +118,8 @@ import {
Events,
Groups,
GroupsDiscover,
GroupsPopular,
GroupsSuggested,
PendingGroupRequests,
GroupMembers,
GroupTimeline,
@ -289,6 +291,8 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
{features.groups && <WrappedRoute path='/groups' exact page={GroupsPage} component={Groups} content={children} />}
{features.groupsDiscovery && <WrappedRoute path='/groups/discover' exact page={GroupsPage} component={GroupsDiscover} content={children} />}
{features.groupsDiscovery && <WrappedRoute path='/groups/popular' exact page={GroupsPendingPage} component={GroupsPopular} content={children} />}
{features.groupsDiscovery && <WrappedRoute path='/groups/suggested' exact page={GroupsPendingPage} component={GroupsSuggested} content={children} />}
{features.groupsPending && <WrappedRoute path='/groups/pending-requests' exact page={GroupsPendingPage} component={PendingGroupRequests} content={children} />}
{features.groups && <WrappedRoute path='/groups/:id' exact page={GroupPage} component={GroupTimeline} content={children} />}
{features.groups && <WrappedRoute path='/groups/:id/members' exact page={GroupPage} component={GroupMembers} content={children} />}

8
app/soapbox/features/ui/util/async-components.ts
View File

@ -550,6 +550,14 @@ export function GroupsDiscover() {
return import(/* webpackChunkName: "features/groups/discover" */'../../groups/discover');
}
export function GroupsPopular() {
return import(/* webpackChunkName: "features/groups/discover" */'../../groups/popular');
}
export function GroupsSuggested() {
return import(/* webpackChunkName: "features/groups/discover" */'../../groups/suggested');
}
export function PendingGroupRequests() {
return import(/* webpackChunkName: "features/groups/discover" */'../../groups/pending-requests');
}

18
app/soapbox/hooks/api/useGroupMembers.ts Normal file
View File

@ -0,0 +1,18 @@
import { Entities } from 'soapbox/entity-store/entities';
import { useEntities } from 'soapbox/entity-store/hooks';
import { GroupMember, groupMemberSchema } from 'soapbox/schemas';
function useGroupMembers(groupId: string, role: string) {
const { entities, ...result } = useEntities<GroupMember>(
[Entities.GROUP_MEMBERSHIPS, groupId, role],
`/api/v1/groups/${groupId}/memberships?role=${role}`,
{ schema: groupMemberSchema },
);
return {
...result,
groupMembers: entities,
};
}
export { useGroupMembers };

33
app/soapbox/hooks/api/usePopularGroups.ts Normal file
View File

@ -0,0 +1,33 @@
import { Entities } from 'soapbox/entity-store/entities';
import { useEntities } from 'soapbox/entity-store/hooks';
import { Group, groupSchema } from 'soapbox/schemas';
import { useFeatures } from '../useFeatures';
import { useGroupRelationships } from '../useGroups';
function usePopularGroups() {
const features = useFeatures();
const { entities, ...result } = useEntities<Group>(
[Entities.POPULAR_GROUPS, ''],
'/api/mock/groups', // '/api/v1/truth/trends/groups'
{
schema: groupSchema,
enabled: features.groupsDiscovery,
},
);
const { relationships } = useGroupRelationships(entities.map(entity => entity.id));
const groups = entities.map((group) => ({
...group,
relationship: relationships[group.id] || null,
}));
return {
...result,
groups,
};
}
export { usePopularGroups };

33
app/soapbox/hooks/api/useSuggestedGroups.ts Normal file
View File

@ -0,0 +1,33 @@
import { Entities } from 'soapbox/entity-store/entities';
import { useEntities } from 'soapbox/entity-store/hooks';
import { Group, groupSchema } from 'soapbox/schemas';
import { useFeatures } from '../useFeatures';
import { useGroupRelationships } from '../useGroups';
function useSuggestedGroups() {
const features = useFeatures();
const { entities, ...result } = useEntities<Group>(
[Entities.SUGGESTED_GROUPS, ''],
'/api/mock/groups', // '/api/v1/truth/suggestions/groups'
{
schema: groupSchema,
enabled: features.groupsDiscovery,
},
);
const { relationships } = useGroupRelationships(entities.map(entity => entity.id));
const groups = entities.map((group) => ({
...group,
relationship: relationships[group.id] || null,
}));
return {
...result,
groups,
};
}
export { useSuggestedGroups };

16
app/soapbox/hooks/useBackend.ts Normal file
View File

@ -0,0 +1,16 @@
import { parseVersion } from 'soapbox/utils/features';
import { useInstance } from './useInstance';
/**
* Get the Backend version.
*
* @returns Backend
*/
const useBackend = () => {
const instance = useInstance();
return parseVersion(instance.version);
};
export { useBackend };

51
app/soapbox/hooks/useGroupRoles.ts Normal file
View File

@ -0,0 +1,51 @@
import { TRUTHSOCIAL } from 'soapbox/utils/features';
import { useBackend } from './useBackend';
enum TruthSocialGroupRoles {
ADMIN = 'owner',
MODERATOR = 'admin',
USER = 'user'
}
enum BaseGroupRoles {
ADMIN = 'admin',
MODERATOR = 'moderator',
USER = 'user'
}
const roleMap = {
[TruthSocialGroupRoles.ADMIN]: BaseGroupRoles.ADMIN,
[TruthSocialGroupRoles.MODERATOR]: BaseGroupRoles.MODERATOR,
[TruthSocialGroupRoles.USER]: BaseGroupRoles.USER,
};
/**
* Returns the correct role name depending on the used backend.
*
* @returns Object
*/
const useGroupRoles = () => {
const version = useBackend();
const isTruthSocial = version.software === TRUTHSOCIAL;
const selectedRoles = isTruthSocial ? TruthSocialGroupRoles : BaseGroupRoles;
const normalizeRole = (role: TruthSocialGroupRoles) => {
if (isTruthSocial) {
return roleMap[role];
}
return role;
};
return {
normalizeRole,
roles: {
admin: selectedRoles.ADMIN,
moderator: selectedRoles.MODERATOR,
user: selectedRoles.USER,
},
};
};
export { useGroupRoles, TruthSocialGroupRoles, BaseGroupRoles };

32
app/soapbox/hooks/useGroups.ts
View File

@ -1,12 +1,20 @@
import { Entities } from 'soapbox/entity-store/entities';
import { useEntities, useEntity } from 'soapbox/entity-store/hooks';
import { groupSchema, Group } from 'soapbox/schemas/group';
import { groupRelationshipSchema, GroupRelationship } from 'soapbox/schemas/group-relationship';
function useGroups() {
const { entities, ...result } = useEntities<Group>(['Group', ''], '/api/v1/groups', { schema: groupSchema });
const { entities, ...result } = useEntities<Group>(
[Entities.GROUPS, ''],
'/api/v1/groups',
{ schema: groupSchema },
);
const { relationships } = useGroupRelationships(entities.map(entity => entity.id));
const groups = entities.map((group) => ({ ...group, relationship: relationships[group.id] || null }));
const groups = entities.map((group) => ({
...group,
relationship: relationships[group.id] || null,
}));
return {
...result,
@ -15,7 +23,11 @@ function useGroups() {
}
function useGroup(groupId: string, refetch = true) {
const { entity: group, ...result } = useEntity<Group>(['Group', groupId], `/api/v1/groups/${groupId}`, { schema: groupSchema, refetch });
const { entity: group, ...result } = useEntity<Group>(
[Entities.GROUPS, groupId],
`/api/v1/groups/${groupId}`,
{ schema: groupSchema, refetch },
);
const { entity: relationship } = useGroupRelationship(groupId);
return {
@ -25,13 +37,21 @@ function useGroup(groupId: string, refetch = true) {
}
function useGroupRelationship(groupId: string) {
return useEntity<GroupRelationship>(['GroupRelationship', groupId], `/api/v1/groups/relationships?id[]=${groupId}`, { schema: groupRelationshipSchema });
return useEntity<GroupRelationship>(
[Entities.GROUP_RELATIONSHIPS, groupId],
`/api/v1/groups/relationships?id[]=${groupId}`,
{ schema: groupRelationshipSchema },
);
}
function useGroupRelationships(groupIds: string[]) {
const q = groupIds.map(id => `id[]=${id}`).join('&');
const endpoint = groupIds.length ? `/api/v1/groups/relationships?${q}` : undefined;
const { entities, ...result } = useEntities<GroupRelationship>(['GroupRelationship', q], endpoint, { schema: groupRelationshipSchema });
const { entities, ...result } = useEntities<GroupRelationship>(
[Entities.GROUP_RELATIONSHIPS, q],
endpoint,
{ schema: groupRelationshipSchema },
);
const relationships = entities.reduce<Record<string, GroupRelationship>>((map, relationship) => {
map[relationship.id] = relationship;
@ -44,4 +64,4 @@ function useGroupRelationships(groupIds: string[]) {
};
}
export { useGroup, useGroups };
export { useGroup, useGroups, useGroupRelationships };

6
app/soapbox/locales/en.json
View File

@ -767,7 +767,6 @@
"gdpr.message": "{siteTitle} uses session cookies, which are essential to the website's functioning.",
"gdpr.title": "{siteTitle} uses cookies",
"getting_started.open_source_notice": "{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).",
"group.admin_subheading": "Group administrators",
"group.cancel_request": "Cancel Request",
"group.group_mod_authorize": "Accept",
"group.group_mod_authorize.success": "Accepted @{name} to group",
@ -793,7 +792,6 @@
"group.leave": "Leave Group",
"group.leave.success": "Left the group",
"group.manage": "Manage Group",
"group.moderator_subheading": "Group moderators",
"group.privacy.locked": "Private",
"group.privacy.public": "Public",
"group.role.admin": "Admin",
@ -801,8 +799,8 @@
"group.tabs.all": "All",
"group.tabs.members": "Members",
"group.upload_banner": "Upload photo",
"group.user_subheading": "Users",
"groups.discover.popular.empty": "Unable to fetch popular groups at this time. Please check back later.",
"groups.discover.popular.show_more": "Show More",
"groups.discover.popular.title": "Popular Groups",
"groups.discover.search.error.subtitle": "Please try again later.",
"groups.discover.search.error.title": "An error occurred",
@ -816,6 +814,7 @@
"groups.discover.search.results.groups": "Groups",
"groups.discover.search.results.member_count": "{members, plural, one {member} other {members}}",
"groups.discover.suggested.empty": "Unable to fetch suggested groups at this time. Please check back later.",
"groups.discover.suggested.show_more": "Show More",
"groups.discover.suggested.title": "Suggested For You",
"groups.empty.subtitle": "Start discovering groups to join or create your own.",
"groups.empty.title": "No Groups yet",
@ -823,6 +822,7 @@
"groups.pending.empty.subtitle": "You have no pending requests at this time.",
"groups.pending.empty.title": "No pending requests",
"groups.pending.label": "Pending Requests",
"groups.popular.label": "Suggested Groups",
"hashtag.column_header.tag_mode.all": "and {additional}",
"hashtag.column_header.tag_mode.any": "or {additional}",
"hashtag.column_header.tag_mode.none": "without {additional}",

46
app/soapbox/queries/groups.ts
View File

@ -149,48 +149,6 @@ const usePendingGroups = () => {
};
};
const usePopularGroups = () => {
const features = useFeatures();
const { fetchGroups } = useGroupsApi();
const getQuery = async () => {
const { groups } = await fetchGroups('/api/v1/truth/trends/groups');
return groups;
};
const queryInfo = useQuery<Group[]>(GroupKeys.popularGroups, getQuery, {
enabled: features.groupsDiscovery,
placeholderData: [],
});
return {
groups: queryInfo.data || [],
...queryInfo,
};
};
const useSuggestedGroups = () => {
const features = useFeatures();
const { fetchGroups } = useGroupsApi();
const getQuery = async () => {
const { groups } = await fetchGroups('/api/v1/truth/suggestions/groups');
return groups;
};
const queryInfo = useQuery<Group[]>(GroupKeys.suggestedGroups, getQuery, {
enabled: features.groupsDiscovery,
placeholderData: [],
});
return {
groups: queryInfo.data || [],
...queryInfo,
};
};
const useGroup = (id: string) => {
const features = useFeatures();
const { fetchGroups } = useGroupsApi();
@ -200,7 +158,7 @@ const useGroup = (id: string) => {
return groups[0];
};
const queryInfo = useQuery(GroupKeys.group(id), getGroup, {
const queryInfo = useQuery<Group>(GroupKeys.group(id), getGroup, {
enabled: features.groups && !!id,
});
@ -256,6 +214,4 @@ export {
useJoinGroup,
useLeaveGroup,
usePendingGroups,
usePopularGroups,
useSuggestedGroups,
};

40
app/soapbox/queries/groups/members.ts Normal file
View File

@ -0,0 +1,40 @@
import { useQuery } from '@tanstack/react-query';
import { useApi } from 'soapbox/hooks';
import { useGroupRoles } from 'soapbox/hooks/useGroupRoles';
import { normalizeAccount } from 'soapbox/normalizers';
const GroupMemberKeys = {
members: (id: string, role: string) => ['group', id, role] as const,
};
const useGroupMembers = (groupId: string, role: ReturnType<typeof useGroupRoles>['roles']['admin']) => {
const api = useApi();
const getQuery = async () => {
const { data } = await api.get(`/api/v1/groups/${groupId}/memberships`, {
params: {
role,
},
});
const result = data.map((member: any) => {
return {
...member,
account: normalizeAccount(member.account),
};
});
return result;
};
return useQuery(
GroupMemberKeys.members(groupId, role),
getQuery,
{
placeholderData: [],
},
);
};
export { useGroupMembers };

26
app/soapbox/schemas/group-member.ts Normal file
View File

@ -0,0 +1,26 @@
import z from 'zod';
enum TruthSocialGroupRoles {
ADMIN = 'owner',
MODERATOR = 'admin',
USER = 'user'
}
enum BaseGroupRoles {
ADMIN = 'admin',
MODERATOR = 'moderator',
USER = 'user'
}
const groupMemberSchema = z.object({
id: z.string(),
account: z.any(),
role: z.union([
z.nativeEnum(TruthSocialGroupRoles),
z.nativeEnum(BaseGroupRoles),
]),
});
type GroupMember = z.infer<typeof groupMemberSchema>;
export { groupMemberSchema, GroupMember };

2
app/soapbox/schemas/index.ts
View File

@ -2,5 +2,7 @@ export { customEmojiSchema } from './custom-emoji';
export type { CustomEmoji } from './custom-emoji';
export { groupSchema } from './group';
export type { Group } from './group';
export { groupMemberSchema } from './group-member';
export type { GroupMember } from './group-member';
export { groupRelationshipSchema } from './group-relationship';
export type { GroupRelationship } from './group-relationship';

1
app/soapbox/types/entities.ts
View File

@ -111,5 +111,6 @@ export {
export type {
Group,
GroupMember,
GroupRelationship,
} from 'soapbox/schemas';