91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
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;
|