From 17757ea326649e710bff04d5ec95f8d0047f6a39 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 12 Apr 2023 15:39:41 -0500 Subject: [PATCH 1/8] Add useEntityLookup hook --- app/soapbox/entity-store/hooks/useEntity.ts | 1 + .../entity-store/hooks/useEntityLookup.ts | 66 +++++++++++++++++++ 2 files changed, 67 insertions(+) create mode 100644 app/soapbox/entity-store/hooks/useEntityLookup.ts diff --git a/app/soapbox/entity-store/hooks/useEntity.ts b/app/soapbox/entity-store/hooks/useEntity.ts index 37027f73f..63447ae67 100644 --- a/app/soapbox/entity-store/hooks/useEntity.ts +++ b/app/soapbox/entity-store/hooks/useEntity.ts @@ -59,4 +59,5 @@ function useEntity( export { useEntity, + type UseEntityOpts, }; \ No newline at end of file diff --git a/app/soapbox/entity-store/hooks/useEntityLookup.ts b/app/soapbox/entity-store/hooks/useEntityLookup.ts new file mode 100644 index 000000000..ab0ea0b41 --- /dev/null +++ b/app/soapbox/entity-store/hooks/useEntityLookup.ts @@ -0,0 +1,66 @@ +import { useEffect } from 'react'; +import { z } from 'zod'; + +import { useAppDispatch, useAppSelector, useLoading } from 'soapbox/hooks'; +import { type RootState } from 'soapbox/store'; + +import { importEntities } from '../actions'; +import { Entity } from '../types'; + +import { EntityFn } from './types'; +import { type UseEntityOpts } from './useEntity'; + +/** Entities will be filtered through this function until it returns true. */ +type LookupFn = (entity: TEntity) => boolean + +function useEntityLookup( + entityType: string, + lookupFn: LookupFn, + entityFn: EntityFn, + opts: UseEntityOpts = {}, +) { + const { schema = z.custom() } = opts; + + const dispatch = useAppDispatch(); + const [isFetching, setPromise] = useLoading(true); + + const entity = useAppSelector(state => findEntity(state, entityType, lookupFn)); + const isLoading = isFetching && !entity; + + const fetchEntity = async () => { + try { + const response = await setPromise(entityFn()); + const entity = schema.parse(response.data); + dispatch(importEntities([entity], entityType)); + } catch (e) { + // do nothing + } + }; + + useEffect(() => { + if (!entity || opts.refetch) { + fetchEntity(); + } + }, []); + + return { + entity, + fetchEntity, + isFetching, + isLoading, + }; +} + +function findEntity( + state: RootState, + entityType: string, + lookupFn: LookupFn, +) { + const cache = state.entities[entityType]; + + if (cache) { + return (Object.values(cache.store) as TEntity[]).find(lookupFn); + } +} + +export default useEntityLookup; \ No newline at end of file From 4e822a80dd66fb4b616ce3d3a36d1cc32c5ca59f Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 12 Apr 2023 15:51:30 -0500 Subject: [PATCH 2/8] Add useGroupLookup hook --- app/soapbox/entity-store/hooks/index.ts | 1 + .../entity-store/hooks/useEntityLookup.ts | 2 +- app/soapbox/hooks/api/groups/useGroupLookup.ts | 17 +++++++++++++++++ app/soapbox/schemas/group.ts | 1 + 4 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 app/soapbox/hooks/api/groups/useGroupLookup.ts diff --git a/app/soapbox/entity-store/hooks/index.ts b/app/soapbox/entity-store/hooks/index.ts index d113c505a..b95d2d1af 100644 --- a/app/soapbox/entity-store/hooks/index.ts +++ b/app/soapbox/entity-store/hooks/index.ts @@ -1,6 +1,7 @@ export { useEntities } from './useEntities'; export { useEntity } from './useEntity'; export { useEntityActions } from './useEntityActions'; +export { useEntityLookup } from './useEntityLookup'; export { useCreateEntity } from './useCreateEntity'; export { useDeleteEntity } from './useDeleteEntity'; export { useDismissEntity } from './useDismissEntity'; diff --git a/app/soapbox/entity-store/hooks/useEntityLookup.ts b/app/soapbox/entity-store/hooks/useEntityLookup.ts index ab0ea0b41..a49a659a4 100644 --- a/app/soapbox/entity-store/hooks/useEntityLookup.ts +++ b/app/soapbox/entity-store/hooks/useEntityLookup.ts @@ -63,4 +63,4 @@ function findEntity( } } -export default useEntityLookup; \ No newline at end of file +export { useEntityLookup }; \ No newline at end of file diff --git a/app/soapbox/hooks/api/groups/useGroupLookup.ts b/app/soapbox/hooks/api/groups/useGroupLookup.ts new file mode 100644 index 000000000..89c778a15 --- /dev/null +++ b/app/soapbox/hooks/api/groups/useGroupLookup.ts @@ -0,0 +1,17 @@ +import { Entities } from 'soapbox/entity-store/entities'; +import { useEntityLookup } from 'soapbox/entity-store/hooks'; +import { useApi } from 'soapbox/hooks/useApi'; +import { groupSchema } from 'soapbox/schemas'; + +function useGroupLookup(slug: string) { + const api = useApi(); + + return useEntityLookup( + Entities.GROUPS, + (group) => group.slug === slug, + () => api.get(`/api/v1/groups/lookup?name=${slug}`), + { schema: groupSchema }, + ); +} + +export { useGroupLookup }; \ No newline at end of file diff --git a/app/soapbox/schemas/group.ts b/app/soapbox/schemas/group.ts index cd62f5860..827531ee7 100644 --- a/app/soapbox/schemas/group.ts +++ b/app/soapbox/schemas/group.ts @@ -28,6 +28,7 @@ const groupSchema = z.object({ members_count: z.number().catch(0), note: z.string().transform(note => note === '

' ? '' : note).catch(''), relationship: groupRelationshipSchema.nullable().catch(null), // Dummy field to be overwritten later + slug: z.string().catch(''), // TruthSocial statuses_visibility: z.string().catch('public'), tags: z.array(groupTagSchema).catch([]), uri: z.string().catch(''), From 4cd43c340b62882f931815196a62585cf735c988 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 13 Apr 2023 10:43:24 -0500 Subject: [PATCH 3/8] Fix group types :( --- app/soapbox/normalizers/group.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/soapbox/normalizers/group.ts b/app/soapbox/normalizers/group.ts index 44b2a48d2..127bca29f 100644 --- a/app/soapbox/normalizers/group.ts +++ b/app/soapbox/normalizers/group.ts @@ -33,6 +33,7 @@ export const GroupRecord = ImmutableRecord({ members_count: 0, note: '', statuses_visibility: 'public', + slug: '', tags: [], uri: '', url: '', From ccde5f8823d5357ec2d45875e60d949edda95391 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 17 Apr 2023 14:56:31 -0400 Subject: [PATCH 4/8] Make GroupLookup HOC kind of work --- .../components/hoc/group-lookup-hoc.tsx | 37 +++++++++++++++++++ app/soapbox/components/hoc/with-hoc.tsx | 11 ++++++ app/soapbox/features/ui/index.tsx | 5 +++ 3 files changed, 53 insertions(+) create mode 100644 app/soapbox/components/hoc/group-lookup-hoc.tsx create mode 100644 app/soapbox/components/hoc/with-hoc.tsx diff --git a/app/soapbox/components/hoc/group-lookup-hoc.tsx b/app/soapbox/components/hoc/group-lookup-hoc.tsx new file mode 100644 index 000000000..5c5f43c0c --- /dev/null +++ b/app/soapbox/components/hoc/group-lookup-hoc.tsx @@ -0,0 +1,37 @@ +import React from 'react'; + +import { useGroupLookup } from 'soapbox/hooks/api/groups/useGroupLookup'; + +import { Spinner } from '../ui'; + +interface IGroupLookup { + params: { + groupSlug: string + } +} + +function GroupLookupHoc(Component: React.ComponentType<{ params: { groupId: string } }>) { + const GroupLookup: React.FC = (props) => { + const { entity: group } = useGroupLookup(props.params.groupSlug); + if (!group) return ( + + ); + + const newProps = { + ...props, + params: { + ...props.params, + id: group.id, + groupId: group.id, + }, + }; + + return ( + + ); + }; + + return GroupLookup; +} + +export default GroupLookupHoc; \ No newline at end of file diff --git a/app/soapbox/components/hoc/with-hoc.tsx b/app/soapbox/components/hoc/with-hoc.tsx new file mode 100644 index 000000000..d5752a45f --- /dev/null +++ b/app/soapbox/components/hoc/with-hoc.tsx @@ -0,0 +1,11 @@ +type HOC = (Component: React.ComponentType

) => React.ComponentType +type AsyncComponent

= () => Promise<{ default: React.ComponentType

}> + +const withHoc = (asyncComponent: AsyncComponent

, hoc: HOC) => { + return async () => { + const { default: component } = await asyncComponent(); + return { default: hoc(component) }; + }; +}; + +export default withHoc; \ No newline at end of file diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index b58f266ec..142db1047 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -20,6 +20,8 @@ import { fetchScheduledStatuses } from 'soapbox/actions/scheduled-statuses'; import { connectUserStream } from 'soapbox/actions/streaming'; import { fetchSuggestionsForTimeline } from 'soapbox/actions/suggestions'; import { expandHomeTimeline } from 'soapbox/actions/timelines'; +import GroupLookupHoc from 'soapbox/components/hoc/group-lookup-hoc'; +import withHoc from 'soapbox/components/hoc/with-hoc'; import SidebarNavigation from 'soapbox/components/sidebar-navigation'; import ThumbNavigation from 'soapbox/components/thumb-navigation'; import { Layout } from 'soapbox/components/ui'; @@ -137,6 +139,8 @@ import { WrappedRoute } from './util/react-router-helpers'; // Without this it ends up in ~8 very commonly used bundles. import 'soapbox/components/status'; +const GroupTimelineSlug = withHoc(GroupTimeline as any, GroupLookupHoc); + const EmptyPage = HomePage; const keyMap = { @@ -305,6 +309,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {features.groups && } {features.groups && } {features.groups && } + {features.groups && } From 1bce61182cea1a4f12984e389a510735fec56943 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 17 Apr 2023 15:28:20 -0400 Subject: [PATCH 5/8] Make components use groupId param --- .../components/hoc/group-lookup-hoc.tsx | 25 ++++++++++++++--- app/soapbox/features/group/edit-group.tsx | 4 +-- .../features/group/group-blocked-members.tsx | 4 +-- app/soapbox/features/group/group-gallery.tsx | 2 +- app/soapbox/features/group/group-members.tsx | 4 +-- .../group/group-membership-requests.tsx | 4 +-- app/soapbox/features/group/group-timeline.tsx | 4 +-- app/soapbox/features/group/manage-group.tsx | 4 +-- app/soapbox/features/ui/index.tsx | 28 ++++++++++++++----- app/soapbox/pages/group-page.tsx | 19 +++++++------ 10 files changed, 65 insertions(+), 33 deletions(-) diff --git a/app/soapbox/components/hoc/group-lookup-hoc.tsx b/app/soapbox/components/hoc/group-lookup-hoc.tsx index 5c5f43c0c..b6a125eed 100644 --- a/app/soapbox/components/hoc/group-lookup-hoc.tsx +++ b/app/soapbox/components/hoc/group-lookup-hoc.tsx @@ -1,20 +1,27 @@ import React from 'react'; +import ColumnLoading from 'soapbox/features/ui/components/column-loading'; import { useGroupLookup } from 'soapbox/hooks/api/groups/useGroupLookup'; -import { Spinner } from '../ui'; - interface IGroupLookup { params: { groupSlug: string } } +interface IMaybeGroupLookup { + params?: { + groupSlug?: string + groupId?: string + } +} + function GroupLookupHoc(Component: React.ComponentType<{ params: { groupId: string } }>) { const GroupLookup: React.FC = (props) => { const { entity: group } = useGroupLookup(props.params.groupSlug); + if (!group) return ( - + ); const newProps = { @@ -31,7 +38,17 @@ function GroupLookupHoc(Component: React.ComponentType<{ params: { groupId: stri ); }; - return GroupLookup; + const MaybeGroupLookup: React.FC = (props) => { + const { params } = props; + + if (params?.groupId) { + return ; + } else { + return ; + } + }; + + return MaybeGroupLookup; } export default GroupLookupHoc; \ No newline at end of file diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx index 1e8024f6f..296c39e7e 100644 --- a/app/soapbox/features/group/edit-group.tsx +++ b/app/soapbox/features/group/edit-group.tsx @@ -25,11 +25,11 @@ const messages = defineMessages({ interface IEditGroup { params: { - id: string + groupId: string } } -const EditGroup: React.FC = ({ params: { id: groupId } }) => { +const EditGroup: React.FC = ({ params: { groupId } }) => { const intl = useIntl(); const instance = useInstance(); diff --git a/app/soapbox/features/group/group-blocked-members.tsx b/app/soapbox/features/group/group-blocked-members.tsx index a82f889c1..94b033837 100644 --- a/app/soapbox/features/group/group-blocked-members.tsx +++ b/app/soapbox/features/group/group-blocked-members.tsx @@ -12,7 +12,7 @@ import toast from 'soapbox/toast'; import ColumnForbidden from '../ui/components/column-forbidden'; -type RouteParams = { id: string }; +type RouteParams = { groupId: string }; const messages = defineMessages({ heading: { id: 'column.group_blocked_members', defaultMessage: 'Banned Members' }, @@ -62,7 +62,7 @@ const GroupBlockedMembers: React.FC = ({ params }) => { const intl = useIntl(); const dispatch = useAppDispatch(); - const id = params?.id; + const id = params?.groupId; const { group } = useGroup(id); const accountIds = useAppSelector((state) => state.user_lists.group_blocks.get(id)?.items); diff --git a/app/soapbox/features/group/group-gallery.tsx b/app/soapbox/features/group/group-gallery.tsx index 139be5bf3..f8a259e50 100644 --- a/app/soapbox/features/group/group-gallery.tsx +++ b/app/soapbox/features/group/group-gallery.tsx @@ -16,7 +16,7 @@ import type { Attachment, Status } from 'soapbox/types/entities'; const GroupGallery = () => { const dispatch = useAppDispatch(); - const { id: groupId } = useParams<{ id: string }>(); + const { groupId } = useParams<{ groupId: string }>(); const { group, isLoading: groupIsLoading } = useGroup(groupId); diff --git a/app/soapbox/features/group/group-members.tsx b/app/soapbox/features/group/group-members.tsx index a3a790a62..fc04e3d29 100644 --- a/app/soapbox/features/group/group-members.tsx +++ b/app/soapbox/features/group/group-members.tsx @@ -16,13 +16,13 @@ import GroupMemberListItem from './components/group-member-list-item'; import type { Group } from 'soapbox/types/entities'; interface IGroupMembers { - params: { id: string } + params: { groupId: string } } export const MAX_ADMIN_COUNT = 5; const GroupMembers: React.FC = (props) => { - const groupId = props.params.id; + const { groupId } = props.params; const features = useFeatures(); diff --git a/app/soapbox/features/group/group-membership-requests.tsx b/app/soapbox/features/group/group-membership-requests.tsx index dc1190bbf..c83d45b06 100644 --- a/app/soapbox/features/group/group-membership-requests.tsx +++ b/app/soapbox/features/group/group-membership-requests.tsx @@ -14,7 +14,7 @@ import ColumnForbidden from '../ui/components/column-forbidden'; import type { Account as AccountEntity } from 'soapbox/schemas'; -type RouteParams = { id: string }; +type RouteParams = { groupId: string }; const messages = defineMessages({ heading: { id: 'column.group_pending_requests', defaultMessage: 'Pending requests' }, @@ -54,7 +54,7 @@ interface IGroupMembershipRequests { } const GroupMembershipRequests: React.FC = ({ params }) => { - const id = params?.id; + const id = params?.groupId; const intl = useIntl(); const { group } = useGroup(id); diff --git a/app/soapbox/features/group/group-timeline.tsx b/app/soapbox/features/group/group-timeline.tsx index f19da1777..53f570280 100644 --- a/app/soapbox/features/group/group-timeline.tsx +++ b/app/soapbox/features/group/group-timeline.tsx @@ -12,7 +12,7 @@ import { useGroup } from 'soapbox/hooks/api'; import Timeline from '../ui/components/timeline'; -type RouteParams = { id: string }; +type RouteParams = { groupId: string }; interface IGroupTimeline { params: RouteParams @@ -22,7 +22,7 @@ const GroupTimeline: React.FC = (props) => { const account = useOwnAccount(); const dispatch = useAppDispatch(); - const groupId = props.params.id; + const { groupId } = props.params; const { group } = useGroup(groupId); diff --git a/app/soapbox/features/group/manage-group.tsx b/app/soapbox/features/group/manage-group.tsx index 12dc0b11b..38b90e34b 100644 --- a/app/soapbox/features/group/manage-group.tsx +++ b/app/soapbox/features/group/manage-group.tsx @@ -14,7 +14,7 @@ import { TRUTHSOCIAL } from 'soapbox/utils/features'; import ColumnForbidden from '../ui/components/column-forbidden'; -type RouteParams = { id: string }; +type RouteParams = { groupId: string }; const messages = defineMessages({ heading: { id: 'column.manage_group', defaultMessage: 'Manage group' }, @@ -35,7 +35,7 @@ interface IManageGroup { } const ManageGroup: React.FC = ({ params }) => { - const { id } = params; + const { groupId: id } = params; const backend = useBackend(); const dispatch = useAppDispatch(); diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index 142db1047..c315591ac 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -140,6 +140,12 @@ import { WrappedRoute } from './util/react-router-helpers'; import 'soapbox/components/status'; const GroupTimelineSlug = withHoc(GroupTimeline as any, GroupLookupHoc); +const GroupMembersSlug = withHoc(GroupMembers as any, GroupLookupHoc); +const GroupGallerySlug = withHoc(GroupGallery as any, GroupLookupHoc); +const ManageGroupSlug = withHoc(ManageGroup as any, GroupLookupHoc); +const EditGroupSlug = withHoc(EditGroup as any, GroupLookupHoc); +const GroupBlockedMembersSlug = withHoc(GroupBlockedMembers as any, GroupLookupHoc); +const GroupMembershipRequestsSlug = withHoc(GroupMembershipRequests as any, GroupLookupHoc); const EmptyPage = HomePage; @@ -301,15 +307,23 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {features.groupsDiscovery && } {features.groupsDiscovery && } {features.groupsPending && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } diff --git a/app/soapbox/pages/group-page.tsx b/app/soapbox/pages/group-page.tsx index 449e250f3..61e41ad25 100644 --- a/app/soapbox/pages/group-page.tsx +++ b/app/soapbox/pages/group-page.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { useRouteMatch } from 'react-router-dom'; +import GroupLookupHoc from 'soapbox/components/hoc/group-lookup-hoc'; import { Column, Icon, Layout, Stack, Text } from 'soapbox/components/ui'; import GroupHeader from 'soapbox/features/group/components/group-header'; import LinkFooter from 'soapbox/features/ui/components/link-footer'; @@ -27,7 +28,7 @@ const messages = defineMessages({ interface IGroupPage { params?: { - id?: string + groupId?: string } children: React.ReactNode } @@ -64,7 +65,7 @@ const GroupPage: React.FC = ({ params, children }) => { const match = useRouteMatch(); const me = useOwnAccount(); - const id = params?.id || ''; + const id = params?.groupId || ''; const { group } = useGroup(id); const { accounts: pending } = useGroupMembershipRequests(id); @@ -76,19 +77,19 @@ const GroupPage: React.FC = ({ params, children }) => { const items = [ { text: intl.formatMessage(messages.all), - to: `/groups/${group?.id}`, - name: '/groups/:id', + to: group?.slug ? `/group/${group.slug}` : `/groups/${group?.id}`, + name: group?.slug ? '/group/:groupSlug' : '/groups/:groupId', }, { text: intl.formatMessage(messages.members), - to: `/groups/${group?.id}/members`, - name: '/groups/:id/members', + to: group?.slug ? `/group/${group.slug}/members` : `/groups/${group?.id}/members`, + name: group?.slug ? '/group/:groupSlug/members' : '/groups/:groupId/members', count: pending.length, }, { text: intl.formatMessage(messages.media), - to: `/groups/${group?.id}/media`, - name: '/groups/:id/media', + to: group?.slug ? `/group/${group.slug}/media` : `/groups/${group?.id}/media`, + name: group?.slug ? '/group/:groupSlug' : '/groups/:groupId/media', }, ]; @@ -141,4 +142,4 @@ const GroupPage: React.FC = ({ params, children }) => { ); }; -export default GroupPage; +export default GroupLookupHoc(GroupPage as any) as any; From f2d5b2eaefafcf58eb6ace34c61edc5b6ec0d2a4 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 17 Apr 2023 15:42:08 -0400 Subject: [PATCH 6/8] Update group URLs to use slugs --- .../components/groups/popover/group-popover.tsx | 2 +- app/soapbox/components/status.tsx | 2 +- .../group/components/group-action-button.tsx | 2 +- app/soapbox/features/group/group-blocked-members.tsx | 2 +- app/soapbox/features/group/group-members.tsx | 5 ++++- app/soapbox/features/group/manage-group.tsx | 8 ++++---- .../groups/components/discover/group-grid-item.tsx | 2 +- .../groups/components/discover/group-list-item.tsx | 2 +- app/soapbox/features/groups/index.tsx | 2 +- app/soapbox/features/groups/pending-requests.tsx | 2 +- app/soapbox/features/status/index.tsx | 7 +++++-- app/soapbox/pages/group-page.tsx | 12 ++++++------ 12 files changed, 27 insertions(+), 21 deletions(-) diff --git a/app/soapbox/components/groups/popover/group-popover.tsx b/app/soapbox/components/groups/popover/group-popover.tsx index 752deeb8a..ba2457fb3 100644 --- a/app/soapbox/components/groups/popover/group-popover.tsx +++ b/app/soapbox/components/groups/popover/group-popover.tsx @@ -80,7 +80,7 @@ const GroupPopover = (props: IGroupPopoverContainer) => {

- + diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index 752e73636..24131159d 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -253,7 +253,7 @@ const Status: React.FC = (props) => { return ( } text={ diff --git a/app/soapbox/features/group/components/group-action-button.tsx b/app/soapbox/features/group/components/group-action-button.tsx index 96f807f9d..96653f97e 100644 --- a/app/soapbox/features/group/components/group-action-button.tsx +++ b/app/soapbox/features/group/components/group-action-button.tsx @@ -82,7 +82,7 @@ const GroupActionButton = ({ group }: IGroupActionButton) => { return ( diff --git a/app/soapbox/features/group/group-blocked-members.tsx b/app/soapbox/features/group/group-blocked-members.tsx index 94b033837..988b90b1b 100644 --- a/app/soapbox/features/group/group-blocked-members.tsx +++ b/app/soapbox/features/group/group-blocked-members.tsx @@ -86,7 +86,7 @@ const GroupBlockedMembers: React.FC = ({ params }) => { const emptyMessage = ; return ( - + = (props) => { itemClassName='py-3 last:pb-0' prepend={(pendingCount > 0) && (
- +
)} > diff --git a/app/soapbox/features/group/manage-group.tsx b/app/soapbox/features/group/manage-group.tsx index 38b90e34b..dd3efe9cd 100644 --- a/app/soapbox/features/group/manage-group.tsx +++ b/app/soapbox/features/group/manage-group.tsx @@ -77,12 +77,12 @@ const ManageGroup: React.FC = ({ params }) => { }, })); - const navigateToEdit = () => history.push(`/groups/${id}/manage/edit`); - const navigateToPending = () => history.push(`/groups/${id}/manage/requests`); - const navigateToBlocks = () => history.push(`/groups/${id}/manage/blocks`); + const navigateToEdit = () => history.push(`/group/${group.slug}/manage/edit`); + const navigateToPending = () => history.push(`/group/${group.slug}/manage/requests`); + const navigateToBlocks = () => history.push(`/group/${group.slug}/manage/blocks`); return ( - + {isOwner && ( <> diff --git a/app/soapbox/features/groups/components/discover/group-grid-item.tsx b/app/soapbox/features/groups/components/discover/group-grid-item.tsx index 17d53225e..fd1168f4e 100644 --- a/app/soapbox/features/groups/components/discover/group-grid-item.tsx +++ b/app/soapbox/features/groups/components/discover/group-grid-item.tsx @@ -25,7 +25,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef - + { alignItems='center' justifyContent='between' > - + { placeholderCount={3} > {groups.map((group) => ( - + ))} diff --git a/app/soapbox/features/groups/pending-requests.tsx b/app/soapbox/features/groups/pending-requests.tsx index cc9ceed1d..1233ff3a7 100644 --- a/app/soapbox/features/groups/pending-requests.tsx +++ b/app/soapbox/features/groups/pending-requests.tsx @@ -57,7 +57,7 @@ export default () => { showLoading={isLoading && groups.length === 0} > {groups.map((group) => ( - + ))} diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx index 818d83720..aaae4b9c7 100644 --- a/app/soapbox/features/status/index.tsx +++ b/app/soapbox/features/status/index.tsx @@ -119,6 +119,7 @@ type DisplayMedia = 'default' | 'hide_all' | 'show_all'; type RouteParams = { statusId: string groupId?: string + groupSlug?: string }; interface IThread { @@ -517,8 +518,10 @@ const Thread: React.FC = (props) => { children.push(...renderChildren(descendantsIds).toArray()); } - if (status.group && typeof status.group === 'object' && !props.params.groupId) { - return ; + if (status.group && typeof status.group === 'object') { + if (status.group.slug && !props.params.groupSlug) { + return ; + } } const titleMessage = () => { diff --git a/app/soapbox/pages/group-page.tsx b/app/soapbox/pages/group-page.tsx index 61e41ad25..13dda5467 100644 --- a/app/soapbox/pages/group-page.tsx +++ b/app/soapbox/pages/group-page.tsx @@ -77,19 +77,19 @@ const GroupPage: React.FC = ({ params, children }) => { const items = [ { text: intl.formatMessage(messages.all), - to: group?.slug ? `/group/${group.slug}` : `/groups/${group?.id}`, - name: group?.slug ? '/group/:groupSlug' : '/groups/:groupId', + to: `/group/${group?.slug}`, + name: '/group/:groupSlug', }, { text: intl.formatMessage(messages.members), - to: group?.slug ? `/group/${group.slug}/members` : `/groups/${group?.id}/members`, - name: group?.slug ? '/group/:groupSlug/members' : '/groups/:groupId/members', + to: `/group/${group?.slug}/members`, + name: '/group/:groupSlug/members', count: pending.length, }, { text: intl.formatMessage(messages.media), - to: group?.slug ? `/group/${group.slug}/media` : `/groups/${group?.id}/media`, - name: group?.slug ? '/group/:groupSlug' : '/groups/:groupId/media', + to: `/group/${group?.slug}/media`, + name: '/group/:groupSlug', }, ]; From dea9979b3909623afa1883bd5e18b10977e32a40 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 17 Apr 2023 15:45:16 -0400 Subject: [PATCH 7/8] GroupLookup: improve column loading --- app/soapbox/components/hoc/group-lookup-hoc.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/soapbox/components/hoc/group-lookup-hoc.tsx b/app/soapbox/components/hoc/group-lookup-hoc.tsx index b6a125eed..a7c76eed6 100644 --- a/app/soapbox/components/hoc/group-lookup-hoc.tsx +++ b/app/soapbox/components/hoc/group-lookup-hoc.tsx @@ -3,6 +3,8 @@ import React from 'react'; import ColumnLoading from 'soapbox/features/ui/components/column-loading'; import { useGroupLookup } from 'soapbox/hooks/api/groups/useGroupLookup'; +import { Layout } from '../ui'; + interface IGroupLookup { params: { groupSlug: string @@ -21,7 +23,13 @@ function GroupLookupHoc(Component: React.ComponentType<{ params: { groupId: stri const { entity: group } = useGroupLookup(props.params.groupSlug); if (!group) return ( - + <> + + + + + + ); const newProps = { From 70c2c5c4385cd84ea4b1be00bb484bdcaed9922b Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 18 Apr 2023 10:00:18 -0400 Subject: [PATCH 8/8] GroupLinkPreview: link to slug URL --- app/soapbox/features/groups/components/group-link-preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/features/groups/components/group-link-preview.tsx b/app/soapbox/features/groups/components/group-link-preview.tsx index be0e9f746..18ca586a5 100644 --- a/app/soapbox/features/groups/components/group-link-preview.tsx +++ b/app/soapbox/features/groups/components/group-link-preview.tsx @@ -14,7 +14,7 @@ const GroupLinkPreview: React.FC = ({ card }) => { const { group } = card; if (!group) return null; - const navigateToGroup = () => history.push(`/groups/${group.id}`); + const navigateToGroup = () => history.push(`/group/${group.slug}`); return (