Groups: add group gallery

app/soapbox/entity-store/entities.ts

@@ -3,5 +3,6 @@ export enum Entities {
   GROUPS = 'Groups',
   GROUP_RELATIONSHIPS = 'GroupRelationships',
   GROUP_MEMBERSHIPS = 'GroupMemberships',
-  RELATIONSHIPS = 'Relationships'
+  RELATIONSHIPS = 'Relationships',
+  STATUSES = 'Statuses',
 }

app/soapbox/features/group/group-gallery.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useParams } from 'react-router-dom';
+
+import { openModal } from 'soapbox/actions/modals';
+import LoadMore from 'soapbox/components/load-more';
+import MissingIndicator from 'soapbox/components/missing-indicator';
+import { Column, Spinner } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+import { useGroup, useGroupMedia } from 'soapbox/hooks/api';
+
+import MediaItem from '../account-gallery/components/media-item';
+
+import type { Attachment, Status } from 'soapbox/types/entities';
+
+const GroupGallery = () => {
+  const dispatch = useAppDispatch();
+
+  const { id: groupId } = useParams<{ id: string }>();
+
+  const { group, isLoading: groupIsLoading } = useGroup(groupId);
+
+  const {
+    entities: statuses,
+    fetchNextPage,
+    isLoading,
+    hasNextPage,
+  } = useGroupMedia(groupId);
+
+  const attachments = statuses.reduce<Attachment[]>((result, status) => {
+    result.push(...status.media_attachments.map((a) => a.set('status', status)));
+    return result;
+  }, []);
+
+  const handleOpenMedia = (attachment: Attachment) => {
+    if (attachment.type === 'video') {
+      dispatch(openModal('VIDEO', { media: attachment, status: attachment.status, account: attachment.account }));
+    } else {
+      const media = (attachment.status as Status).media_attachments;
+      const index = media.findIndex((x) => x.id === attachment.id);
+
+      dispatch(openModal('MEDIA', { media, index, status: attachment.status }));
+    }
+  };
+
+  if (isLoading || groupIsLoading) {
+    return (
+      <Column>
+        <Spinner />
+      </Column>
+    );
+  }
+
+  if (!group) {
+    return (
+      <MissingIndicator />
+    );
+  }
+
+  return (
+    <Column label={group.display_name} transparent withHeader={false}>
+      <div role='feed' className='grid grid-cols-2 gap-2 sm:grid-cols-3'>
+        {attachments.map((attachment) => (
+          <MediaItem
+            key={`${attachment.status.id}+${attachment.id}`}
+            attachment={attachment}
+            onOpenMedia={handleOpenMedia}
+          />
+        ))}
+
+        {(!isLoading && attachments.length === 0) && (
+          <div className='empty-column-indicator'>
+            <FormattedMessage id='account_gallery.none' defaultMessage='No media to show.' />
+          </div>
+        )}
+
+        {(hasNextPage && !isLoading) && (
+          <LoadMore className='my-auto' visible={!isLoading} onClick={fetchNextPage} />
+        )}
+      </div>
+
+      {isLoading && (
+        <div className='slist__append'>
+          <Spinner />
+        </div>
+      )}
+    </Column>
+  );
+};
+
+export default GroupGallery;

app/soapbox/features/ui/index.tsx

@@ -116,6 +116,7 @@ import {
   EventInformation,
   EventDiscussion,
   Events,
+  GroupGallery,
   Groups,
   GroupsDiscover,
   GroupsPopular,
@@ -297,6 +298,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ 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} />}
+      {features.groups && <WrappedRoute path='/groups/:id/media' publicRoute={!authenticatedProfile} component={GroupGallery} page={GroupPage} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/manage' exact page={DefaultPage} component={ManageGroup} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/manage/edit' exact page={DefaultPage} component={EditGroup} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/manage/blocks' exact page={DefaultPage} component={GroupBlockedMembers} content={children} />}

app/soapbox/features/ui/util/async-components.ts

@@ -590,6 +590,10 @@ export function GroupMembershipRequests() {
   return import(/* webpackChunkName: "features/groups" */'../../group/group-membership-requests');
 }
 
+export function GroupGallery() {
+  return import(/* webpackChunkName: "features/groups" */'../../group/group-gallery');
+}
+
 export function CreateGroupModal() {
   return import(/* webpackChunkName: "features/groups" */'../components/modals/manage-group-modal/create-group-modal');
 }

app/soapbox/hooks/api/groups/useGroupMedia.ts

@@ -0,0 +1,14 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks/useApi';
+import { statusSchema } from 'soapbox/schemas/status';
+
+function useGroupMedia(groupId: string) {
+  const api = useApi();
+
+  return useEntities([Entities.STATUSES, 'groupMedia', groupId], () => {
+    return api.get(`/api/v1/timelines/group/${groupId}?only_media=true`);
+  }, { schema: statusSchema });
+}
+
+export { useGroupMedia };

app/soapbox/hooks/api/index.ts

@@ -11,6 +11,7 @@ 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 { useGroupMembershipRequests } from './groups/useGroupMembershipRequests';
 export { useGroupSearch } from './groups/useGroupSearch';

app/soapbox/pages/group-page.tsx

@@ -22,6 +22,7 @@ import { Tabs } from '../components/ui';
 const messages = defineMessages({
   all: { id: 'group.tabs.all', defaultMessage: 'All' },
   members: { id: 'group.tabs.members', defaultMessage: 'Members' },
+  media: { id: 'group.tabs.media', defaultMessage: 'Media' },
 });
 
 interface IGroupPage {
@@ -84,6 +85,11 @@ const GroupPage: React.FC<IGroupPage> = ({ params, children }) => {
       name: '/groups/:id/members',
       count: pending.length,
     },
+    {
+      text: intl.formatMessage(messages.media),
+      to: `/groups/${group?.id}/media`,
+      name: '/groups/:id/media',
+    },
   ];
 
   const renderChildren = () => {

app/soapbox/schemas/status.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+import { normalizeStatus } from 'soapbox/normalizers';
+import { toSchema } from 'soapbox/utils/normalizers';
+
+const statusSchema = toSchema(normalizeStatus);
+
+type Status = z.infer<typeof statusSchema>;
+
+export { statusSchema, type Status };