From 0414c36a1e98734401cfc2dc7cba6905db376629 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Mon, 27 Feb 2023 08:25:59 -0500 Subject: [PATCH 1/9] Add Trending and Suggested Groups to discovery --- app/soapbox/components/group-card.tsx | 82 +++++++------ .../components/ui/carousel/carousel.tsx | 109 +++++++++++++++++ app/soapbox/components/ui/index.ts | 1 + .../groups/components/discover/group.tsx | 93 +++++++++++++++ .../components/discover/popular-groups.tsx | 54 +++++++++ .../components/discover/suggested-groups.tsx | 54 +++++++++ .../features/groups/components/tab-bar.tsx | 41 +++++++ app/soapbox/features/groups/discover.tsx | 22 ++++ app/soapbox/features/groups/index.tsx | 100 ++++++++-------- .../components/placeholder-group-card.tsx | 31 ++--- .../components/placeholder-group-discover.tsx | 38 ++++++ .../ui/components/panels/new-group-panel.tsx | 5 +- app/soapbox/features/ui/index.tsx | 2 + .../features/ui/util/async-components.ts | 4 + app/soapbox/locales/en.json | 4 +- app/soapbox/normalizers/group.ts | 1 + app/soapbox/queries/groups.ts | 111 ++++++++++++++++++ app/soapbox/utils/features.ts | 5 + package.json | 1 + tailwind.config.cjs | 1 + yarn.lock | 5 + 21 files changed, 655 insertions(+), 109 deletions(-) create mode 100644 app/soapbox/components/ui/carousel/carousel.tsx create mode 100644 app/soapbox/features/groups/components/discover/group.tsx create mode 100644 app/soapbox/features/groups/components/discover/popular-groups.tsx create mode 100644 app/soapbox/features/groups/components/discover/suggested-groups.tsx create mode 100644 app/soapbox/features/groups/components/tab-bar.tsx create mode 100644 app/soapbox/features/groups/discover.tsx create mode 100644 app/soapbox/features/placeholder/components/placeholder-group-discover.tsx create mode 100644 app/soapbox/queries/groups.ts diff --git a/app/soapbox/components/group-card.tsx b/app/soapbox/components/group-card.tsx index 15d8cf4971..a977e1ef01 100644 --- a/app/soapbox/components/group-card.tsx +++ b/app/soapbox/components/group-card.tsx @@ -17,43 +17,53 @@ const GroupCard: React.FC = ({ group }) => { const intl = useIntl(); return ( -
- -
- {group.header && {intl.formatMessage(messages.groupHeader)}} -
- -
-
- - - - {group.relationship?.role === 'admin' ? ( - - - - - ) : group.relationship?.role === 'moderator' && ( - - - - - )} - {group.locked ? ( - - - - - ) : ( - - - - - )} - - + + {/* Group Cover Image */} + + {group.header && ( + {intl.formatMessage(messages.groupHeader)} + )} -
+ + {/* Group Avatar */} +
+ +
+ + {/* Group Info */} + + + + + {group.relationship?.role === 'admin' ? ( + + + + + ) : group.relationship?.role === 'moderator' && ( + + + + + )} + + {group.locked ? ( + + + + + ) : ( + + + + + )} + + + ); }; diff --git a/app/soapbox/components/ui/carousel/carousel.tsx b/app/soapbox/components/ui/carousel/carousel.tsx new file mode 100644 index 0000000000..ddb10b37a7 --- /dev/null +++ b/app/soapbox/components/ui/carousel/carousel.tsx @@ -0,0 +1,109 @@ +import React, { useEffect, useState } from 'react'; + +import { useDimensions } from 'soapbox/hooks'; + +import HStack from '../hstack/hstack'; +import Icon from '../icon/icon'; + +interface ICarousel { + children: any + /** Optional height to force on controls */ + controlsHeight?: number + /** How many items in the carousel */ + itemCount: number + /** The minimum width per item */ + itemWidth: number +} + +/** + * Carousel + */ +const Carousel: React.FC = (props): JSX.Element => { + const { children, controlsHeight, itemCount, itemWidth } = props; + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [_ref, setContainerRef, { width: containerWidth }] = useDimensions(); + + const [pageSize, setPageSize] = useState(0); + const [currentPage, setCurrentPage] = useState(1); + + const numberOfPages = Math.ceil(itemCount / pageSize); + const width = containerWidth / (Math.floor(containerWidth / itemWidth)); + + const hasNextPage = currentPage < numberOfPages && numberOfPages > 1; + const hasPrevPage = currentPage > 1 && numberOfPages > 1; + + const handleNextPage = () => setCurrentPage((prevPage) => prevPage + 1); + const handlePrevPage = () => setCurrentPage((prevPage) => prevPage - 1); + + const renderChildren = () => { + if (typeof children === 'function') { + return children({ width: width || 'auto' }); + } + + return children; + }; + + useEffect(() => { + if (containerWidth) { + setPageSize(Math.round(containerWidth / width)); + } + }, [containerWidth, width]); + + return ( + +
+ +
+ +
+ + {renderChildren()} + +
+ +
+ +
+ + ); +}; + +export default Carousel; \ No newline at end of file diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts index 964125cf0f..20bcd31c8d 100644 --- a/app/soapbox/components/ui/index.ts +++ b/app/soapbox/components/ui/index.ts @@ -2,6 +2,7 @@ export { default as Accordion } from './accordion/accordion'; export { default as Avatar } from './avatar/avatar'; export { default as Banner } from './banner/banner'; export { default as Button } from './button/button'; +export { default as Carousel } from './carousel/carousel'; export { Card, CardBody, CardHeader, CardTitle } from './card/card'; export { default as Checkbox } from './checkbox/checkbox'; export { Column, ColumnHeader } from './column/column'; diff --git a/app/soapbox/features/groups/components/discover/group.tsx b/app/soapbox/features/groups/components/discover/group.tsx new file mode 100644 index 0000000000..dc5d621a4b --- /dev/null +++ b/app/soapbox/features/groups/components/discover/group.tsx @@ -0,0 +1,93 @@ +import React, { forwardRef } from 'react'; +import { FormattedMessage } from 'react-intl'; + +import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui'; +import { Group as GroupEntity } from 'soapbox/types/entities'; +import { shortNumberFormat } from 'soapbox/utils/numbers'; + + +interface IGroup { + group: GroupEntity + width: number +} + +const Group = forwardRef((props: IGroup, ref: React.ForwardedRef) => { + const { group, width = 'auto' } = props; + + return ( +
+ + {group.header && ( + Group cover + )} + + + + + + + + + + + {typeof group.members_count === 'undefined' ? ( + + {group.locked ? ( + + ) : ( + + )} + + ) : ( + + {shortNumberFormat(group.members_count)} + {' '} + members + + )} + + + + +
+ + + +
+ ); +}); + +export default Group; \ No newline at end of file diff --git a/app/soapbox/features/groups/components/discover/popular-groups.tsx b/app/soapbox/features/groups/components/discover/popular-groups.tsx new file mode 100644 index 0000000000..8ac7d7387f --- /dev/null +++ b/app/soapbox/features/groups/components/discover/popular-groups.tsx @@ -0,0 +1,54 @@ +import React, { useState } from 'react'; + +import { Carousel, Stack, Text } from 'soapbox/components/ui'; +import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover'; +import { usePopularGroups } from 'soapbox/queries/groups'; + +import Group from './group'; + +const PopularGroups = () => { + const { groups, isFetching } = usePopularGroups(); + + const [groupCover, setGroupCover] = useState(null); + + return ( + + + Popular Groups + + + + {({ width }: { width: number }) => ( + <> + {isFetching ? ( + new Array(20).fill(0).map((_, idx) => ( +
+ +
+ )) + ) : ( + groups.map((group) => ( + + )) + )} + + )} + + + ); +}; + +export default PopularGroups; \ No newline at end of file diff --git a/app/soapbox/features/groups/components/discover/suggested-groups.tsx b/app/soapbox/features/groups/components/discover/suggested-groups.tsx new file mode 100644 index 0000000000..bf441a0aea --- /dev/null +++ b/app/soapbox/features/groups/components/discover/suggested-groups.tsx @@ -0,0 +1,54 @@ +import React, { useState } from 'react'; + +import { Carousel, Stack, Text } from 'soapbox/components/ui'; +import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover'; +import { useSuggestedGroups } from 'soapbox/queries/groups'; + +import Group from './group'; + +const SuggestedGroups = () => { + const { groups, isFetching } = useSuggestedGroups(); + + const [groupCover, setGroupCover] = useState(null); + + return ( + + + Suggested For You + + + + {({ width }: { width: number }) => ( + <> + {isFetching ? ( + new Array(20).fill(0).map((_, idx) => ( +
+ +
+ )) + ) : ( + groups.map((group) => ( + + )) + )} + + )} + + + ); +}; + +export default SuggestedGroups; \ No newline at end of file diff --git a/app/soapbox/features/groups/components/tab-bar.tsx b/app/soapbox/features/groups/components/tab-bar.tsx new file mode 100644 index 0000000000..7a342bfc83 --- /dev/null +++ b/app/soapbox/features/groups/components/tab-bar.tsx @@ -0,0 +1,41 @@ +import React, { useMemo } from 'react'; +import { useHistory } from 'react-router-dom'; + +import { Tabs } from 'soapbox/components/ui'; + +import type { Item } from 'soapbox/components/ui/tabs/tabs'; + +export enum TabItems { + MY_GROUPS = 'MY_GROUPS', + FIND_GROUPS = 'FIND_GROUPS' +} + +interface ITabBar { + activeTab: TabItems +} + +const TabBar = ({ activeTab }: ITabBar) => { + const history = useHistory(); + + const tabItems: Item[] = useMemo(() => ([ + { + text: 'My Groups', + action: () => history.push('/groups'), + name: TabItems.MY_GROUPS, + }, + { + text: 'Find Groups', + action: () => history.push('/groups/discover'), + name: TabItems.FIND_GROUPS, + }, + ]), []); + + return ( + + ); +}; + +export default TabBar; \ No newline at end of file diff --git a/app/soapbox/features/groups/discover.tsx b/app/soapbox/features/groups/discover.tsx new file mode 100644 index 0000000000..3145e3a58b --- /dev/null +++ b/app/soapbox/features/groups/discover.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +import { Stack } from 'soapbox/components/ui'; + +import PopularGroups from './components/discover/popular-groups'; +import SuggestedGroups from './components/discover/suggested-groups'; +import TabBar, { TabItems } from './components/tab-bar'; + +const Discover: React.FC = () => { + return ( + + + + + + + + + ); +}; + +export default Discover; diff --git a/app/soapbox/features/groups/index.tsx b/app/soapbox/features/groups/index.tsx index 85a092e0be..f48bd1520d 100644 --- a/app/soapbox/features/groups/index.tsx +++ b/app/soapbox/features/groups/index.tsx @@ -1,78 +1,65 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; -import { createSelector } from 'reselect'; -import { fetchGroups } from 'soapbox/actions/groups'; import { openModal } from 'soapbox/actions/modals'; import GroupCard from 'soapbox/components/group-card'; import ScrollableList from 'soapbox/components/scrollable-list'; -import { Button, Column, Spinner, Stack, Text } from 'soapbox/components/ui'; -import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; +import { Button, Stack, Text } from 'soapbox/components/ui'; +import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks'; +import { useGroups } from 'soapbox/queries/groups'; import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions'; import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card'; -import type { List as ImmutableList } from 'immutable'; -import type { RootState } from 'soapbox/store'; +import TabBar, { TabItems } from './components/tab-bar'; + import type { Group as GroupEntity } from 'soapbox/types/entities'; -const getOrderedGroups = createSelector([ - (state: RootState) => state.groups.items, - (state: RootState) => state.groups.isLoading, - (state: RootState) => state.group_relationships, -], (groups, isLoading, group_relationships) => ({ - groups: (groups.toList().filter((item: GroupEntity | false) => !!item) as ImmutableList) - .map((item) => item.set('relationship', group_relationships.get(item.id) || null)) - .filter((item) => item.relationship?.member) - .sort((a, b) => a.display_name.localeCompare(b.display_name)), - isLoading, -})); +// const getOrderedGroups = createSelector([ +// (state: RootState) => state.groups.items, +// (state: RootState) => state.group_relationships, +// ], (groups, group_relationships) => ({ +// groups: (groups.toList().filter((item: GroupEntity | false) => !!item) as ImmutableList) +// .map((item) => item.set('relationship', group_relationships.get(item.id) || null)) +// .filter((item) => item.relationship?.member) +// .sort((a, b) => a.display_name.localeCompare(b.display_name)), +// })); + +const EmptyMessage = () => ( + + + + + + + + + + + +); const Groups: React.FC = () => { const dispatch = useAppDispatch(); + const features = useFeatures(); - const { groups, isLoading } = useAppSelector((state) => getOrderedGroups(state)); const canCreateGroup = useAppSelector((state) => hasPermission(state, PERMISSION_CREATE_GROUPS)); - useEffect(() => { - dispatch(fetchGroups()); - }, []); + const { groups, isLoading } = useGroups(); const createGroup = () => { dispatch(openModal('MANAGE_GROUP')); }; - if (!groups) { - return ( - - - - ); - } - - const emptyMessage = ( - - - - - - - - - - - - ); - return ( - + {canCreateGroup && ( )} + + {features.groupsDiscovery && ( + + )} + } itemClassName='py-3 first:pt-0 last:pb-0' isLoading={isLoading} - showLoading={isLoading && !groups.count()} + showLoading={isLoading && groups.length === 0} placeholderComponent={PlaceholderGroupCard} placeholderCount={3} > diff --git a/app/soapbox/features/placeholder/components/placeholder-group-card.tsx b/app/soapbox/features/placeholder/components/placeholder-group-card.tsx index 44ece7320f..f07012f8f2 100644 --- a/app/soapbox/features/placeholder/components/placeholder-group-card.tsx +++ b/app/soapbox/features/placeholder/components/placeholder-group-card.tsx @@ -5,23 +5,26 @@ import { HStack, Stack, Text } from 'soapbox/components/ui'; import { generateText, randomIntFromInterval } from '../utils'; const PlaceholderGroupCard = () => { - const groupNameLength = randomIntFromInterval(5, 25); - const roleLength = randomIntFromInterval(5, 15); - const privacyLength = randomIntFromInterval(5, 15); + const groupNameLength = randomIntFromInterval(12, 20); return ( -
- -
-
-
-
+
+ + {/* Group Cover Image */} +
+ + {/* Group Avatar */} +
+
- - {generateText(groupNameLength)} - - {generateText(roleLength)} - {generateText(privacyLength)} + + {/* Group Info */} + + {generateText(groupNameLength)} + + + {generateText(6)} + {generateText(6)} diff --git a/app/soapbox/features/placeholder/components/placeholder-group-discover.tsx b/app/soapbox/features/placeholder/components/placeholder-group-discover.tsx new file mode 100644 index 0000000000..767dd5e0b1 --- /dev/null +++ b/app/soapbox/features/placeholder/components/placeholder-group-discover.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +import { HStack, Stack, Text } from 'soapbox/components/ui'; + +import { generateText, randomIntFromInterval } from '../utils'; + +const PlaceholderGroupDiscover = () => { + const groupNameLength = randomIntFromInterval(12, 20); + + return ( + + + {/* Group Cover Image */} +
+ + + {/* Group Avatar */} +
+ + {/* Group Info */} + + {generateText(groupNameLength)} + + + {generateText(6)} + {generateText(6)} + + + + + + {/* Join Group Button */} +
+ + ); +}; + +export default PlaceholderGroupDiscover; diff --git a/app/soapbox/features/ui/components/panels/new-group-panel.tsx b/app/soapbox/features/ui/components/panels/new-group-panel.tsx index 9710eeb82a..9eba9c7e0f 100644 --- a/app/soapbox/features/ui/components/panels/new-group-panel.tsx +++ b/app/soapbox/features/ui/components/panels/new-group-panel.tsx @@ -21,7 +21,7 @@ const NewGroupPanel = () => { - + @@ -30,12 +30,11 @@ const NewGroupPanel = () => { ); diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index 3a69b82a7b..f184b8a8d8 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -115,6 +115,7 @@ import { EventDiscussion, Events, Groups, + GroupsDiscover, GroupMembers, GroupTimeline, ManageGroup, @@ -282,6 +283,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {features.groups && } + {features.groupsDiscovery && } {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 6e18f5771e..ba16dae699 100644 --- a/app/soapbox/features/ui/util/async-components.ts +++ b/app/soapbox/features/ui/util/async-components.ts @@ -542,6 +542,10 @@ export function Groups() { return import(/* webpackChunkName: "features/groups" */'../../groups'); } +export function GroupsDiscover() { + return import(/* webpackChunkName: "features/groups/discover" */'../../groups/discover'); +} + export function GroupMembers() { return import(/* webpackChunkName: "features/groups" */'../../group/group-members'); } diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index dc55b1f835..f9b638009d 100644 --- a/app/soapbox/locales/en.json +++ b/app/soapbox/locales/en.json @@ -987,9 +987,9 @@ "new_event_panel.action": "Create event", "new_event_panel.subtitle": "Can't find what you're looking for? Schedule your own event.", "new_event_panel.title": "Create New Event", - "new_group_panel.action": "Create group", + "new_group_panel.action": "Create Group", "new_group_panel.subtitle": "Can't find what you're looking for? Start your own private or public group.", - "new_group_panel.title": "Create New Group", + "new_group_panel.title": "Create Group", "notification.favourite": "{name} liked your post", "notification.follow": "{name} followed you", "notification.follow_request": "{name} has requested to follow you", diff --git a/app/soapbox/normalizers/group.ts b/app/soapbox/normalizers/group.ts index 397ec5eeec..2c94d873db 100644 --- a/app/soapbox/normalizers/group.ts +++ b/app/soapbox/normalizers/group.ts @@ -29,6 +29,7 @@ export const GroupRecord = ImmutableRecord({ id: '', locked: false, membership_required: false, + members_count: undefined as number | undefined, note: '', statuses_visibility: 'public', uri: '', diff --git a/app/soapbox/queries/groups.ts b/app/soapbox/queries/groups.ts new file mode 100644 index 0000000000..fbacb7182f --- /dev/null +++ b/app/soapbox/queries/groups.ts @@ -0,0 +1,111 @@ +import { useInfiniteQuery, useQuery } from '@tanstack/react-query'; + +import { fetchGroupRelationships } from 'soapbox/actions/groups'; +import { importFetchedGroups } from 'soapbox/actions/importer'; +import { getNextLink } from 'soapbox/api'; +import { useApi, useAppDispatch, useFeatures, useOwnAccount } from 'soapbox/hooks'; +import { normalizeGroup } from 'soapbox/normalizers'; +import { Group } from 'soapbox/types/entities'; +import { flattenPages, PaginatedResult } from 'soapbox/utils/queries'; + +const GroupKeys = { + myGroups: (userId: string) => ['groups', userId] as const, + popularGroups: ['groups', 'popular'] as const, + suggestedGroups: ['groups', 'suggested'] as const, +}; + +const useGroups = () => { + const api = useApi(); + const account = useOwnAccount(); + const dispatch = useAppDispatch(); + + const getGroups = async (pageParam?: any): Promise> => { + const endpoint = '/api/mock/groups'; // '/api/v1/groups'; + const nextPageLink = pageParam?.link; + const uri = nextPageLink || endpoint; + const response = await api.get(uri); + const { data } = response; + + const link = getNextLink(response); + const hasMore = !!link; + const result = data.map(normalizeGroup); + + // Note: Temporary while part of Groups is using Redux + dispatch(importFetchedGroups(result)); + dispatch(fetchGroupRelationships(result.map((item) => item.id))); + + return { + result, + hasMore, + link, + }; + }; + + const queryInfo = useInfiniteQuery( + GroupKeys.myGroups(account?.id as string), + ({ pageParam }: any) => getGroups(pageParam), + { + enabled: !!account, + keepPreviousData: true, + getNextPageParam: (config) => { + if (config?.hasMore) { + return { nextLink: config?.link }; + } + + return undefined; + }, + }); + + const data = flattenPages(queryInfo.data); + + return { + ...queryInfo, + groups: data || [], + }; +}; + +const usePopularGroups = () => { + const api = useApi(); + const features = useFeatures(); + + const getQuery = async () => { + const { data } = await api.get('/api/mock/groups'); // '/api/v1/truth/trends/groups' + const result = data.map(normalizeGroup); + + return result; + }; + + const queryInfo = useQuery(GroupKeys.popularGroups, getQuery, { + enabled: features.groupsDiscovery, + placeholderData: [], + }); + + return { + groups: queryInfo.data || [], + ...queryInfo, + }; +}; + +const useSuggestedGroups = () => { + const api = useApi(); + const features = useFeatures(); + + const getQuery = async () => { + const { data } = await api.get('/api/mock/groups'); // /api/v1/truth/suggestions/groups + const result = data.map(normalizeGroup); + + return result; + }; + + const queryInfo = useQuery(GroupKeys.suggestedGroups, getQuery, { + enabled: features.groupsDiscovery, + placeholderData: [], + }); + + return { + groups: queryInfo.data || [], + ...queryInfo, + }; +}; + +export { useGroups, usePopularGroups, useSuggestedGroups }; diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts index 3b1c14b77f..8956411ddd 100644 --- a/app/soapbox/utils/features.ts +++ b/app/soapbox/utils/features.ts @@ -499,6 +499,11 @@ const getInstanceFeatures = (instance: Instance) => { */ groups: false, + /** + * Can see trending/suggested Groups. + */ + groupsDiscovery: v.software === TRUTHSOCIAL, + /** * Can hide follows/followers lists and counts. * @see PATCH /api/v1/accounts/update_credentials diff --git a/package.json b/package.json index 79d36fa67f..7410e33a50 100644 --- a/package.json +++ b/package.json @@ -205,6 +205,7 @@ "@storybook/manager-webpack5": "^6.5.16", "@storybook/react": "^6.5.16", "@storybook/testing-library": "^0.0.13", + "@tailwindcss/aspect-ratio": "^0.4.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.0.3", diff --git a/tailwind.config.cjs b/tailwind.config.cjs index d5c9d5f068..10270a77f9 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -100,5 +100,6 @@ module.exports = { require('@tailwindcss/forms'), require('@tailwindcss/line-clamp'), require('@tailwindcss/typography'), + require('@tailwindcss/aspect-ratio'), ], }; diff --git a/yarn.lock b/yarn.lock index 482b61c666..3e8a579298 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3831,6 +3831,11 @@ resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.4.0.tgz#34b1b0d818dc00926b956c3424bff48b89a5b439" integrity sha512-JZY9Kk3UsQoqp7Rw/BuWw1PrkRwv5h0psjJBbj+Cn9UVyhdzr5vztg2mywXBAJ+jFBUL/pjnVcIvOzKFw4CXng== +"@tailwindcss/aspect-ratio@^0.4.2": + version "0.4.2" + resolved "https://registry.yarnpkg.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz#9ffd52fee8e3c8b20623ff0dcb29e5c21fb0a9ba" + integrity sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ== + "@tailwindcss/forms@^0.5.3": version "0.5.3" resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.3.tgz#e4d7989686cbcaf416c53f1523df5225332a86e7" From e7897228c6d07d89b0ac758a32b799266437a624 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Tue, 28 Feb 2023 10:26:27 -0500 Subject: [PATCH 2/9] Add support for Group search --- .../groups/components/discover/group.tsx | 5 +- .../components/discover/search/index.tsx | 64 +++++++ .../discover/search/no-results-blankslate.tsx | 22 +++ .../discover/search/recent-searches.tsx | 83 ++++++++++ .../components/discover/search/results.tsx | 156 ++++++++++++++++++ app/soapbox/features/groups/discover.tsx | 67 +++++++- .../components/placeholder-group-search.tsx | 43 +++++ app/soapbox/normalizers/group.ts | 6 + app/soapbox/queries/groups/search.ts | 67 ++++++++ app/soapbox/settings.ts | 3 + app/soapbox/utils/features.ts | 2 +- app/soapbox/utils/groups.ts | 35 ++++ 12 files changed, 545 insertions(+), 8 deletions(-) create mode 100644 app/soapbox/features/groups/components/discover/search/index.tsx create mode 100644 app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx create mode 100644 app/soapbox/features/groups/components/discover/search/recent-searches.tsx create mode 100644 app/soapbox/features/groups/components/discover/search/results.tsx create mode 100644 app/soapbox/features/placeholder/components/placeholder-group-search.tsx create mode 100644 app/soapbox/queries/groups/search.ts create mode 100644 app/soapbox/utils/groups.ts diff --git a/app/soapbox/features/groups/components/discover/group.tsx b/app/soapbox/features/groups/components/discover/group.tsx index dc5d621a4b..b7df09b408 100644 --- a/app/soapbox/features/groups/components/discover/group.tsx +++ b/app/soapbox/features/groups/components/discover/group.tsx @@ -5,10 +5,9 @@ import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui import { Group as GroupEntity } from 'soapbox/types/entities'; import { shortNumberFormat } from 'soapbox/utils/numbers'; - interface IGroup { group: GroupEntity - width: number + width?: number } const Group = forwardRef((props: IGroup, ref: React.ForwardedRef) => { @@ -84,7 +83,7 @@ const Group = forwardRef((props: IGroup, ref: React.ForwardedRef theme='primary' block > - Join Group + {group.locked ? 'Request to Join' : 'Join Group'}
); diff --git a/app/soapbox/features/groups/components/discover/search/index.tsx b/app/soapbox/features/groups/components/discover/search/index.tsx new file mode 100644 index 0000000000..083dab8d57 --- /dev/null +++ b/app/soapbox/features/groups/components/discover/search/index.tsx @@ -0,0 +1,64 @@ +import React, { useEffect } from 'react'; + +import { Stack } from 'soapbox/components/ui'; +import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search'; +import { useDebounce, useOwnAccount } from 'soapbox/hooks'; +import { useGroupSearch } from 'soapbox/queries/groups/search'; +import { saveGroupSearch } from 'soapbox/utils/groups'; + +import NoResultsBlankslate from './no-results-blankslate'; +import RecentSearches from './recent-searches'; +import Results from './results'; + +interface Props { + onSelect(value: string): void + searchValue: string +} + +export default (props: Props) => { + const { onSelect, searchValue } = props; + + const me = useOwnAccount(); + const debounce = useDebounce; + + const debouncedValue = debounce(searchValue as string, 300); + const debouncedValueToSave = debounce(searchValue as string, 1000); + + const groupSearchResult = useGroupSearch(debouncedValue); + const { groups, isFetching, isFetched } = groupSearchResult; + + const hasSearchResults = isFetched && groups.length > 0; + const hasNoSearchResults = isFetched && groups.length === 0; + + useEffect(() => { + if (debouncedValueToSave && debouncedValueToSave.length >= 0) { + saveGroupSearch(me?.id as string, debouncedValueToSave); + } + }, [debouncedValueToSave]); + + if (isFetching) { + return ( + + + + + + ); + } + + if (hasNoSearchResults) { + return ; + } + + if (hasSearchResults) { + return ( + + ); + } + + return ( + + ); +}; \ No newline at end of file diff --git a/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx b/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx new file mode 100644 index 0000000000..b4ff0d6050 --- /dev/null +++ b/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; + +import { Stack, Text } from 'soapbox/components/ui'; + +export default () => ( + + + + + + + + + +); \ No newline at end of file diff --git a/app/soapbox/features/groups/components/discover/search/recent-searches.tsx b/app/soapbox/features/groups/components/discover/search/recent-searches.tsx new file mode 100644 index 0000000000..efe0e76fe0 --- /dev/null +++ b/app/soapbox/features/groups/components/discover/search/recent-searches.tsx @@ -0,0 +1,83 @@ +import React, { useState } from 'react'; +import { FormattedMessage } from 'react-intl'; +import { Virtuoso } from 'react-virtuoso'; + +import { HStack, Icon, Stack, Text } from 'soapbox/components/ui'; +import { useOwnAccount } from 'soapbox/hooks'; +import { groupSearchHistory } from 'soapbox/settings'; +import { clearRecentGroupSearches } from 'soapbox/utils/groups'; + +interface Props { + onSelect(value: string): void +} + +export default (props: Props) => { + const { onSelect } = props; + + const me = useOwnAccount(); + + const [recentSearches, setRecentSearches] = useState(groupSearchHistory.get(me?.id as string) || []); + + const onClearRecentSearches = () => { + clearRecentGroupSearches(me?.id as string); + setRecentSearches([]); + }; + + return ( + + {recentSearches.length > 0 ? ( + <> + + + Recent searches + + + + + + ( +
+ +
+ )} + /> + + ) : ( + + + + + + + + + + )} + + ); +}; \ No newline at end of file diff --git a/app/soapbox/features/groups/components/discover/search/results.tsx b/app/soapbox/features/groups/components/discover/search/results.tsx new file mode 100644 index 0000000000..08494ebdf2 --- /dev/null +++ b/app/soapbox/features/groups/components/discover/search/results.tsx @@ -0,0 +1,156 @@ +import clsx from 'clsx'; +import React, { useCallback, useState } from 'react'; +import { FormattedMessage } from 'react-intl'; +import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso'; + +import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui'; +import { useGroupSearch } from 'soapbox/queries/groups/search'; +import { Group } from 'soapbox/types/entities'; +import { shortNumberFormat } from 'soapbox/utils/numbers'; + +import GroupComp from '../group'; + +interface Props { + groupSearchResult: ReturnType +} + +enum Layout { + LIST = 'LIST', + GRID = 'GRID' +} + +const GridList: Components['List'] = React.forwardRef((props, ref) => { + const { context, ...rest } = props; + return
; +}); + +export default (props: Props) => { + const { groupSearchResult } = props; + + const [layout, setLayout] = useState(Layout.LIST); + + const { groups, hasNextPage, isFetching, fetchNextPage } = groupSearchResult; + + const handleLoadMore = () => { + if (hasNextPage && !isFetching) { + fetchNextPage(); + } + }; + + const renderGroupList = useCallback((group: Group, index: number) => ( + + + + + + + + + + + + {group.locked ? ( + + ) : ( + + )} + + + {typeof group.members_count !== 'undefined' && ( + <> + • + + {shortNumberFormat(group.members_count)} + {' '} + members + + + )} + + + + + + + ), []); + + const renderGroupGrid = useCallback((group: Group, index: number) => ( +
+ +
+ ), []); + + return ( + + + Groups + + + + + + + + + {layout === Layout.LIST ? ( + renderGroupList(group, index)} + endReached={handleLoadMore} + /> + ) : ( + renderGroupGrid(group, index)} + components={{ + Item: (props) => ( +
+ ), + List: GridList, + }} + endReached={handleLoadMore} + /> + )} + + ); +}; \ No newline at end of file diff --git a/app/soapbox/features/groups/discover.tsx b/app/soapbox/features/groups/discover.tsx index 3145e3a58b..4b40be492d 100644 --- a/app/soapbox/features/groups/discover.tsx +++ b/app/soapbox/features/groups/discover.tsx @@ -1,19 +1,78 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; -import { Stack } from 'soapbox/components/ui'; +import { HStack, Icon, IconButton, Input, Stack } from 'soapbox/components/ui'; import PopularGroups from './components/discover/popular-groups'; +import Search from './components/discover/search'; import SuggestedGroups from './components/discover/suggested-groups'; import TabBar, { TabItems } from './components/tab-bar'; +const messages = defineMessages({ + placeholder: { id: 'groups.discover.search.placeholder', defaultMessage: 'Search' }, +}); + const Discover: React.FC = () => { + const intl = useIntl(); + + const [isSearching, setIsSearching] = useState(false); + const [value, setValue] = useState(''); + + const hasSearchValue = value && value.length > 0; + + const cancelSearch = () => { + clearValue(); + setIsSearching(false); + }; + + const clearValue = () => setValue(''); + return ( - - + + {isSearching ? ( + + ) : null} + + setValue(event.target.value)} + onFocus={() => setIsSearching(true)} + outerClassName='mt-0 w-full' + theme='search' + append={ + + } + /> + + + {isSearching ? ( + setValue(newValue)} + /> + ) : ( + <> + + + + )} ); diff --git a/app/soapbox/features/placeholder/components/placeholder-group-search.tsx b/app/soapbox/features/placeholder/components/placeholder-group-search.tsx new file mode 100644 index 0000000000..b2e2dc6f84 --- /dev/null +++ b/app/soapbox/features/placeholder/components/placeholder-group-search.tsx @@ -0,0 +1,43 @@ +import React from 'react'; + +import { HStack, Stack, Text } from 'soapbox/components/ui'; + +import { generateText, randomIntFromInterval } from '../utils'; + +export default () => { + const groupNameLength = randomIntFromInterval(12, 20); + + return ( + + + {/* Group Avatar */} +
+ + + + {generateText(groupNameLength)} + + + + + {generateText(6)} + + + • + + + {generateText(6)} + + + + + + {/* Join Group Button */} +
+ + ); +}; diff --git a/app/soapbox/normalizers/group.ts b/app/soapbox/normalizers/group.ts index 2c94d873db..1fd8c69d9c 100644 --- a/app/soapbox/normalizers/group.ts +++ b/app/soapbox/normalizers/group.ts @@ -128,6 +128,11 @@ const normalizeFqn = (group: ImmutableMap) => { return group.set('fqn', fqn); }; +const normalizeLocked = (group: ImmutableMap) => { + const locked = group.get('locked') || group.get('group_visibility') === 'members_only'; + return group.set('locked', locked); +}; + /** Rewrite `

` to empty string. */ const fixNote = (group: ImmutableMap) => { @@ -145,6 +150,7 @@ export const normalizeGroup = (group: Record) => { normalizeAvatar(group); normalizeHeader(group); normalizeFqn(group); + normalizeLocked(group); fixDisplayName(group); fixNote(group); addInternalFields(group); diff --git a/app/soapbox/queries/groups/search.ts b/app/soapbox/queries/groups/search.ts new file mode 100644 index 0000000000..3da166cc22 --- /dev/null +++ b/app/soapbox/queries/groups/search.ts @@ -0,0 +1,67 @@ +import { useInfiniteQuery } from '@tanstack/react-query'; + +import { getNextLink } from 'soapbox/api'; +import { useApi, useFeatures } from 'soapbox/hooks'; +import { normalizeGroup } from 'soapbox/normalizers'; +import { Group } from 'soapbox/types/entities'; +import { flattenPages, PaginatedResult } from 'soapbox/utils/queries'; + +const GroupSearchKeys = { + search: (query?: string) => query ? ['groups', 'search', query] : ['groups', 'search'] as const, +}; + +type PageParam = { + link: string +} + +const useGroupSearch = (search?: string) => { + const api = useApi(); + const features = useFeatures(); + + const getSearchResults = async (pageParam: PageParam): Promise> => { + const nextPageLink = pageParam?.link; + const uri = nextPageLink || '/api/v1/groups/search'; + const response = await api.get(uri, { + params: search ? { + q: search, + } : undefined, + }); + const { data } = response; + + const link = getNextLink(response); + const hasMore = !!link; + const result = data.map(normalizeGroup); + + return { + result, + hasMore, + link, + }; + }; + + const queryInfo = useInfiniteQuery( + GroupSearchKeys.search(search), + ({ pageParam }) => getSearchResults(pageParam), + { + keepPreviousData: true, + enabled: features.groups && !!search, + getNextPageParam: (config) => { + if (config.hasMore) { + return { link: config.link }; + } + + return undefined; + }, + }); + + const data = flattenPages(queryInfo.data); + + return { + ...queryInfo, + groups: data || [], + }; +}; + +export { + useGroupSearch, +}; diff --git a/app/soapbox/settings.ts b/app/soapbox/settings.ts index 70efc0e8e0..e0ee058527 100644 --- a/app/soapbox/settings.ts +++ b/app/soapbox/settings.ts @@ -53,3 +53,6 @@ export const pushNotificationsSetting = new Settings('soapbox_push_notification_ /** Remember hashtag usage. */ export const tagHistory = new Settings('soapbox_tag_history'); + +/** Remember group usage. */ +export const groupSearchHistory = new Settings('soapbox_group_search_history'); diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts index 8956411ddd..02459210bc 100644 --- a/app/soapbox/utils/features.ts +++ b/app/soapbox/utils/features.ts @@ -497,7 +497,7 @@ const getInstanceFeatures = (instance: Instance) => { * @see POST /api/v1/admin/groups/:group_id/unsuspend * @see DELETE /api/v1/admin/groups/:group_id */ - groups: false, + groups: v.build === UNRELEASED, /** * Can see trending/suggested Groups. diff --git a/app/soapbox/utils/groups.ts b/app/soapbox/utils/groups.ts new file mode 100644 index 0000000000..28264e090b --- /dev/null +++ b/app/soapbox/utils/groups.ts @@ -0,0 +1,35 @@ +import { groupSearchHistory } from 'soapbox/settings'; + +const RECENT_SEARCHES_KEY = 'soapbox:recent-group-searches'; + +const clearRecentGroupSearches = (currentUserId: string) => groupSearchHistory.remove(currentUserId); + +const saveGroupSearch = (currentUserId: string, search: string) => { + let currentSearches: string[] = []; + + if (groupSearchHistory.get(currentUserId)) { + currentSearches = groupSearchHistory.get(currentUserId); + } + + if (currentSearches.indexOf(search) === -1) { + currentSearches.unshift(search); + if (currentSearches.length > 10) { + currentSearches.pop(); + } + + groupSearchHistory.set(currentUserId, currentSearches); + + return currentSearches; + } else { + // The search term has already been searched. Move it to the beginning + // of the cached list. + const indexOfSearch = currentSearches.indexOf(search); + const nextCurrentSearches = [...currentSearches]; + nextCurrentSearches.splice(0, 0, ...nextCurrentSearches.splice(indexOfSearch, 1)); + localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(nextCurrentSearches)); + + return nextCurrentSearches; + } +}; + +export { clearRecentGroupSearches, saveGroupSearch }; From a6c5d468f4f498eb9f8cdd7a29bab4f60aebb3b1 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 28 Feb 2023 10:05:23 -0600 Subject: [PATCH 3/9] Enable groups for v.build === UNRELEASED --- app/soapbox/utils/features.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts index 8956411ddd..02459210bc 100644 --- a/app/soapbox/utils/features.ts +++ b/app/soapbox/utils/features.ts @@ -497,7 +497,7 @@ const getInstanceFeatures = (instance: Instance) => { * @see POST /api/v1/admin/groups/:group_id/unsuspend * @see DELETE /api/v1/admin/groups/:group_id */ - groups: false, + groups: v.build === UNRELEASED, /** * Can see trending/suggested Groups. From 5acc231cdac1f27a71ca84cdb72c77834130cc38 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Tue, 28 Feb 2023 15:03:03 -0500 Subject: [PATCH 4/9] Add tests for Search component --- .../discover/search/__tests__/search.test.tsx | 62 +++++++++++++++++++ .../discover/search/no-results-blankslate.tsx | 4 +- .../discover/search/recent-searches.tsx | 4 +- .../components/discover/search/results.tsx | 2 +- .../discover/search/{index.tsx => search.tsx} | 0 app/soapbox/features/groups/discover.tsx | 2 +- 6 files changed, 68 insertions(+), 6 deletions(-) create mode 100644 app/soapbox/features/groups/components/discover/search/__tests__/search.test.tsx rename app/soapbox/features/groups/components/discover/search/{index.tsx => search.tsx} (100%) diff --git a/app/soapbox/features/groups/components/discover/search/__tests__/search.test.tsx b/app/soapbox/features/groups/components/discover/search/__tests__/search.test.tsx new file mode 100644 index 0000000000..698608363e --- /dev/null +++ b/app/soapbox/features/groups/components/discover/search/__tests__/search.test.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +import { __stub } from 'soapbox/api'; +import { render, screen, waitFor } from 'soapbox/jest/test-helpers'; +import { normalizeGroup, normalizeInstance } from 'soapbox/normalizers'; + +import Search from '../search'; + +const store = { + instance: normalizeInstance({ + version: '3.4.1 (compatible; TruthSocial 1.0.0+unreleased)', + }), +}; + +const renderApp = (children: React.ReactElement) => render(children, undefined, store); + +describe('', () => { + describe('with no results', () => { + beforeEach(() => { + __stub((mock) => { + mock.onGet('/api/v1/groups/search').reply(200, []); + }); + }); + + it('should render the blankslate', async () => { + renderApp(); + + await waitFor(() => { + expect(screen.getByTestId('no-results')).toBeInTheDocument(); + }); + }); + }); + + describe('with results', () => { + beforeEach(() => { + __stub((mock) => { + mock.onGet('/api/v1/groups/search').reply(200, [ + normalizeGroup({ + display_name: 'Group', + id: '1', + }), + ]); + }); + }); + + it('should render the results', async () => { + renderApp(); + + await waitFor(() => { + expect(screen.getByTestId('results')).toBeInTheDocument(); + }); + }); + }); + + describe('before starting a search', () => { + it('should render the RecentSearches component', () => { + renderApp(); + + expect(screen.getByTestId('recent-searches')).toBeInTheDocument(); + }); + }); +}); \ No newline at end of file diff --git a/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx b/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx index b4ff0d6050..1713488468 100644 --- a/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx +++ b/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx @@ -4,8 +4,8 @@ import { FormattedMessage } from 'react-intl'; import { Stack, Text } from 'soapbox/components/ui'; export default () => ( - - + + { }; return ( - + {recentSearches.length > 0 ? ( <> { ) : ( - + diff --git a/app/soapbox/features/groups/components/discover/search/results.tsx b/app/soapbox/features/groups/components/discover/search/results.tsx index 08494ebdf2..b51552f3d9 100644 --- a/app/soapbox/features/groups/components/discover/search/results.tsx +++ b/app/soapbox/features/groups/components/discover/search/results.tsx @@ -101,7 +101,7 @@ export default (props: Props) => { ), []); return ( - + Groups diff --git a/app/soapbox/features/groups/components/discover/search/index.tsx b/app/soapbox/features/groups/components/discover/search/search.tsx similarity index 100% rename from app/soapbox/features/groups/components/discover/search/index.tsx rename to app/soapbox/features/groups/components/discover/search/search.tsx diff --git a/app/soapbox/features/groups/discover.tsx b/app/soapbox/features/groups/discover.tsx index 4b40be492d..4e0c0c70a8 100644 --- a/app/soapbox/features/groups/discover.tsx +++ b/app/soapbox/features/groups/discover.tsx @@ -4,7 +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 Search from './components/discover/search'; +import Search from './components/discover/search/search'; import SuggestedGroups from './components/discover/suggested-groups'; import TabBar, { TabItems } from './components/tab-bar'; From d6d780780745291e2ce0d1d70cd4b3e51d06c89c Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Wed, 1 Mar 2023 09:43:30 -0500 Subject: [PATCH 5/9] Add tests for RecentSearches --- .../search/__tests__/recent-searches.test.tsx | 79 +++++++++++++++++++ .../discover/search/recent-searches.tsx | 7 +- 2 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 app/soapbox/features/groups/components/discover/search/__tests__/recent-searches.test.tsx diff --git a/app/soapbox/features/groups/components/discover/search/__tests__/recent-searches.test.tsx b/app/soapbox/features/groups/components/discover/search/__tests__/recent-searches.test.tsx new file mode 100644 index 0000000000..8c0e54262e --- /dev/null +++ b/app/soapbox/features/groups/components/discover/search/__tests__/recent-searches.test.tsx @@ -0,0 +1,79 @@ +import userEvent from '@testing-library/user-event'; +import { Map as ImmutableMap } from 'immutable'; +import React from 'react'; +import { VirtuosoMockContext } from 'react-virtuoso'; + +import { render, screen, waitFor } from 'soapbox/jest/test-helpers'; +import { normalizeAccount } from 'soapbox/normalizers'; +import { groupSearchHistory } from 'soapbox/settings'; +import { clearRecentGroupSearches, saveGroupSearch } from 'soapbox/utils/groups'; + +import RecentSearches from '../recent-searches'; + +const userId = '1'; +const store = { + me: userId, + accounts: ImmutableMap({ + [userId]: normalizeAccount({ + id: userId, + acct: 'justin-username', + display_name: 'Justin L', + avatar: 'test.jpg', + chats_onboarded: false, + }), + }), +}; + +const renderApp = (children: React.ReactNode) => ( + render( + + {children} + , + undefined, + store, + ) +); + +describe('', () => { + describe('with recent searches', () => { + beforeEach(() => { + saveGroupSearch(userId, 'foobar'); + }); + + afterEach(() => { + clearRecentGroupSearches(userId); + }); + + it('should render the recent searches', async () => { + renderApp(); + + await waitFor(() => { + expect(screen.getByTestId('recent-search')).toBeInTheDocument(); + }); + }); + + it('should support clearing recent searches', async () => { + renderApp(); + + expect(groupSearchHistory.get(userId)).toHaveLength(1); + await userEvent.click(screen.getByTestId('clear-recent-searches')); + expect(groupSearchHistory.get(userId)).toBeNull(); + }); + + it('should support click events on the results', async () => { + const handler = jest.fn(); + renderApp(); + expect(handler.mock.calls.length).toEqual(0); + await userEvent.click(screen.getByTestId('recent-search-result')); + expect(handler.mock.calls.length).toEqual(1); + }); + }); + + describe('without recent searches', () => { + it('should render the blankslate', async () => { + renderApp(); + + expect(screen.getByTestId('recent-searches-blankslate')).toBeInTheDocument(); + }); + }); +}); \ No newline at end of file diff --git a/app/soapbox/features/groups/components/discover/search/recent-searches.tsx b/app/soapbox/features/groups/components/discover/search/recent-searches.tsx index 3972766026..ca3c4168a7 100644 --- a/app/soapbox/features/groups/components/discover/search/recent-searches.tsx +++ b/app/soapbox/features/groups/components/discover/search/recent-searches.tsx @@ -36,7 +36,7 @@ export default (props: Props) => { Recent searches - ); } diff --git a/app/soapbox/features/groups/components/discover/group.tsx b/app/soapbox/features/groups/components/discover/group.tsx index b7df09b408..156605e71b 100644 --- a/app/soapbox/features/groups/components/discover/group.tsx +++ b/app/soapbox/features/groups/components/discover/group.tsx @@ -67,7 +67,13 @@ const Group = forwardRef((props: IGroup, ref: React.ForwardedRef {shortNumberFormat(group.members_count)} {' '} - members + )} diff --git a/app/soapbox/features/groups/components/discover/search/recent-searches.tsx b/app/soapbox/features/groups/components/discover/search/recent-searches.tsx index ca3c4168a7..1fe5e1d2f5 100644 --- a/app/soapbox/features/groups/components/discover/search/recent-searches.tsx +++ b/app/soapbox/features/groups/components/discover/search/recent-searches.tsx @@ -33,12 +33,18 @@ export default (props: Props) => { className='bg-white dark:bg-gray-900' > - Recent searches + @@ -71,11 +77,11 @@ export default (props: Props) => { ) : ( - + - + )} diff --git a/app/soapbox/features/groups/components/discover/search/results.tsx b/app/soapbox/features/groups/components/discover/search/results.tsx index b51552f3d9..59af5aebcf 100644 --- a/app/soapbox/features/groups/components/discover/search/results.tsx +++ b/app/soapbox/features/groups/components/discover/search/results.tsx @@ -80,7 +80,13 @@ export default (props: Props) => { {shortNumberFormat(group.members_count)} {' '} - members + )} @@ -89,7 +95,9 @@ export default (props: Props) => { ), []); @@ -103,7 +111,12 @@ export default (props: Props) => { return ( - Groups + + + + ); + } + + if (isRequested) { + return ( + + ); + } + + if (isAdmin) { + return ( + + ); + } + + return ( + + ); +}; + +export default GroupActionButton; \ No newline at end of file diff --git a/app/soapbox/features/group/components/group-header.tsx b/app/soapbox/features/group/components/group-header.tsx index 0e9eb65484..7b532ddccc 100644 --- a/app/soapbox/features/group/components/group-header.tsx +++ b/app/soapbox/features/group/components/group-header.tsx @@ -1,22 +1,23 @@ import { List as ImmutableList } from 'immutable'; import React from 'react'; -import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; +import { defineMessages, useIntl } from 'react-intl'; -import { joinGroup, leaveGroup } from 'soapbox/actions/groups'; import { openModal } from 'soapbox/actions/modals'; import StillImage from 'soapbox/components/still-image'; -import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui'; +import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui'; import { useAppDispatch } from 'soapbox/hooks'; import { normalizeAttachment } from 'soapbox/normalizers'; import { isDefaultHeader } from 'soapbox/utils/accounts'; +import GroupActionButton from './group-action-button'; +import GroupMemberCount from './group-member-count'; +import GroupPrivacy from './group-privacy'; +import GroupRelationship from './group-relationship'; + import type { Group } from 'soapbox/types/entities'; const messages = defineMessages({ header: { id: 'group.header.alt', defaultMessage: 'Group header' }, - confirmationHeading: { id: 'confirmations.leave_group.heading', defaultMessage: 'Leave group' }, - confirmationMessage: { id: 'confirmations.leave_group.message', defaultMessage: 'You are about to leave the group. Do you want to continue?' }, - confirmationConfirm: { id: 'confirmations.leave_group.confirm', defaultMessage: 'Leave' }, }); interface IGroupHeader { @@ -47,16 +48,6 @@ const GroupHeader: React.FC = ({ group }) => { ); } - const onJoinGroup = () => dispatch(joinGroup(group.id)); - - const onLeaveGroup = () => - dispatch(openModal('CONFIRM', { - heading: intl.formatMessage(messages.confirmationHeading), - message: intl.formatMessage(messages.confirmationMessage), - confirm: intl.formatMessage(messages.confirmationConfirm), - onConfirm: () => dispatch(leaveGroup(group.id)), - })); - const onAvatarClick = () => { const avatar = normalizeAttachment({ type: 'image', @@ -95,6 +86,7 @@ const GroupHeader: React.FC = ({ group }) => { ); @@ -110,95 +102,40 @@ const GroupHeader: React.FC = ({ group }) => { return header; }; - const makeActionButton = () => { - if (!group.relationship || !group.relationship.member) { - return ( - - ); - } - - if (group.relationship.requested) { - return ( - - ); - } - - if (group.relationship?.role === 'admin') { - return ( - - ); - } - - return ( - - ); - }; - - const actionButton = makeActionButton(); - return (
-
- {renderHeader()} -
+ {renderHeader()} +
- - - - {group.relationship?.role === 'admin' ? ( - - - - - ) : group.relationship?.role === 'moderator' && ( - - - - - )} - {group.locked ? ( - - - - - ) : ( - - - - - )} - - - {actionButton} + + + + + + + + + + + + + +
); diff --git a/app/soapbox/features/group/components/group-member-count.tsx b/app/soapbox/features/group/components/group-member-count.tsx new file mode 100644 index 0000000000..e4dd33e54c --- /dev/null +++ b/app/soapbox/features/group/components/group-member-count.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; + +import { Text } from 'soapbox/components/ui'; +import { Group } from 'soapbox/types/entities'; +import { shortNumberFormat } from 'soapbox/utils/numbers'; + +interface IGroupMemberCount { + group: Group +} + +const GroupMemberCount = ({ group }: IGroupMemberCount) => { + if (typeof group.members_count === 'undefined') { + return null; + } + + return ( + + {shortNumberFormat(group.members_count)} + {' '} + + + ); +}; + +export default GroupMemberCount; \ No newline at end of file diff --git a/app/soapbox/features/group/components/group-privacy.tsx b/app/soapbox/features/group/components/group-privacy.tsx new file mode 100644 index 0000000000..fdbbe29771 --- /dev/null +++ b/app/soapbox/features/group/components/group-privacy.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; + +import { HStack, Icon, Text } from 'soapbox/components/ui'; +import { Group } from 'soapbox/types/entities'; + +interface IGroupPolicy { + group: Group +} + +const GroupPrivacy = ({ group }: IGroupPolicy) => ( + + + + + {group.locked ? ( + + ) : ( + + )} + + +); + +export default GroupPrivacy; \ No newline at end of file diff --git a/app/soapbox/features/group/components/group-relationship.tsx b/app/soapbox/features/group/components/group-relationship.tsx new file mode 100644 index 0000000000..6b79ecda57 --- /dev/null +++ b/app/soapbox/features/group/components/group-relationship.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; + +import { HStack, Icon, Text } from 'soapbox/components/ui'; +import { Group } from 'soapbox/types/entities'; + +interface IGroupRelationship { + group: Group +} + +const GroupRelationship = ({ group }: IGroupRelationship) => { + const isAdmin = group.relationship?.role === 'admin'; + const isModerator = group.relationship?.role === 'moderator'; + + if (!isAdmin || !isModerator) { + return null; + } + + return ( + + + + + {isAdmin + ? + : } + + + ); +}; + +export default GroupRelationship; \ No newline at end of file diff --git a/app/soapbox/features/group/group-timeline.tsx b/app/soapbox/features/group/group-timeline.tsx index f4cf2f5744..f80343c1e4 100644 --- a/app/soapbox/features/group/group-timeline.tsx +++ b/app/soapbox/features/group/group-timeline.tsx @@ -3,7 +3,6 @@ import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; import { groupCompose } from 'soapbox/actions/compose'; -import { fetchGroup } from 'soapbox/actions/groups'; import { connectGroupStream } from 'soapbox/actions/streaming'; import { expandGroupTimeline } from 'soapbox/actions/timelines'; import { Avatar, HStack, Stack } from 'soapbox/components/ui'; @@ -31,7 +30,6 @@ const GroupTimeline: React.FC = (props) => { }; useEffect(() => { - dispatch(fetchGroup(groupId)); dispatch(expandGroupTimeline(groupId)); dispatch(groupCompose(`group:${groupId}`, groupId)); diff --git a/app/soapbox/features/groups/components/discover/group.tsx b/app/soapbox/features/groups/components/discover/group.tsx index 156605e71b..a596f95f27 100644 --- a/app/soapbox/features/groups/components/discover/group.tsx +++ b/app/soapbox/features/groups/components/discover/group.tsx @@ -1,9 +1,11 @@ import React, { forwardRef } from 'react'; import { FormattedMessage } from 'react-intl'; +import { Link } from 'react-router-dom'; -import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui'; +import { Avatar, Button, HStack, Stack, Text } from 'soapbox/components/ui'; +import GroupMemberCount from 'soapbox/features/group/components/group-member-count'; +import GroupPrivacy from 'soapbox/features/group/components/group-privacy'; import { Group as GroupEntity } from 'soapbox/types/entities'; -import { shortNumberFormat } from 'soapbox/utils/numbers'; interface IGroup { group: GroupEntity @@ -21,75 +23,56 @@ const Group = forwardRef((props: IGroup, ref: React.ForwardedRef width, }} > - - {group.header && ( - Group cover - )} + + + {group.header && ( + Group cover + )} - - - - - + - - + - {typeof group.members_count === 'undefined' ? ( - - {group.locked ? ( - - ) : ( - - )} - - ) : ( - - {shortNumberFormat(group.members_count)} - {' '} - - - )} - + + + • + + + - -
- +
+ +
); diff --git a/app/soapbox/features/groups/components/discover/search/results.tsx b/app/soapbox/features/groups/components/discover/search/results.tsx index 59af5aebcf..cfbc74039b 100644 --- a/app/soapbox/features/groups/components/discover/search/results.tsx +++ b/app/soapbox/features/groups/components/discover/search/results.tsx @@ -96,7 +96,7 @@ export default (props: Props) => { diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index aa3e0fc346..35c111786f 100644 --- a/app/soapbox/locales/en.json +++ b/app/soapbox/locales/en.json @@ -745,7 +745,7 @@ "gdpr.title": "{siteTitle} uses cookies", "getting_started.open_source_notice": "{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).", "group.admin_subheading": "Group administrators", - "group.cancel_request": "Cancel request", + "group.cancel_request": "Cancel Request", "group.group_mod_authorize": "Accept", "group.group_mod_authorize.success": "Accepted @{name} to group", "group.group_mod_block": "Block @{name} from group", @@ -763,13 +763,13 @@ "group.group_mod_unblock": "Unblock", "group.group_mod_unblock.success": "Unblocked @{name} from group", "group.header.alt": "Group header", - "group.join.private": "Request to Join", + "group.join.private": "Request Access", "group.join.public": "Join Group", "group.join.request_success": "Requested to join the group", "group.join.success": "Joined the group", - "group.leave": "Leave group", + "group.leave": "Leave Group", "group.leave.success": "Left the group", - "group.manage": "Manage group", + "group.manage": "Manage Group", "group.moderator_subheading": "Group moderators", "group.privacy.locked": "Private", "group.privacy.public": "Public", diff --git a/app/soapbox/pages/group-page.tsx b/app/soapbox/pages/group-page.tsx index d48caafd08..92518a55dd 100644 --- a/app/soapbox/pages/group-page.tsx +++ b/app/soapbox/pages/group-page.tsx @@ -1,10 +1,8 @@ -import React, { useCallback, useEffect } from 'react'; +import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { useRouteMatch } from 'react-router-dom'; -import { fetchGroup } from 'soapbox/actions/groups'; -import MissingIndicator from 'soapbox/components/missing-indicator'; -import { Column, Layout } from 'soapbox/components/ui'; +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'; import BundleContainer from 'soapbox/features/ui/containers/bundle-container'; @@ -13,8 +11,8 @@ import { GroupMediaPanel, SignUpPanel, } from 'soapbox/features/ui/util/async-components'; -import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; -import { makeGetGroup } from 'soapbox/selectors'; +import { useOwnAccount } from 'soapbox/hooks'; +import { useGroup } from 'soapbox/queries/groups'; import { Tabs } from '../components/ui'; @@ -34,23 +32,20 @@ interface IGroupPage { const GroupPage: React.FC = ({ params, children }) => { const intl = useIntl(); const match = useRouteMatch(); - const dispatch = useAppDispatch(); + const me = useOwnAccount(); const id = params?.id || ''; - const getGroup = useCallback(makeGetGroup(), []); - const group = useAppSelector(state => getGroup(state, id)); - const me = useAppSelector(state => state.me); + const { group } = useGroup(id); - useEffect(() => { - dispatch(fetchGroup(id)); - }, [id]); + const isNonMember = !group?.relationship || !group.relationship.member; + const isPrivate = group?.locked; - if ((group as any) === false) { - return ( - - ); - } + // if ((group as any) === false) { + // return ( + // + // ); + // } const items = [ { @@ -76,7 +71,18 @@ const GroupPage: React.FC = ({ params, children }) => { activeItem={match.path} /> - {children} + {(isNonMember && isPrivate) ? ( + +
+ +
+ + + Content is only visible to group members + + + + ) : children} {!me && ( diff --git a/app/soapbox/queries/groups.ts b/app/soapbox/queries/groups.ts index 612c60b436..5fb8ed2dc5 100644 --- a/app/soapbox/queries/groups.ts +++ b/app/soapbox/queries/groups.ts @@ -9,6 +9,7 @@ import { Group } from 'soapbox/types/entities'; import { flattenPages, PaginatedResult } from 'soapbox/utils/queries'; const GroupKeys = { + group: (id: string) => ['groups', 'group', id] as const, myGroups: (userId: string) => ['groups', userId] as const, popularGroups: ['groups', 'popular'] as const, suggestedGroups: ['groups', 'suggested'] as const, @@ -70,7 +71,7 @@ const usePopularGroups = () => { const features = useFeatures(); const getQuery = async () => { - const { data } = await api.get('/api/mock/groups'); // '/api/v1/truth/trends/groups' + const { data } = await api.get('/api/v1/groups/search?q=group'); // '/api/v1/truth/trends/groups' const result = data.map(normalizeGroup); return result; @@ -109,4 +110,23 @@ const useSuggestedGroups = () => { }; }; -export { useGroups, usePopularGroups, useSuggestedGroups }; +const useGroup = (id: string) => { + const api = useApi(); + const features = useFeatures(); + + const getGroup = async () => { + const { data } = await api.get(`/api/v1/groups/${id}`); + return normalizeGroup(data); + }; + + const queryInfo = useQuery(GroupKeys.group(id), getGroup, { + enabled: features.groups && !!id, + }); + + return { + ...queryInfo, + group: queryInfo.data, + }; +}; + +export { useGroups, useGroup, usePopularGroups, useSuggestedGroups };