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

Add topic pages

This commit is contained in:
Chewbacca 2023-04-13 09:28:40 -04:00
parent 8702c16998
commit bb70c1ea3c
9 changed files with 189 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
app/soapbox/features/groups/tag.tsx Normal file
View File

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

102
app/soapbox/features/groups/tags.tsx
View File

@ -1,35 +1,24 @@
import clsx from 'clsx';
import React, { useCallback, useState } from 'react';
import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
import React from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { Virtuoso } from 'react-virtuoso';
import { Column, HStack, Icon } from 'soapbox/components/ui';
import { useGroupsFromTag } from 'soapbox/hooks/api';
import { Column, Text } from 'soapbox/components/ui';
import { usePopularTags } from 'soapbox/hooks/api';
import GroupGridItem from './components/discover/group-grid-item';
import GroupListItem from './components/discover/group-list-item';
import TagListItem from './components/discover/tag-list-item';
import type { Group } from 'soapbox/schemas';
import type { GroupTag } from 'soapbox/schemas';
enum Layout {
LIST = 'LIST',
GRID = 'GRID'
}
const GridList: Components['List'] = React.forwardRef((props, ref) => {
const { context, ...rest } = props;
return <div ref={ref} {...rest} className='flex flex-wrap' />;
const messages = defineMessages({
title: { id: 'groups.tags.title', defaultMessage: 'Browse Topics' },
});
interface ITags {
params: { id: string }
}
const Tags: React.FC = () => {
const intl = useIntl();
const Tags: React.FC<ITags> = (props) => {
const tagId = props.params.id;
const [layout, setLayout] = useState<Layout>(Layout.LIST);
const { groups, hasNextPage, fetchNextPage } = useGroupsFromTag(tagId);
const { tags, isFetched, isError, hasNextPage, fetchNextPage } = usePopularTags();
const isEmpty = (isFetched && tags.length === 0) || isError;
const handleLoadMore = () => {
if (hasNextPage) {
@ -37,7 +26,7 @@ const Tags: React.FC<ITags> = (props) => {
}
};
const renderGroupList = useCallback((group: Group, index: number) => (
const renderItem = (index: number, tag: GroupTag) => (
<div
className={
clsx({
@ -45,63 +34,24 @@ const Tags: React.FC<ITags> = (props) => {
})
}
>
<GroupListItem group={group} withJoinAction />
<TagListItem key={tag.id} tag={tag} />
</div>
), []);
const renderGroupGrid = useCallback((group: Group, index: number) => (
<div className='pb-4'>
<GroupGridItem group={group} />
</div>
), []);
);
return (
<Column
label={`#${tagId}`}
action={
<HStack alignItems='center'>
<button onClick={() => setLayout(Layout.LIST)}>
<Icon
src={require('@tabler/icons/layout-list.svg')}
className={
clsx('h-5 w-5 text-gray-600', {
'text-primary-600': layout === Layout.LIST,
})
}
<Column label={intl.formatMessage(messages.title)}>
{isEmpty ? (
<Text theme='muted'>
<FormattedMessage
id='groups.discover.tags.empty'
defaultMessage='Unable to fetch popular topics at this time. Please check back later.'
/>
</button>
<button onClick={() => setLayout(Layout.GRID)}>
<Icon
src={require('@tabler/icons/layout-grid.svg')}
className={
clsx('h-5 w-5 text-gray-600', {
'text-primary-600': layout === Layout.GRID,
})
}
/>
</button>
</HStack>
}
>
{layout === Layout.LIST ? (
</Text>
) : (
<Virtuoso
useWindowScroll
data={groups}
itemContent={(index, group) => renderGroupList(group, index)}
endReached={handleLoadMore}
/>
) : (
<VirtuosoGrid
useWindowScroll
data={groups}
itemContent={(index, group) => renderGroupGrid(group, index)}
components={{
Item: (props) => (
<div {...props} className='w-1/2 flex-none' />
),
List: GridList,
}}
data={tags}
itemContent={renderItem}
endReached={handleLoadMore}
/>
)}

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

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

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

@ -562,6 +562,10 @@ export function GroupsSuggested() {
return import(/* webpackChunkName: "features/groups" */'../../groups/suggested');
}
export function GroupsTag() {
return import(/* webpackChunkName: "features/groups" */'../../groups/tag');
}
export function GroupsTags() {
return import(/* webpackChunkName: "features/groups" */'../../groups/tags');
}

21
app/soapbox/hooks/api/groups/useGroupTag.ts Normal file
View File

@ -0,0 +1,21 @@
import { Entities } from 'soapbox/entity-store/entities';
import { useEntity } from 'soapbox/entity-store/hooks';
import { useApi } from 'soapbox/hooks';
import { type GroupTag, groupTagSchema } from 'soapbox/schemas';
function useGroupTag(tagId: string) {
const api = useApi();
const { entity: tag, ...result } = useEntity<GroupTag>(
[Entities.GROUP_TAGS, tagId],
() => api.get(`/api/v1/tags/${tagId }`),
{ schema: groupTagSchema },
);
return {
...result,
tag,
};
}
export { useGroupTag };

12
app/soapbox/hooks/api/groups/useGroupsFromTag.ts
View File

@ -5,6 +5,8 @@ import { groupSchema } from 'soapbox/schemas';
import { useApi } from '../../useApi';
import { useFeatures } from '../../useFeatures';
import { useGroupRelationships } from './useGroups';
import type { Group } from 'soapbox/schemas';
function useGroupsFromTag(tagId: string) {
@ -13,16 +15,22 @@ function useGroupsFromTag(tagId: string) {
const { entities, ...result } = useEntities<Group>(
[Entities.GROUPS, 'tags', tagId],
() => api.get(`/api/mock/tags/${tagId}/groups`),
() => api.get(`/api/v1/tags/${tagId}/groups`),
{
schema: groupSchema,
enabled: features.groupsDiscovery,
},
);
const { relationships } = useGroupRelationships(entities.map(entity => entity.id));
const groups = entities.map((group) => ({
...group,
relationship: relationships[group.id] || null,
}));
return {
...result,
groups: entities,
groups,
};
}

2
app/soapbox/hooks/api/groups/usePopularTags.ts
View File

@ -11,7 +11,7 @@ function usePopularTags() {
const { entities, ...result } = useEntities<GroupTag>(
[Entities.GROUP_TAGS],
() => api.get('/api/mock/groups/tags'),
() => api.get('/api/v1/groups/tags'),
{
schema: groupTagSchema,
enabled: features.groupsDiscovery,

1
app/soapbox/hooks/api/index.ts
View File

@ -15,6 +15,7 @@ export { useGroupMedia } from './groups/useGroupMedia';
export { useGroup, useGroups } from './groups/useGroups';
export { useGroupMembershipRequests } from './groups/useGroupMembershipRequests';
export { useGroupSearch } from './groups/useGroupSearch';
export { useGroupTag } from './groups/useGroupTag';
export { useGroupValidation } from './groups/useGroupValidation';
export { useGroupsFromTag } from './groups/useGroupsFromTag';
export { useJoinGroup } from './groups/useJoinGroup';

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

@ -830,6 +830,10 @@
"groups.discover.suggested.empty": "Unable to fetch suggested groups at this time. Please check back later.",
"groups.discover.suggested.show_more": "Show More",
"groups.discover.suggested.title": "Suggested For You",
"groups.discover.tags.empty": "Unable to fetch popular topics at this time. Please check back later.",
"groups.discover.tags.show_more": "Show More",
"groups.discover.tags.title": "Browse Topics",
"groups.discovery.tags.no_of_groups": "Number of groups",
"groups.empty.subtitle": "Start discovering groups to join or create your own.",
"groups.empty.title": "No Groups yet",
"groups.pending.count": "{number, plural, one {# pending request} other {# pending requests}}",
@ -838,6 +842,7 @@
"groups.pending.label": "Pending Requests",
"groups.popular.label": "Suggested Groups",
"groups.search.placeholder": "Search My Groups",
"groups.tags.title": "Browse Topics",
"hashtag.column_header.tag_mode.all": "and {additional}",
"hashtag.column_header.tag_mode.any": "or {additional}",
"hashtag.column_header.tag_mode.none": "without {additional}",