Add page to show statuses per tag

app/soapbox/actions/timelines.ts

@@ -248,6 +248,9 @@ const expandListTimeline = (id: string, { maxId }: Record<string, any> = {}, don
 const expandGroupTimeline = (id: string, { maxId }: Record<string, any> = {}, done = noOp) =>
   expandTimeline(`group:${id}`, `/api/v1/timelines/group/${id}`, { max_id: maxId }, done);
 
+const expandGroupTimelineFromTag = (id: string, tagName: string, { maxId }: Record<string, any> = {}, done = noOp) =>
+  expandTimeline(`group:tags:${id}:${tagName}`, `/api/v1/timelines/group/${id}/tags/${tagName}`, { max_id: maxId }, done);
+
 const expandGroupMediaTimeline = (id: string | number, { maxId }: Record<string, any> = {}) =>
   expandTimeline(`group:${id}:media`, `/api/v1/timelines/group/${id}`, { max_id: maxId, only_media: true, limit: 40, with_muted: true });
 
@@ -350,6 +353,7 @@ export {
   expandAccountMediaTimeline,
   expandListTimeline,
   expandGroupTimeline,
+  expandGroupTimelineFromTag,
   expandGroupMediaTimeline,
   expandHashtagTimeline,
   expandTimelineRequest,

app/soapbox/features/group/group-tag-timeline.tsx

@@ -1,28 +1,66 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
 
-import { Column } from 'soapbox/components/ui';
+import { expandGroupTimelineFromTag } from 'soapbox/actions/timelines';
+import { Column, Icon, Stack, Text } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
 import { useGroup, useGroupTag } from 'soapbox/hooks/api';
 
-type RouteParams = { id: string, groupId: string };
+import Timeline from '../ui/components/timeline';
+
+type RouteParams = { tagId: string, groupId: string };
 
 interface IGroupTimeline {
   params: RouteParams
 }
 
 const GroupTagTimeline: React.FC<IGroupTimeline> = (props) => {
+  const dispatch = useAppDispatch();
   const groupId = props.params.groupId;
-  const tagId = props.params.id;
+  const tagId = props.params.tagId;
 
   const { group } = useGroup(groupId);
-  const { tag } = useGroupTag(tagId);
+  const { tag, isLoading } = useGroupTag(tagId);
 
-  if (!group) {
+  const handleLoadMore = (maxId: string) => {
+    dispatch(expandGroupTimelineFromTag(groupId, tag?.name as string, { maxId }));
+  };
+
+  useEffect(() => {
+    if (tag?.name) {
+      dispatch(expandGroupTimelineFromTag(groupId, tag?.name));
+    }
+  }, [groupId, tag]);
+
+
+  if (isLoading || !tag || !group) {
     return null;
   }
 
   return (
-    <Column label={`#${tag}`}>
-      {/* TODO */}
+    <Column label={`#${tag.name}`}>
+      <Timeline
+        scrollKey='group_timeline'
+        timelineId={`group:tags:${groupId}:${tag.name}`}
+        onLoadMore={handleLoadMore}
+        divideType='border'
+        showGroup={false}
+        emptyMessageCard={false}
+        emptyMessage={
+          <Stack space={4} className='py-6' justifyContent='center' alignItems='center'>
+            <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
+              <Icon
+                src={require('@tabler/icons/message-2.svg')}
+                className='h-6 w-6 text-gray-600'
+              />
+            </div>
+
+            <Text theme='muted'>
+              <FormattedMessage id='empty_column.group' defaultMessage='There are no posts in this group yet.' />
+            </Text>
+          </Stack>
+        }
+      />
     </Column>
   );
 };

app/soapbox/features/ui/index.tsx

@@ -327,7 +327,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       {features.groups && <WrappedRoute path='/groups/:groupId/posts/:statusId' exact page={StatusPage} component={Status} content={children} />}
 
       {features.groupsTags && <WrappedRoute path='/group/:groupSlug/tags' exact page={GroupPage} component={GroupTagsSlug} content={children} />}
-      {features.groupsTags && <WrappedRoute path='/group/:groupSlug/tag/:id' exact page={GroupsPendingPage} component={GroupTagTimelineSlug} content={children} />}
+      {features.groupsTags && <WrappedRoute path='/group/:groupSlug/tag/:tagId' exact page={GroupsPendingPage} component={GroupTagTimelineSlug} content={children} />}
       {features.groups && <WrappedRoute path='/group/:groupSlug' exact page={GroupPage} component={GroupTimelineSlug} content={children} />}
       {features.groups && <WrappedRoute path='/group/:groupSlug/members' exact page={GroupPage} component={GroupMembersSlug} content={children} />}
       {features.groups && <WrappedRoute path='/group/:groupSlug/media' publicRoute={!authenticatedProfile} component={GroupGallerySlug} page={GroupPage} content={children} />}