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/hoc/group-lookup-hoc.tsx b/app/soapbox/components/hoc/group-lookup-hoc.tsx new file mode 100644 index 000000000..a7c76eed6 --- /dev/null +++ b/app/soapbox/components/hoc/group-lookup-hoc.tsx @@ -0,0 +1,62 @@ +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 + } +} + +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 = { + ...props, + params: { + ...props.params, + id: group.id, + groupId: group.id, + }, + }; + + return ( + + ); + }; + + 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/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/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx index 2dd6a3fdd..d0c8a93d4 100644 --- a/app/soapbox/components/profile-hover-card.tsx +++ b/app/soapbox/components/profile-hover-card.tsx @@ -106,7 +106,7 @@ export const ProfileHoverCard: React.FC = ({ visible = true } onMouseEnter={handleMouseEnter(dispatch)} onMouseLeave={handleMouseLeave(dispatch)} > - + diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx index 0867e6ca2..192a4c169 100644 --- a/app/soapbox/components/status-media.tsx +++ b/app/soapbox/components/status-media.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { openModal } from 'soapbox/actions/modals'; import AttachmentThumbs from 'soapbox/components/attachment-thumbs'; +import { GroupLinkPreview } from 'soapbox/features/groups/components/group-link-preview'; import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card'; import Card from 'soapbox/features/status/components/card'; import Bundle from 'soapbox/features/ui/components/bundle'; @@ -153,6 +154,10 @@ const StatusMedia: React.FC = ({ ); } + } else if (status.spoiler_text.length === 0 && !status.quote && status.card?.group) { + media = ( + + ); } else if (status.spoiler_text.length === 0 && !status.quote && status.card) { media = ( = (props) => { return ( } text={ diff --git a/app/soapbox/components/ui/tooltip/tooltip.css b/app/soapbox/components/ui/tooltip/tooltip.css deleted file mode 100644 index 670571c8b..000000000 --- a/app/soapbox/components/ui/tooltip/tooltip.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --reach-tooltip: 1; -} - -[data-reach-tooltip] { - @apply pointer-events-none absolute px-2.5 py-1.5 rounded shadow whitespace-nowrap text-xs font-medium bg-gray-800 text-gray-100 dark:bg-gray-100 dark:text-gray-900; - z-index: 100; -} - -[data-reach-tooltip-arrow] { - @apply absolute z-50 w-0 h-0 border-l-8 border-solid border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800 dark:border-b-gray-100; -} diff --git a/app/soapbox/components/ui/tooltip/tooltip.tsx b/app/soapbox/components/ui/tooltip/tooltip.tsx index f2b6ffedc..0d492bcb6 100644 --- a/app/soapbox/components/ui/tooltip/tooltip.tsx +++ b/app/soapbox/components/ui/tooltip/tooltip.tsx @@ -1,67 +1,88 @@ -import { TooltipPopup, useTooltip } from '@reach/tooltip'; -import React from 'react'; - -import Portal from '../portal/portal'; - -import './tooltip.css'; +import { + arrow, + FloatingArrow, + FloatingPortal, + offset, + useFloating, + useHover, + useInteractions, + useTransitionStyles, +} from '@floating-ui/react'; +import React, { useRef, useState } from 'react'; interface ITooltip { + /** Element to display the tooltip around. */ + children: React.ReactElement> /** Text to display in the tooltip. */ text: string - /** Element to display the tooltip around. */ - children: React.ReactNode } -const centered = (triggerRect: any, tooltipRect: any) => { - const triggerCenter = triggerRect.left + triggerRect.width / 2; - const left = triggerCenter - tooltipRect.width / 2; - const maxLeft = window.innerWidth - tooltipRect.width - 2; - return { - left: Math.min(Math.max(2, left), maxLeft) + window.scrollX, - top: triggerRect.bottom + 8 + window.scrollY, - }; -}; +/** + * Tooltip + */ +const Tooltip: React.FC = (props) => { + const { children, text } = props; -/** Hoverable tooltip element. */ -const Tooltip: React.FC = ({ - children, - text, -}) => { - // get the props from useTooltip - const [trigger, tooltip] = useTooltip(); + const [isOpen, setIsOpen] = useState(false); - // destructure off what we need to position the triangle - const { isVisible, triggerRect } = tooltip; + const arrowRef = useRef(null); + + const { x, y, strategy, refs, context } = useFloating({ + open: isOpen, + onOpenChange: setIsOpen, + placement: 'top', + middleware: [ + offset(6), + arrow({ + element: arrowRef, + }), + ], + }); + + const hover = useHover(context); + const { isMounted, styles } = useTransitionStyles(context, { + initial: { + opacity: 0, + transform: 'scale(0.8)', + }, + duration: { + open: 200, + close: 200, + }, + }); + + const { getReferenceProps, getFloatingProps } = useInteractions([ + hover, + ]); return ( - - {React.cloneElement(children as any, trigger)} + <> + {React.cloneElement(children, { + ref: refs.setReference, + ...getReferenceProps(), + })} - {isVisible && ( - // The Triangle. We position it relative to the trigger, not the popup - // so that collisions don't have a triangle pointing off to nowhere. - // Using a Portal may seem a little extreme, but we can keep the - // positioning logic simpler here instead of needing to consider - // the popup's position relative to the trigger and collisions - + {(isMounted) && ( +

- + className='pointer-events-none z-[100] whitespace-nowrap rounded bg-gray-800 px-2.5 py-1.5 text-xs font-medium text-gray-100 shadow dark:bg-gray-100 dark:text-gray-900' + {...getFloatingProps()} + > + {text} + + +
+ )} - - + ); }; -export default Tooltip; +export default Tooltip; \ No newline at end of file diff --git a/app/soapbox/entity-store/entities.ts b/app/soapbox/entity-store/entities.ts index 719cc7f1c..9878cbbf2 100644 --- a/app/soapbox/entity-store/entities.ts +++ b/app/soapbox/entity-store/entities.ts @@ -1,8 +1,9 @@ export enum Entities { ACCOUNTS = 'Accounts', GROUPS = 'Groups', - GROUP_RELATIONSHIPS = 'GroupRelationships', GROUP_MEMBERSHIPS = 'GroupMemberships', + GROUP_RELATIONSHIPS = 'GroupRelationships', + GROUP_TAGS = 'GroupTags', RELATIONSHIPS = 'Relationships', - STATUSES = 'Statuses', + STATUSES = 'Statuses' } \ No newline at end of file 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/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/useEntityActions.ts b/app/soapbox/entity-store/hooks/useEntityActions.ts index 8b87c52fd..c7e2e431d 100644 --- a/app/soapbox/entity-store/hooks/useEntityActions.ts +++ b/app/soapbox/entity-store/hooks/useEntityActions.ts @@ -12,8 +12,9 @@ interface UseEntityActionsOpts { } interface EntityActionEndpoints { - post?: string delete?: string + patch?: string + post?: string } function useEntityActions( @@ -30,10 +31,14 @@ function useEntityActions( const { createEntity, isSubmitting: createSubmitting } = useCreateEntity(path, (data) => api.post(endpoints.post!, data), opts); + const { createEntity: updateEntity, isSubmitting: updateSubmitting } = + useCreateEntity(path, (data) => api.patch(endpoints.patch!, data), opts); + return { createEntity, deleteEntity, - isSubmitting: createSubmitting || deleteSubmitting, + updateEntity, + isSubmitting: createSubmitting || deleteSubmitting || updateSubmitting, }; } diff --git a/app/soapbox/entity-store/hooks/useEntityLookup.ts b/app/soapbox/entity-store/hooks/useEntityLookup.ts new file mode 100644 index 000000000..a49a659a4 --- /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 { useEntityLookup }; \ No newline at end of file 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/components/group-tag-list-item.tsx b/app/soapbox/features/group/components/group-tag-list-item.tsx new file mode 100644 index 000000000..47f9f1ef6 --- /dev/null +++ b/app/soapbox/features/group/components/group-tag-list-item.tsx @@ -0,0 +1,175 @@ +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; +import { Link } from 'react-router-dom'; + +import { HStack, IconButton, Stack, Text, Tooltip } from 'soapbox/components/ui'; +import { importEntities } from 'soapbox/entity-store/actions'; +import { Entities } from 'soapbox/entity-store/entities'; +import { useAppDispatch } from 'soapbox/hooks'; +import { useUpdateGroupTag } from 'soapbox/hooks/api'; +import { GroupRoles } from 'soapbox/schemas/group-member'; +import toast from 'soapbox/toast'; +import { shortNumberFormat } from 'soapbox/utils/numbers'; + +import type { Group, GroupTag } from 'soapbox/schemas'; + +const messages = defineMessages({ + hideTag: { id: 'group.tags.hide', defaultMessage: 'Hide topic' }, + showTag: { id: 'group.tags.show', defaultMessage: 'Show topic' }, + total: { id: 'group.tags.total', defaultMessage: 'Total Posts' }, + pinTag: { id: 'group.tags.pin', defaultMessage: 'Pin topic' }, + unpinTag: { id: 'group.tags.unpin', defaultMessage: 'Unpin topic' }, + pinSuccess: { id: 'group.tags.pin.success', defaultMessage: 'Pinned!' }, + unpinSuccess: { id: 'group.tags.unpin.success', defaultMessage: 'Unpinned!' }, + visibleSuccess: { id: 'group.tags.visible.success', defaultMessage: 'Topic marked as visible' }, + hiddenSuccess: { id: 'group.tags.hidden.success', defaultMessage: 'Topic marked as hidden' }, +}); + +interface IGroupMemberListItem { + tag: GroupTag + group: Group + isPinnable: boolean +} + +const GroupTagListItem = (props: IGroupMemberListItem) => { + const { group, tag, isPinnable } = props; + const dispatch = useAppDispatch(); + + const intl = useIntl(); + const { updateGroupTag } = useUpdateGroupTag(group.id, tag.id); + + const isOwner = group.relationship?.role === GroupRoles.OWNER; + const isAdmin = group.relationship?.role === GroupRoles.ADMIN; + const canEdit = isOwner || isAdmin; + + const toggleVisibility = () => { + updateGroupTag({ + group_tag_type: tag.visible ? 'hidden' : 'normal', + }, { + onSuccess() { + const entity = { + ...tag, + visible: !tag.visible, + }; + dispatch(importEntities([entity], Entities.GROUP_TAGS)); + + toast.success( + entity.visible ? + intl.formatMessage(messages.visibleSuccess) : + intl.formatMessage(messages.hiddenSuccess), + ); + }, + }); + }; + + const togglePin = () => { + updateGroupTag({ + group_tag_type: tag.pinned ? 'normal' : 'pinned', + }, { + onSuccess() { + const entity = { + ...tag, + pinned: !tag.pinned, + }; + dispatch(importEntities([entity], Entities.GROUP_TAGS)); + + toast.success( + entity.pinned ? + intl.formatMessage(messages.pinSuccess) : + intl.formatMessage(messages.unpinSuccess), + ); + }, + }); + }; + + const renderPinIcon = () => { + if (isPinnable) { + return ( + + + + ); + } + + if (!isPinnable && tag.pinned) { + return ( + + + + + ); + } + }; + + return ( + + + + + #{tag.name} + + + {intl.formatMessage(messages.total)}: + {' '} + + {shortNumberFormat(tag.uses)} + + + + + + {canEdit ? ( + + {tag.visible ? ( + renderPinIcon() + ) : null} + + + + + + ) : null} + + ); +}; + +export default GroupTagListItem; \ 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 7527a1802..4176f6106 100644 --- a/app/soapbox/features/group/edit-group.tsx +++ b/app/soapbox/features/group/edit-group.tsx @@ -26,11 +26,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..988b90b1b 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); @@ -86,7 +86,7 @@ const GroupBlockedMembers: React.FC = ({ params }) => { const emptyMessage = ; return ( - + { - const dispatch = useAppDispatch(); +interface IGroupGallery { + params: { groupId: string } +} - const { id: groupId } = useParams<{ id: string }>(); +const GroupGallery: React.FC = (props) => { + const { groupId } = props.params; + + const dispatch = useAppDispatch(); const { group, isLoading: groupIsLoading } = useGroup(groupId); @@ -24,6 +27,7 @@ const GroupGallery = () => { entities: statuses, fetchNextPage, isLoading, + isFetching, hasNextPage, } = useGroupMedia(groupId); @@ -45,21 +49,25 @@ const GroupGallery = () => { if (isLoading || groupIsLoading) { return ( - - + +
+ +
); } if (!group) { return ( - +
+ +
); } return ( -
+
{attachments.map((attachment) => ( {
)} - - {(hasNextPage && !isLoading) && ( - - )}
- {isLoading && ( -
- -
+ {hasNextPage && ( + )} ); diff --git a/app/soapbox/features/group/group-members.tsx b/app/soapbox/features/group/group-members.tsx index a3a790a62..36ccd05b7 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(); @@ -58,7 +58,10 @@ const GroupMembers: React.FC = (props) => { itemClassName='py-3 last:pb-0' prepend={(pendingCount > 0) && (
- +
)} > 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-tag-timeline.tsx b/app/soapbox/features/group/group-tag-timeline.tsx new file mode 100644 index 000000000..2663c59cf --- /dev/null +++ b/app/soapbox/features/group/group-tag-timeline.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import { Column } from 'soapbox/components/ui'; +import { useGroup, useGroupTag } from 'soapbox/hooks/api'; + +type RouteParams = { id: string, groupId: string }; + +interface IGroupTimeline { + params: RouteParams +} + +const GroupTagTimeline: React.FC = (props) => { + const groupId = props.params.groupId; + const tagId = props.params.id; + + const { group } = useGroup(groupId); + const { tag } = useGroupTag(tagId); + + if (!group) { + return null; + } + + return ( + + {/* TODO */} + + ); +}; + +export default GroupTagTimeline; diff --git a/app/soapbox/features/group/group-tags.tsx b/app/soapbox/features/group/group-tags.tsx new file mode 100644 index 000000000..516fb94df --- /dev/null +++ b/app/soapbox/features/group/group-tags.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; + +import ScrollableList from 'soapbox/components/scrollable-list'; +import { Icon, Stack, Text } from 'soapbox/components/ui'; +import { useGroupTags } from 'soapbox/hooks/api'; +import { useGroup } from 'soapbox/queries/groups'; + +import PlaceholderAccount from '../placeholder/components/placeholder-account'; + +import GroupTagListItem from './components/group-tag-list-item'; + +import type { Group } from 'soapbox/types/entities'; + +interface IGroupTopics { + params: { groupId: string } +} + +const GroupTopics: React.FC = (props) => { + const { groupId } = props.params; + + const { group, isFetching: isFetchingGroup } = useGroup(groupId); + const { tags, isFetching: isFetchingTags, hasNextPage, fetchNextPage } = useGroupTags(groupId); + + const isLoading = isFetchingGroup || isFetchingTags; + + const pinnedTags = tags.filter((tag) => tag.pinned); + const isPinnable = pinnedTags.length < 3; + + return ( + +
+ +
+ + + + + + } + emptyMessageCard={false} + > + {tags.map((tag) => ( + + ))} + + ); +}; + +export default GroupTopics; 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..5c3ee5c24 100644 --- a/app/soapbox/features/group/manage-group.tsx +++ b/app/soapbox/features/group/manage-group.tsx @@ -5,16 +5,15 @@ import { useHistory } from 'react-router-dom'; import { openModal } from 'soapbox/actions/modals'; import List, { ListItem } from 'soapbox/components/list'; import { CardBody, CardHeader, CardTitle, Column, Spinner, Text } from 'soapbox/components/ui'; -import { useAppDispatch, useGroupsPath } from 'soapbox/hooks'; +import { useAppDispatch, useBackend, useGroupsPath } from 'soapbox/hooks'; import { useDeleteGroup, useGroup } from 'soapbox/hooks/api'; -import { useBackend } from 'soapbox/hooks/useBackend'; import { GroupRoles } from 'soapbox/schemas/group-member'; import toast from 'soapbox/toast'; 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 +34,7 @@ interface IManageGroup { } const ManageGroup: React.FC = ({ params }) => { - const { id } = params; + const { groupId: id } = params; const backend = useBackend(); const dispatch = useAppDispatch(); @@ -77,12 +76,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' > - + { + const { tags, isFetched, isError } = usePopularTags(); + const isEmpty = (isFetched && tags.length === 0) || isError; + + return ( + + + + + + + + + + + + + + {isEmpty ? ( + + + + ) : ( + + {tags.slice(0, 10).map((tag) => ( + + ))} + + )} + + ); +}; + +export default PopularTags; \ No newline at end of file diff --git a/app/soapbox/features/groups/components/discover/tag-list-item.tsx b/app/soapbox/features/groups/components/discover/tag-list-item.tsx new file mode 100644 index 000000000..c899e1085 --- /dev/null +++ b/app/soapbox/features/groups/components/discover/tag-list-item.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import { Link } from 'react-router-dom'; + +import { Stack, Text } from 'soapbox/components/ui'; + +import type { GroupTag } from 'soapbox/schemas'; + +interface ITagListItem { + tag: GroupTag +} + +const TagListItem = (props: ITagListItem) => { + const { tag } = props; + + return ( + + + + #{tag.name} + + + + + :{' '} + {tag.uses} + + + + ); +}; + +export default TagListItem; \ No newline at end of file diff --git a/app/soapbox/features/groups/components/group-link-preview.tsx b/app/soapbox/features/groups/components/group-link-preview.tsx new file mode 100644 index 000000000..18ca586a5 --- /dev/null +++ b/app/soapbox/features/groups/components/group-link-preview.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom'; + +import { Avatar, Button, CardTitle, Stack } from 'soapbox/components/ui'; +import { type Card as StatusCard } from 'soapbox/types/entities'; + +interface IGroupLinkPreview { + card: StatusCard +} + +const GroupLinkPreview: React.FC = ({ card }) => { + const history = useHistory(); + + const { group } = card; + if (!group) return null; + + const navigateToGroup = () => history.push(`/group/${group.slug}`); + + return ( + +
+ + + + + } /> + + + + + ); +}; + +export { GroupLinkPreview }; \ No newline at end of file diff --git a/app/soapbox/features/groups/discover.tsx b/app/soapbox/features/groups/discover.tsx index 4e0c0c70a..6e26c0671 100644 --- a/app/soapbox/features/groups/discover.tsx +++ b/app/soapbox/features/groups/discover.tsx @@ -4,6 +4,7 @@ import { defineMessages, useIntl } from 'react-intl'; import { HStack, Icon, IconButton, Input, Stack } from 'soapbox/components/ui'; import PopularGroups from './components/discover/popular-groups'; +import PopularTags from './components/discover/popular-tags'; import Search from './components/discover/search/search'; import SuggestedGroups from './components/discover/suggested-groups'; import TabBar, { TabItems } from './components/tab-bar'; @@ -71,6 +72,7 @@ const Discover: React.FC = () => { <> + )} diff --git a/app/soapbox/features/groups/index.tsx b/app/soapbox/features/groups/index.tsx index 2f6436cd5..0407ff8e0 100644 --- a/app/soapbox/features/groups/index.tsx +++ b/app/soapbox/features/groups/index.tsx @@ -106,7 +106,7 @@ const Groups: React.FC = () => { 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/groups/tag.tsx b/app/soapbox/features/groups/tag.tsx new file mode 100644 index 000000000..4774a4700 --- /dev/null +++ b/app/soapbox/features/groups/tag.tsx @@ -0,0 +1,117 @@ +import clsx from 'clsx'; +import React, { useCallback, useState } from 'react'; +import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso'; + +import { Column, HStack, Icon } from 'soapbox/components/ui'; +import { useGroupTag, useGroupsFromTag } from 'soapbox/hooks/api'; + +import GroupGridItem from './components/discover/group-grid-item'; +import GroupListItem from './components/discover/group-list-item'; + +import type { Group } from 'soapbox/schemas'; + +enum Layout { + LIST = 'LIST', + GRID = 'GRID' +} + +const GridList: Components['List'] = React.forwardRef((props, ref) => { + const { context, ...rest } = props; + return
; +}); + +interface ITag { + params: { id: string } +} + +const Tag: React.FC = (props) => { + const tagId = props.params.id; + + const [layout, setLayout] = useState(Layout.LIST); + + const { tag, isLoading } = useGroupTag(tagId); + const { groups, hasNextPage, fetchNextPage } = useGroupsFromTag(tagId); + + const handleLoadMore = () => { + if (hasNextPage) { + fetchNextPage(); + } + }; + + const renderGroupList = useCallback((group: Group, index: number) => ( +
+ +
+ ), []); + + const renderGroupGrid = useCallback((group: Group, index: number) => ( +
+ +
+ ), []); + + if (isLoading || !tag) { + return null; + } + + return ( + + + + + + } + > + {layout === Layout.LIST ? ( + renderGroupList(group, index)} + endReached={handleLoadMore} + /> + ) : ( + renderGroupGrid(group, index)} + components={{ + Item: (props) => ( +
+ ), + List: GridList, + }} + endReached={handleLoadMore} + /> + )} + + ); +}; + +export default Tag; diff --git a/app/soapbox/features/groups/tags.tsx b/app/soapbox/features/groups/tags.tsx new file mode 100644 index 000000000..1484665e4 --- /dev/null +++ b/app/soapbox/features/groups/tags.tsx @@ -0,0 +1,62 @@ +import clsx from 'clsx'; +import React from 'react'; +import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; +import { Virtuoso } from 'react-virtuoso'; + +import { Column, Text } from 'soapbox/components/ui'; +import { usePopularTags } from 'soapbox/hooks/api'; + +import TagListItem from './components/discover/tag-list-item'; + +import type { GroupTag } from 'soapbox/schemas'; + +const messages = defineMessages({ + title: { id: 'groups.tags.title', defaultMessage: 'Browse Topics' }, +}); + +const Tags: React.FC = () => { + const intl = useIntl(); + + const { tags, isFetched, isError, hasNextPage, fetchNextPage } = usePopularTags(); + const isEmpty = (isFetched && tags.length === 0) || isError; + + const handleLoadMore = () => { + if (hasNextPage) { + fetchNextPage(); + } + }; + + const renderItem = (index: number, tag: GroupTag) => ( +
+ +
+ ); + + return ( + + {isEmpty ? ( + + + + ) : ( + + )} + + ); +}; + +export default Tags; diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx index 4fc0f0eaf..05e435d4e 100644 --- a/app/soapbox/features/status/components/detailed-status.tsx +++ b/app/soapbox/features/status/components/detailed-status.tsx @@ -2,20 +2,20 @@ import React, { useEffect, useRef, useState } from 'react'; import { FormattedDate, FormattedMessage, useIntl } from 'react-intl'; import Account from 'soapbox/components/account'; -import Icon from 'soapbox/components/icon'; import StatusContent from 'soapbox/components/status-content'; import StatusMedia from 'soapbox/components/status-media'; import StatusReplyMentions from 'soapbox/components/status-reply-mentions'; import SensitiveContentOverlay from 'soapbox/components/statuses/sensitive-content-overlay'; +import StatusInfo from 'soapbox/components/statuses/status-info'; import TranslateButton from 'soapbox/components/translate-button'; -import { HStack, Stack, Text } from 'soapbox/components/ui'; +import { HStack, Icon, Stack, Text } from 'soapbox/components/ui'; import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container'; import { getActualStatus } from 'soapbox/utils/status'; import StatusInteractionBar from './status-interaction-bar'; import type { List as ImmutableList } from 'immutable'; -import type { Attachment as AttachmentEntity, Status as StatusEntity } from 'soapbox/types/entities'; +import type { Attachment as AttachmentEntity, Group, Status as StatusEntity } from 'soapbox/types/entities'; interface IDetailedStatus { status: StatusEntity @@ -50,6 +50,35 @@ const DetailedStatus: React.FC = ({ onOpenCompareHistoryModal(status); }; + const renderStatusInfo = () => { + if (status.group) { + return ( +
+ } + text={ + + + ) }} + /> + + } + /> +
+ ); + } + }; + const actualStatus = getActualStatus(status); if (!actualStatus) return null; const { account } = actualStatus; @@ -75,14 +104,16 @@ const DetailedStatus: React.FC = ({ } if (actualStatus.visibility === 'direct') { - statusTypeIcon = ; + statusTypeIcon = ; } else if (actualStatus.visibility === 'private') { - statusTypeIcon = ; + statusTypeIcon = ; } return (
+ {renderStatusInfo()} +
= (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 = () => { if (status.visibility === 'direct') return messages.titleDirect; - return status.group ? messages.titleGroup : messages.title; + return messages.title; }; return ( diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index 682f7e012..68ea0dd0a 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'; @@ -122,8 +124,12 @@ import { GroupsDiscover, GroupsPopular, GroupsSuggested, + GroupsTag, + GroupsTags, PendingGroupRequests, GroupMembers, + GroupTags, + GroupTagTimeline, GroupTimeline, ManageGroup, GroupBlockedMembers, @@ -137,6 +143,16 @@ import { WrappedRoute } from './util/react-router-helpers'; // Without this it ends up in ~8 very commonly used bundles. import 'soapbox/components/status'; +const GroupTagsSlug = withHoc(GroupTags as any, GroupLookupHoc); +const GroupTagTimelineSlug = withHoc(GroupTagTimeline as any, GroupLookupHoc); +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; const keyMap = { @@ -296,16 +312,31 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {features.groupsDiscovery && } {features.groupsDiscovery && } {features.groupsDiscovery && } + {features.groupsDiscovery && } + {features.groupsDiscovery && } {features.groupsPending && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } + {features.groupsTags && } + {features.groupsTags && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } {features.groups && } + {features.groupsTags && } + {features.groupsTags && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.scheduledStatuses && } diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts index f915571d2..e8187db46 100644 --- a/app/soapbox/features/ui/util/async-components.ts +++ b/app/soapbox/features/ui/util/async-components.ts @@ -562,6 +562,14 @@ export function GroupsSuggested() { return import(/* webpackChunkName: "features/groups" */'../../groups/suggested'); } +export function GroupsTag() { + return import(/* webpackChunkName: "features/groups" */'../../groups/tag'); +} + +export function GroupsTags() { + return import(/* webpackChunkName: "features/groups" */'../../groups/tags'); +} + export function PendingGroupRequests() { return import(/* webpackChunkName: "features/groups" */'../../groups/pending-requests'); } @@ -570,6 +578,14 @@ export function GroupMembers() { return import(/* webpackChunkName: "features/groups" */'../../group/group-members'); } +export function GroupTags() { + return import(/* webpackChunkName: "features/groups" */'../../group/group-tags'); +} + +export function GroupTagTimeline() { + return import(/* webpackChunkName: "features/groups" */'../../group/group-tag-timeline'); +} + export function GroupTimeline() { return import(/* webpackChunkName: "features/groups" */'../../group/group-timeline'); } 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/hooks/api/groups/useGroupTag.ts b/app/soapbox/hooks/api/groups/useGroupTag.ts new file mode 100644 index 000000000..d0e63d74d --- /dev/null +++ b/app/soapbox/hooks/api/groups/useGroupTag.ts @@ -0,0 +1,21 @@ +import { Entities } from 'soapbox/entity-store/entities'; +import { useEntity } from 'soapbox/entity-store/hooks'; +import { useApi } from 'soapbox/hooks'; +import { type GroupTag, groupTagSchema } from 'soapbox/schemas'; + +function useGroupTag(tagId: string) { + const api = useApi(); + + const { entity: tag, ...result } = useEntity( + [Entities.GROUP_TAGS, tagId], + () => api.get(`/api/v1/tags/${tagId }`), + { schema: groupTagSchema }, + ); + + return { + ...result, + tag, + }; +} + +export { useGroupTag }; \ No newline at end of file diff --git a/app/soapbox/hooks/api/groups/useGroupTags.ts b/app/soapbox/hooks/api/groups/useGroupTags.ts new file mode 100644 index 000000000..b2c29aa3c --- /dev/null +++ b/app/soapbox/hooks/api/groups/useGroupTags.ts @@ -0,0 +1,23 @@ +import { Entities } from 'soapbox/entity-store/entities'; +import { useEntities } from 'soapbox/entity-store/hooks'; +import { useApi } from 'soapbox/hooks/useApi'; +import { groupTagSchema } from 'soapbox/schemas'; + +import type { GroupTag } from 'soapbox/schemas'; + +function useGroupTags(groupId: string) { + const api = useApi(); + + const { entities, ...result } = useEntities( + [Entities.GROUP_TAGS, groupId], + () => api.get(`/api/v1/truth/trends/groups/${groupId}/tags`), + { schema: groupTagSchema }, + ); + + return { + ...result, + tags: entities, + }; +} + +export { useGroupTags }; \ No newline at end of file diff --git a/app/soapbox/hooks/api/groups/useGroupsFromTag.ts b/app/soapbox/hooks/api/groups/useGroupsFromTag.ts new file mode 100644 index 000000000..a6b8540dc --- /dev/null +++ b/app/soapbox/hooks/api/groups/useGroupsFromTag.ts @@ -0,0 +1,37 @@ +import { Entities } from 'soapbox/entity-store/entities'; +import { useEntities } from 'soapbox/entity-store/hooks'; +import { groupSchema } from 'soapbox/schemas'; + +import { useApi } from '../../useApi'; +import { useFeatures } from '../../useFeatures'; + +import { useGroupRelationships } from './useGroups'; + +import type { Group } from 'soapbox/schemas'; + +function useGroupsFromTag(tagId: string) { + const api = useApi(); + const features = useFeatures(); + + const { entities, ...result } = useEntities( + [Entities.GROUPS, 'tags', tagId], + () => api.get(`/api/v1/tags/${tagId}/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 { useGroupsFromTag }; \ No newline at end of file diff --git a/app/soapbox/hooks/api/groups/usePopularTags.ts b/app/soapbox/hooks/api/groups/usePopularTags.ts new file mode 100644 index 000000000..0bd272a2d --- /dev/null +++ b/app/soapbox/hooks/api/groups/usePopularTags.ts @@ -0,0 +1,27 @@ +import { Entities } from 'soapbox/entity-store/entities'; +import { useEntities } from 'soapbox/entity-store/hooks'; +import { GroupTag, groupTagSchema } from 'soapbox/schemas'; + +import { useApi } from '../../useApi'; +import { useFeatures } from '../../useFeatures'; + +function usePopularTags() { + const api = useApi(); + const features = useFeatures(); + + const { entities, ...result } = useEntities( + [Entities.GROUP_TAGS], + () => api.get('/api/v1/groups/tags'), + { + schema: groupTagSchema, + enabled: features.groupsDiscovery, + }, + ); + + return { + ...result, + tags: entities, + }; +} + +export { usePopularTags }; \ No newline at end of file diff --git a/app/soapbox/hooks/api/groups/useUpdateGroupTag.ts b/app/soapbox/hooks/api/groups/useUpdateGroupTag.ts new file mode 100644 index 000000000..1c68c714d --- /dev/null +++ b/app/soapbox/hooks/api/groups/useUpdateGroupTag.ts @@ -0,0 +1,18 @@ +import { Entities } from 'soapbox/entity-store/entities'; +import { useEntityActions } from 'soapbox/entity-store/hooks'; + +import type { GroupTag } from 'soapbox/schemas'; + +function useUpdateGroupTag(groupId: string, tagId: string) { + const { updateEntity, ...rest } = useEntityActions( + [Entities.GROUP_TAGS, groupId, tagId], + { patch: `/api/v1/groups/${groupId}/tags/${tagId}` }, + ); + + return { + updateGroupTag: updateEntity, + ...rest, + }; +} + +export { useUpdateGroupTag }; \ No newline at end of file diff --git a/app/soapbox/hooks/api/index.ts b/app/soapbox/hooks/api/index.ts index b5927bf6b..c8e1f67c3 100644 --- a/app/soapbox/hooks/api/index.ts +++ b/app/soapbox/hooks/api/index.ts @@ -11,17 +11,22 @@ export { useCancelMembershipRequest } from './groups/useCancelMembershipRequest' export { useCreateGroup, type CreateGroupParams } from './groups/useCreateGroup'; export { useDeleteGroup } from './groups/useDeleteGroup'; export { useDemoteGroupMember } from './groups/useDemoteGroupMember'; -export { useGroupMedia } from './groups/useGroupMedia'; export { useGroup, useGroups } from './groups/useGroups'; +export { useGroupMedia } from './groups/useGroupMedia'; export { useGroupMembershipRequests } from './groups/useGroupMembershipRequests'; export { useGroupSearch } from './groups/useGroupSearch'; +export { useGroupTag } from './groups/useGroupTag'; +export { useGroupTags } from './groups/useGroupTags'; export { useGroupValidation } from './groups/useGroupValidation'; +export { useGroupsFromTag } from './groups/useGroupsFromTag'; export { useJoinGroup } from './groups/useJoinGroup'; export { useLeaveGroup } from './groups/useLeaveGroup'; +export { usePopularTags } from './groups/usePopularTags'; export { usePromoteGroupMember } from './groups/usePromoteGroupMember'; export { useUpdateGroup } from './groups/useUpdateGroup'; +export { useUpdateGroupTag } from './groups/useUpdateGroupTag'; /** * Relationships */ -export { useRelationships } from './useRelationships'; \ No newline at end of file +export { useRelationships } from './useRelationships'; diff --git a/app/soapbox/hooks/index.ts b/app/soapbox/hooks/index.ts index ef8b6462f..6f52e0c8f 100644 --- a/app/soapbox/hooks/index.ts +++ b/app/soapbox/hooks/index.ts @@ -2,6 +2,7 @@ export { useAccount } from './useAccount'; export { useApi } from './useApi'; export { useAppDispatch } from './useAppDispatch'; export { useAppSelector } from './useAppSelector'; +export { useBackend } from './useBackend'; export { useClickOutside } from './useClickOutside'; export { useCompose } from './useCompose'; export { useDebounce } from './useDebounce'; diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index fa30aaf85..eb06da1e5 100644 --- a/app/soapbox/locales/en.json +++ b/app/soapbox/locales/en.json @@ -807,8 +807,19 @@ "group.tabs.all": "All", "group.tabs.media": "Media", "group.tabs.members": "Members", + "group.tabs.tags": "Topics", + "group.tags.empty": "There are no topics in this group yet.", + "group.tags.hidden.success": "Topic marked as hidden", + "group.tags.hide": "Hide topic", "group.tags.hint": "Add up to 3 keywords that will serve as core topics of discussion in the group.", "group.tags.label": "Tags", + "group.tags.pin": "Pin topic", + "group.tags.pin.success": "Pinned!", + "group.tags.show": "Show topic", + "group.tags.total": "Total Posts", + "group.tags.unpin": "Unpin topic", + "group.tags.unpin.success": "Unpinned!", + "group.tags.visible.success": "Topic marked as visible", "group.update.success": "Group successfully saved", "group.upload_banner": "Upload photo", "groups.discover.popular.empty": "Unable to fetch popular groups at this time. Please check back later.", @@ -828,6 +839,10 @@ "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.discover.tags.empty": "Unable to fetch popular topics at this time. Please check back later.", + "groups.discover.tags.show_more": "Show More", + "groups.discover.tags.title": "Browse Topics", + "groups.discovery.tags.no_of_groups": "Number of groups", "groups.empty.subtitle": "Start discovering groups to join or create your own.", "groups.empty.title": "No Groups yet", "groups.pending.count": "{number, plural, one {# pending request} other {# pending requests}}", @@ -836,6 +851,7 @@ "groups.pending.label": "Pending Requests", "groups.popular.label": "Suggested Groups", "groups.search.placeholder": "Search My Groups", + "groups.tags.title": "Browse Topics", "hashtag.column_header.tag_mode.all": "and {additional}", "hashtag.column_header.tag_mode.any": "or {additional}", "hashtag.column_header.tag_mode.none": "without {additional}", @@ -1467,7 +1483,6 @@ "status.show_original": "Show original", "status.title": "Post Details", "status.title_direct": "Direct message", - "status.title_group": "Group Post Details", "status.translate": "Translate", "status.translated_from_with": "Translated from {lang} using {provider}", "status.unbookmark": "Remove bookmark", diff --git a/app/soapbox/locales/zh-CN.json b/app/soapbox/locales/zh-CN.json index 617c8e727..889752971 100644 --- a/app/soapbox/locales/zh-CN.json +++ b/app/soapbox/locales/zh-CN.json @@ -1464,7 +1464,6 @@ "status.show_original": "显示原文本", "status.title": "帖文详情", "status.title_direct": "私信", - "status.title_group": "群组帖文详情", "status.translate": "翻译", "status.translated_from_with": "使用 {provider} 从 {lang} 翻译而来", "status.unbookmark": "移除书签", diff --git a/app/soapbox/normalizers/card.ts b/app/soapbox/normalizers/card.ts index 536d12c38..5d0af42cf 100644 --- a/app/soapbox/normalizers/card.ts +++ b/app/soapbox/normalizers/card.ts @@ -7,6 +7,7 @@ import punycode from 'punycode'; import { Record as ImmutableRecord, Map as ImmutableMap, fromJS } from 'immutable'; +import { groupSchema, type Group } from 'soapbox/schemas'; import { mergeDefined } from 'soapbox/utils/normalizers'; // https://docs.joinmastodon.org/entities/card/ @@ -16,6 +17,7 @@ export const CardRecord = ImmutableRecord({ blurhash: null as string | null, description: '', embed_url: '', + group: null as null | Group, height: 0, html: '', image: null as string | null, @@ -60,11 +62,21 @@ const normalizeProviderName = (card: ImmutableMap) => { return card.set('provider_name', providerName); }; +const normalizeGroup = (card: ImmutableMap) => { + try { + const group = groupSchema.parse(card.get('group').toJS()); + return card.set('group', group); + } catch (_e) { + return card.set('group', null); + } +}; + export const normalizeCard = (card: Record) => { return CardRecord( ImmutableMap(fromJS(card)).withMutations(card => { normalizePleromaOpengraph(card); normalizeProviderName(card); + normalizeGroup(card); }), ); }; diff --git a/app/soapbox/normalizers/group.ts b/app/soapbox/normalizers/group.ts index f9b042839..d0daf2877 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: '', diff --git a/app/soapbox/pages/group-page.tsx b/app/soapbox/pages/group-page.tsx index 449e250f3..ae383be8c 100644 --- a/app/soapbox/pages/group-page.tsx +++ b/app/soapbox/pages/group-page.tsx @@ -1,7 +1,8 @@ -import React from 'react'; +import React, { useMemo } 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'; @@ -12,7 +13,7 @@ import { SignUpPanel, SuggestedGroupsPanel, } from 'soapbox/features/ui/util/async-components'; -import { useOwnAccount } from 'soapbox/hooks'; +import { useFeatures, useOwnAccount } from 'soapbox/hooks'; import { useGroup } from 'soapbox/hooks/api'; import { useGroupMembershipRequests } from 'soapbox/hooks/api/groups/useGroupMembershipRequests'; import { Group } from 'soapbox/schemas'; @@ -23,11 +24,12 @@ const messages = defineMessages({ all: { id: 'group.tabs.all', defaultMessage: 'All' }, members: { id: 'group.tabs.members', defaultMessage: 'Members' }, media: { id: 'group.tabs.media', defaultMessage: 'Media' }, + tags: { id: 'group.tabs.tags', defaultMessage: 'Topics' }, }); interface IGroupPage { params?: { - id?: string + groupId?: string } children: React.ReactNode } @@ -61,10 +63,11 @@ const BlockedBlankslate = ({ group }: { group: Group }) => ( /** Page to display a group. */ const GroupPage: React.FC = ({ params, children }) => { const intl = useIntl(); + const features = useFeatures(); const match = useRouteMatch(); const me = useOwnAccount(); - const id = params?.id || ''; + const id = params?.groupId || ''; const { group } = useGroup(id); const { accounts: pending } = useGroupMembershipRequests(id); @@ -73,24 +76,42 @@ const GroupPage: React.FC = ({ params, children }) => { const isBlocked = group?.relationship?.blocked_by; const isPrivate = group?.locked; - const items = [ - { + // if ((group as any) === false) { + // return ( + // + // ); + // } + + const tabItems = useMemo(() => { + const items = []; + items.push({ text: intl.formatMessage(messages.all), - to: `/groups/${group?.id}`, - name: '/groups/:id', - }, - { + to: `/group/${group?.slug}`, + name: '/group/:groupSlug', + }); + + if (features.groupsTags) { + items.push({ + text: intl.formatMessage(messages.tags), + to: `/group/${group?.slug}/tags`, + name: '/group/:groupSlug/tags', + }); + } + + items.push({ text: intl.formatMessage(messages.members), - to: `/groups/${group?.id}/members`, - name: '/groups/:id/members', + to: `/group/${group?.slug}/members`, + name: '/group/:groupSlug/members', count: pending.length, }, { text: intl.formatMessage(messages.media), - to: `/groups/${group?.id}/media`, - name: '/groups/:id/media', - }, - ]; + to: `/group/${group?.slug}/media`, + name: '/group/:groupSlug/media', + }); + + return items; + }, [features.groupsTags]); const renderChildren = () => { if (!isMember && isPrivate) { @@ -109,7 +130,7 @@ const GroupPage: React.FC = ({ params, children }) => { @@ -141,4 +162,4 @@ const GroupPage: React.FC = ({ params, children }) => { ); }; -export default GroupPage; +export default GroupLookupHoc(GroupPage as any) as any; diff --git a/app/soapbox/schemas/group-tag.ts b/app/soapbox/schemas/group-tag.ts index cc64deec6..9fa885569 100644 --- a/app/soapbox/schemas/group-tag.ts +++ b/app/soapbox/schemas/group-tag.ts @@ -1,7 +1,12 @@ -import { z } from 'zod'; +import z from 'zod'; const groupTagSchema = z.object({ + id: z.string(), name: z.string(), + uses: z.number().optional(), + url: z.string().optional(), + pinned: z.boolean().optional().catch(false), + visible: z.boolean().optional().default(true), }); type GroupTag = z.infer; 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(''), diff --git a/app/soapbox/schemas/index.ts b/app/soapbox/schemas/index.ts index 1eed8905b..a675b52d2 100644 --- a/app/soapbox/schemas/index.ts +++ b/app/soapbox/schemas/index.ts @@ -6,6 +6,7 @@ export { customEmojiSchema } from './custom-emoji'; export { groupSchema } from './group'; export { groupMemberSchema } from './group-member'; export { groupRelationshipSchema } from './group-relationship'; +export { groupTagSchema } from './group-tag'; export { relationshipSchema } from './relationship'; /** @@ -16,4 +17,5 @@ export type { CustomEmoji } from './custom-emoji'; export type { Group } from './group'; export type { GroupMember } from './group-member'; export type { GroupRelationship } from './group-relationship'; +export type { GroupTag } from './group-tag'; export type { Relationship } from './relationship'; diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts index b24e75525..9c5a68bda 100644 --- a/app/soapbox/utils/features.ts +++ b/app/soapbox/utils/features.ts @@ -559,6 +559,11 @@ const getInstanceFeatures = (instance: Instance) => { */ groupsSearch: v.software === TRUTHSOCIAL, + /** + * Can see topics for Groups. + */ + groupsTags: v.software === TRUTHSOCIAL, + /** * Can validate group names. */ diff --git a/package.json b/package.json index 56c63d683..f3692d203 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,6 @@ "@reach/popover": "^0.18.0", "@reach/rect": "^0.18.0", "@reach/tabs": "^0.18.0", - "@reach/tooltip": "^0.18.0", "@reduxjs/toolkit": "^1.8.1", "@sentry/browser": "^7.37.2", "@sentry/react": "^7.37.2", diff --git a/yarn.lock b/yarn.lock index e1d49699d..78284420c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2922,30 +2922,11 @@ "@reach/polymorphic" "0.18.0" "@reach/utils" "0.18.0" -"@reach/tooltip@^0.18.0": - version "0.18.0" - resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.18.0.tgz#6d416e77a82543af9a57d122962f9c0294fc2a5f" - integrity sha512-yugoTmTjB3qoMk/nUvcnw99MqpyE2TQMOXE29qnQhSqHriRwQhfftjXlTAGTSzsUJmbyms3A/1gQW0X61kjFZw== - dependencies: - "@reach/auto-id" "0.18.0" - "@reach/polymorphic" "0.18.0" - "@reach/portal" "0.18.0" - "@reach/rect" "0.18.0" - "@reach/utils" "0.18.0" - "@reach/visually-hidden" "0.18.0" - "@reach/utils@0.18.0": version "0.18.0" resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.18.0.tgz#4f3cebe093dd436eeaff633809bf0f68f4f9d2ee" integrity sha512-KdVMdpTgDyK8FzdKO9SCpiibuy/kbv3pwgfXshTI6tEcQT1OOwj7BAksnzGC0rPz0UholwC+AgkqEl3EJX3M1A== -"@reach/visually-hidden@0.18.0": - version "0.18.0" - resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.18.0.tgz#17923c08acc5946624c2836b2b09d359b3aa8c27" - integrity sha512-NsJ3oeHJtPc6UOeV6MHMuzQ5sl1ouKhW85i3C0S7VM+klxVlYScBZ2J4UVnWB50A2c+evdVpCnld2YeuyYYwBw== - dependencies: - "@reach/polymorphic" "0.18.0" - "@reduxjs/toolkit@^1.8.1": version "1.8.1" resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.1.tgz#94ee1981b8cf9227cda40163a04704a9544c9a9f"