From 6da45c3ef7bef11c93e091ba45891f0783cc03e0 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Thu, 23 Mar 2023 08:43:41 -0400 Subject: [PATCH 1/5] Add ability to search my Groups --- app/soapbox/features/group/manage-group.tsx | 3 +-- app/soapbox/hooks/__tests__/useGroupsPath.test.ts | 2 +- app/soapbox/hooks/api/index.ts | 2 +- app/soapbox/hooks/index.ts | 1 + 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/soapbox/features/group/manage-group.tsx b/app/soapbox/features/group/manage-group.tsx index 12dc0b11b..e8bed3f30 100644 --- a/app/soapbox/features/group/manage-group.tsx +++ b/app/soapbox/features/group/manage-group.tsx @@ -5,9 +5,8 @@ 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'; diff --git a/app/soapbox/hooks/__tests__/useGroupsPath.test.ts b/app/soapbox/hooks/__tests__/useGroupsPath.test.ts index 7596acd9a..d102fe412 100644 --- a/app/soapbox/hooks/__tests__/useGroupsPath.test.ts +++ b/app/soapbox/hooks/__tests__/useGroupsPath.test.ts @@ -53,7 +53,7 @@ describe('useGroupsPath()', () => { describe('when the user has groups', () => { beforeEach(() => { __stub((mock) => { - mock.onGet('/api/v1/groups').reply(200, [ + mock.onGet('/api/v1/groups?q=').reply(200, [ buildGroup({ display_name: 'Group', id: '1', diff --git a/app/soapbox/hooks/api/index.ts b/app/soapbox/hooks/api/index.ts index 800ea5857..3ab7be9a5 100644 --- a/app/soapbox/hooks/api/index.ts +++ b/app/soapbox/hooks/api/index.ts @@ -11,8 +11,8 @@ 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'; 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'; From 8ec8d4a2cae1b175650632daab013190aa65c2a9 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Thu, 23 Mar 2023 15:19:18 -0400 Subject: [PATCH 2/5] Use FloatingUI with Tooltip --- app/soapbox/components/ui/tooltip/tooltip.css | 12 -- app/soapbox/components/ui/tooltip/tooltip.tsx | 119 ++++++++++-------- package.json | 1 - yarn.lock | 19 --- 4 files changed, 70 insertions(+), 81 deletions(-) delete mode 100644 app/soapbox/components/ui/tooltip/tooltip.css 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/package.json b/package.json index 57831cd0e..ddd13f24a 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,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 4d6585981..5220b11d1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2749,30 +2749,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" From 2d52c8c3e48e1bdf8ebec8a8e236e0c5cf951b56 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Thu, 23 Mar 2023 15:20:19 -0400 Subject: [PATCH 3/5] Add support for Group tags --- .../entity-store/hooks/useEntityActions.ts | 3 +- .../group/components/group-tag-list-item.tsx | 152 ++++++++++++++++++ .../features/group/group-tag-timeline.tsx | 30 ++++ app/soapbox/features/group/group-tags.tsx | 54 +++++++ app/soapbox/features/ui/index.tsx | 4 + .../features/ui/util/async-components.ts | 8 + app/soapbox/hooks/api/groups/useGroupTags.ts | 20 +++ .../hooks/api/groups/useUpdateGroupTag.ts | 17 ++ app/soapbox/hooks/api/index.ts | 4 +- app/soapbox/pages/group-page.tsx | 38 +++-- app/soapbox/utils/features.ts | 5 + 11 files changed, 324 insertions(+), 11 deletions(-) create mode 100644 app/soapbox/features/group/components/group-tag-list-item.tsx create mode 100644 app/soapbox/features/group/group-tag-timeline.tsx create mode 100644 app/soapbox/features/group/group-tags.tsx create mode 100644 app/soapbox/hooks/api/groups/useGroupTags.ts create mode 100644 app/soapbox/hooks/api/groups/useUpdateGroupTag.ts diff --git a/app/soapbox/entity-store/hooks/useEntityActions.ts b/app/soapbox/entity-store/hooks/useEntityActions.ts index 8b87c52fd..ff27af340 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( 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..7792b3e81 --- /dev/null +++ b/app/soapbox/features/group/components/group-tag-list-item.tsx @@ -0,0 +1,152 @@ +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 { useUpdateGroupTag } from 'soapbox/hooks/api'; +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 intl = useIntl(); + const updateGroupTag = useUpdateGroupTag(group.id, tag.id); + + const toggleVisibility = () => { + updateGroupTag({ + pinned: !tag.visible, + }, { + onSuccess(entity: GroupTag) { + toast.success( + entity.visible ? + intl.formatMessage(messages.visibleSuccess) : + intl.formatMessage(messages.hiddenSuccess), + ); + }, + }); + }; + + const togglePin = () => { + updateGroupTag({ + pinned: !tag.pinned, + }, { + onSuccess(entity: GroupTag) { + 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)} + + + + + + + {tag.visible ? ( + renderPinIcon() + ) : null} + + + + + + + ); +}; + +export default GroupTagListItem; \ No newline at end of file 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..dc4c7d088 --- /dev/null +++ b/app/soapbox/features/group/group-tags.tsx @@ -0,0 +1,54 @@ +import React from 'react'; + +import ScrollableList from 'soapbox/components/scrollable-list'; +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: { id: string } +} + +const GroupTopics: React.FC = (props) => { + const groupId = props.params.id; + + 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 ( + <> + + {tags.map((tag) => ( + + ))} + + + ); +}; + +export default GroupTopics; diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index b967f27de..bcd6d8d24 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -126,6 +126,8 @@ import { GroupsTags, PendingGroupRequests, GroupMembers, + GroupTags, + GroupTagTimeline, GroupTimeline, ManageGroup, GroupBlockedMembers, @@ -301,6 +303,8 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {features.groupsDiscovery && } {features.groupsDiscovery && } {features.groupsPending && } + {features.groupsTags && } + {features.groupsTags && } {features.groups && } {features.groups && } {features.groups && } diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts index 654cab76d..e8187db46 100644 --- a/app/soapbox/features/ui/util/async-components.ts +++ b/app/soapbox/features/ui/util/async-components.ts @@ -578,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/useGroupTags.ts b/app/soapbox/hooks/api/groups/useGroupTags.ts new file mode 100644 index 000000000..4b724352e --- /dev/null +++ b/app/soapbox/hooks/api/groups/useGroupTags.ts @@ -0,0 +1,20 @@ +import { Entities } from 'soapbox/entity-store/entities'; +import { useEntities } from 'soapbox/entity-store/hooks'; +import { groupTagSchema } from 'soapbox/schemas'; + +import type { GroupTag } from 'soapbox/schemas'; + +function useGroupTags(groupId: string) { + const { entities, ...result } = useEntities( + [Entities.GROUP_TAGS, groupId], + '/api/mock/groups/tags', // `api/v1/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/useUpdateGroupTag.ts b/app/soapbox/hooks/api/groups/useUpdateGroupTag.ts new file mode 100644 index 000000000..2d4d61f69 --- /dev/null +++ b/app/soapbox/hooks/api/groups/useUpdateGroupTag.ts @@ -0,0 +1,17 @@ +import { Entities } from 'soapbox/entity-store/entities'; +import { useEntityActions } from 'soapbox/entity-store/hooks'; +import { groupTagSchema } from 'soapbox/schemas'; + +import type { GroupTag } from 'soapbox/schemas'; + +function useUpdateGroupTag(groupId: string, tagId: string) { + const { updateEntity } = useEntityActions( + [Entities.GROUP_TAGS, groupId, tagId], + { patch: `/api/mock/truth/groups/${groupId}/tags/${tagId}` }, + { schema: groupTagSchema }, + ); + + return updateEntity; +} + +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 3ab7be9a5..c8e1f67c3 100644 --- a/app/soapbox/hooks/api/index.ts +++ b/app/soapbox/hooks/api/index.ts @@ -16,6 +16,7 @@ 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'; @@ -23,8 +24,9 @@ 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/pages/group-page.tsx b/app/soapbox/pages/group-page.tsx index 449e250f3..07b9eb4d5 100644 --- a/app/soapbox/pages/group-page.tsx +++ b/app/soapbox/pages/group-page.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { useRouteMatch } from 'react-router-dom'; @@ -12,7 +12,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,6 +23,7 @@ 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 { @@ -61,6 +62,7 @@ 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(); @@ -73,13 +75,29 @@ 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', - }, - { + }); + + if (features.groupsTags) { + items.push({ + text: intl.formatMessage(messages.tags), + to: `/groups/${group?.id}/tags`, + name: '/groups/:id/tags', + }); + } + + items.push({ text: intl.formatMessage(messages.members), to: `/groups/${group?.id}/members`, name: '/groups/:id/members', @@ -89,8 +107,10 @@ const GroupPage: React.FC = ({ params, children }) => { text: intl.formatMessage(messages.media), to: `/groups/${group?.id}/media`, name: '/groups/:id/media', - }, - ]; + }); + + return items; + }, [features.groupsTags]); const renderChildren = () => { if (!isMember && isPrivate) { @@ -109,7 +129,7 @@ const GroupPage: React.FC = ({ params, children }) => { 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. */ From c5c5bd0d62c44fffd5a77f3fd217718e26d404ac Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Fri, 14 Apr 2023 15:15:34 -0400 Subject: [PATCH 4/5] Add ability to update Group tags --- .../entity-store/hooks/useEntityActions.ts | 6 +- .../group/components/group-tag-list-item.tsx | 83 ++++++++++++------- app/soapbox/features/group/group-tags.tsx | 59 ++++++++----- app/soapbox/hooks/api/groups/useGroupTags.ts | 5 +- .../hooks/api/groups/useUpdateGroupTag.ts | 11 +-- 5 files changed, 105 insertions(+), 59 deletions(-) diff --git a/app/soapbox/entity-store/hooks/useEntityActions.ts b/app/soapbox/entity-store/hooks/useEntityActions.ts index ff27af340..c7e2e431d 100644 --- a/app/soapbox/entity-store/hooks/useEntityActions.ts +++ b/app/soapbox/entity-store/hooks/useEntityActions.ts @@ -31,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/features/group/components/group-tag-list-item.tsx b/app/soapbox/features/group/components/group-tag-list-item.tsx index 7792b3e81..47f9f1ef6 100644 --- a/app/soapbox/features/group/components/group-tag-list-item.tsx +++ b/app/soapbox/features/group/components/group-tag-list-item.tsx @@ -3,7 +3,11 @@ 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'; @@ -29,15 +33,26 @@ interface IGroupMemberListItem { const GroupTagListItem = (props: IGroupMemberListItem) => { const { group, tag, isPinnable } = props; + const dispatch = useAppDispatch(); const intl = useIntl(); - const updateGroupTag = useUpdateGroupTag(group.id, tag.id); + 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({ - pinned: !tag.visible, + group_tag_type: tag.visible ? 'hidden' : 'normal', }, { - onSuccess(entity: GroupTag) { + onSuccess() { + const entity = { + ...tag, + visible: !tag.visible, + }; + dispatch(importEntities([entity], Entities.GROUP_TAGS)); + toast.success( entity.visible ? intl.formatMessage(messages.visibleSuccess) : @@ -49,9 +64,15 @@ const GroupTagListItem = (props: IGroupMemberListItem) => { const togglePin = () => { updateGroupTag({ - pinned: !tag.pinned, + group_tag_type: tag.pinned ? 'normal' : 'pinned', }, { - onSuccess(entity: GroupTag) { + onSuccess() { + const entity = { + ...tag, + pinned: !tag.pinned, + }; + dispatch(importEntities([entity], Entities.GROUP_TAGS)); + toast.success( entity.pinned ? intl.formatMessage(messages.pinSuccess) : @@ -73,7 +94,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => { > { @@ -106,12 +127,12 @@ const GroupTagListItem = (props: IGroupMemberListItem) => { #{tag.name} - + {intl.formatMessage(messages.total)}: {' '} @@ -121,30 +142,32 @@ const GroupTagListItem = (props: IGroupMemberListItem) => { - - {tag.visible ? ( - renderPinIcon() - ) : null} + {canEdit ? ( + + {tag.visible ? ( + renderPinIcon() + ) : null} - - - - + > + + + + ) : null} ); }; diff --git a/app/soapbox/features/group/group-tags.tsx b/app/soapbox/features/group/group-tags.tsx index dc4c7d088..d0b371d8b 100644 --- a/app/soapbox/features/group/group-tags.tsx +++ b/app/soapbox/features/group/group-tags.tsx @@ -1,6 +1,8 @@ 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'; @@ -26,28 +28,41 @@ const GroupTopics: React.FC = (props) => { const isPinnable = pinnedTags.length < 3; return ( - <> - - {tags.map((tag) => ( - - ))} - - + +
+ +
+ + + + + + } + emptyMessageCard={false} + > + {tags.map((tag) => ( + + ))} + ); }; diff --git a/app/soapbox/hooks/api/groups/useGroupTags.ts b/app/soapbox/hooks/api/groups/useGroupTags.ts index 4b724352e..42d81688f 100644 --- a/app/soapbox/hooks/api/groups/useGroupTags.ts +++ b/app/soapbox/hooks/api/groups/useGroupTags.ts @@ -1,13 +1,16 @@ 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/mock/groups/tags', // `api/v1/groups/${groupId}/tags` + () => api.get(`api/v1/truth/trends/groups/${groupId}/tags`), { schema: groupTagSchema }, ); diff --git a/app/soapbox/hooks/api/groups/useUpdateGroupTag.ts b/app/soapbox/hooks/api/groups/useUpdateGroupTag.ts index 2d4d61f69..1c68c714d 100644 --- a/app/soapbox/hooks/api/groups/useUpdateGroupTag.ts +++ b/app/soapbox/hooks/api/groups/useUpdateGroupTag.ts @@ -1,17 +1,18 @@ import { Entities } from 'soapbox/entity-store/entities'; import { useEntityActions } from 'soapbox/entity-store/hooks'; -import { groupTagSchema } from 'soapbox/schemas'; import type { GroupTag } from 'soapbox/schemas'; function useUpdateGroupTag(groupId: string, tagId: string) { - const { updateEntity } = useEntityActions( + const { updateEntity, ...rest } = useEntityActions( [Entities.GROUP_TAGS, groupId, tagId], - { patch: `/api/mock/truth/groups/${groupId}/tags/${tagId}` }, - { schema: groupTagSchema }, + { patch: `/api/v1/groups/${groupId}/tags/${tagId}` }, ); - return updateEntity; + return { + updateGroupTag: updateEntity, + ...rest, + }; } export { useUpdateGroupTag }; \ No newline at end of file From ddee915d3924d07f8f68bc46ee2a59429e6d2b05 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Mon, 17 Apr 2023 10:11:03 -0400 Subject: [PATCH 5/5] Lint + Tests --- app/soapbox/hooks/__tests__/useGroupsPath.test.ts | 2 +- app/soapbox/locales/en.json | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/app/soapbox/hooks/__tests__/useGroupsPath.test.ts b/app/soapbox/hooks/__tests__/useGroupsPath.test.ts index d102fe412..7596acd9a 100644 --- a/app/soapbox/hooks/__tests__/useGroupsPath.test.ts +++ b/app/soapbox/hooks/__tests__/useGroupsPath.test.ts @@ -53,7 +53,7 @@ describe('useGroupsPath()', () => { describe('when the user has groups', () => { beforeEach(() => { __stub((mock) => { - mock.onGet('/api/v1/groups?q=').reply(200, [ + mock.onGet('/api/v1/groups').reply(200, [ buildGroup({ display_name: 'Group', id: '1', diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index e762b040c..35bfb58a0 100644 --- a/app/soapbox/locales/en.json +++ b/app/soapbox/locales/en.json @@ -809,8 +809,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.",