Groups: Hide ComposeForm if not a member, add Media panel

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/actions/timelines.ts

@@ -219,6 +219,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 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 });
+
 const expandHashtagTimeline = (hashtag: string, { maxId, tags }: Record<string, any> = {}, done = noOp) => {
   return expandTimeline(`hashtag:${hashtag}`, `/api/v1/timelines/tag/${hashtag}`, {
     max_id: maxId,
@@ -309,6 +312,7 @@ export {
   expandAccountMediaTimeline,
   expandListTimeline,
   expandGroupTimeline,
+  expandGroupMediaTimeline,
   expandHashtagTimeline,
   expandTimelineRequest,
   expandTimelineSuccess,

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

@@ -8,7 +8,7 @@ import { connectGroupStream } from 'soapbox/actions/streaming';
 import { expandGroupTimeline } from 'soapbox/actions/timelines';
 import { Avatar, HStack, Stack } from 'soapbox/components/ui';
 import ComposeForm from 'soapbox/features/compose/components/compose-form';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useOwnAccount } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
 
@@ -24,6 +24,8 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
 
   const groupId = props.params.id;
 
+  const relationship = useAppSelector((state) => state.group_relationships.get(groupId));
+
   const handleLoadMore = (maxId: string) => {
     dispatch(expandGroupTimeline(groupId, { maxId }));
   };
@@ -43,7 +45,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
 
   return (
     <Stack space={2}>
-      {!!account && (
+      {!!account && relationship?.member && (
         <div className='px-2 py-4 border-b border-solid border-gray-200 dark:border-gray-800'>
           <HStack alignItems='start' space={4}>
             <Link to={`/@${account.acct}`}>

app/soapbox/features/ui/components/group-media-panel.tsx

@@ -0,0 +1,89 @@
+import { List as ImmutableList } from 'immutable';
+import React, { useState, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { openModal } from 'soapbox/actions/modals';
+import { expandGroupMediaTimeline } from 'soapbox/actions/timelines';
+import { Spinner, Text, Widget } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+import { getGroupGallery } from 'soapbox/selectors';
+
+import MediaItem from '../../account-gallery/components/media-item';
+
+import type { Attachment, Group } from 'soapbox/types/entities';
+
+interface IGroupMediaPanel {
+  group?: Group,
+}
+
+const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
+  const dispatch = useDispatch();
+
+  const [loading, setLoading] = useState(true);
+
+  const attachments: ImmutableList<Attachment> = useAppSelector((state) => group ? getGroupGallery(state, group?.id) : ImmutableList());
+
+  const handleOpenMedia = (attachment: Attachment): void => {
+    if (attachment.type === 'video') {
+      dispatch(openModal('VIDEO', { media: attachment, status: attachment.status }));
+    } else {
+      const media = attachment.getIn(['status', 'media_attachments']) as ImmutableList<Attachment>;
+      const index = media.findIndex(x => x.id === attachment.id);
+
+      dispatch(openModal('MEDIA', { media, index, status: attachment.status, account: attachment.account }));
+    }
+  };
+
+  useEffect(() => {
+    setLoading(true);
+
+    if (group) {
+      dispatch(expandGroupMediaTimeline(group.id))
+      // @ts-ignore
+        .then(() => setLoading(false))
+        .catch(() => {});
+    }
+  }, [group?.id]);
+
+  const renderAttachments = () => {
+    const nineAttachments = attachments.slice(0, 9);
+
+    if (!nineAttachments.isEmpty()) {
+      return (
+        <div className='flex flex-wrap'>
+          {nineAttachments.map((attachment, _index) => (
+            <MediaItem
+              key={`${attachment.getIn(['status', 'id'])}+${attachment.id}`}
+              attachment={attachment}
+              displayWidth={255}
+              onOpenMedia={handleOpenMedia}
+            />
+          ))}
+        </div>
+      );
+    } else {
+      return (
+        <Text size='sm' theme='muted'>
+          <FormattedMessage id='media_panel.empty_message' defaultMessage='No media found.' />
+        </Text>
+      );
+    }
+  };
+
+  return (
+    <Widget title={<FormattedMessage id='media_panel.title' defaultMessage='Media' />}>
+      {group && (
+        <div className='w-full py-2'>
+          {loading ? (
+            <Spinner />
+          ) : (
+            renderAttachments()
+          )}
+        </div>
+      )}
+    </Widget>
+  );
+};
+
+export default GroupMediaPanel;

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

@@ -561,3 +561,7 @@ export function ManageGroupModal() {
 export function NewGroupPanel() {
   return import(/* webpackChunkName: "features/groups" */'../components/panels/new-group-panel');
 }
+
+export function GroupMediaPanel() {
+  return import(/* webpackChunkName: "features/groups" */'../components/group-media-panel');
+}

app/soapbox/pages/group-page.tsx

@@ -9,8 +9,9 @@ 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';
 import {
-  SignUpPanel,
   CtaBanner,
+  GroupMediaPanel,
+  SignUpPanel,
 } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { makeGetGroup } from 'soapbox/selectors';
@@ -90,6 +91,9 @@ const GroupPage: React.FC<IGroupPage> = ({ params, children }) => {
             {Component => <Component key='sign-up-panel' />}
           </BundleContainer>
         )}
+        <BundleContainer fetchComponent={GroupMediaPanel}>
+          {Component => <Component group={group} />}
+        </BundleContainer>
         <LinkFooter key='link-footer' />
       </Layout.Aside>
     </>

app/soapbox/selectors/index.ts

@@ -218,6 +218,25 @@ export const getAccountGallery = createSelector([
   }, ImmutableList());
 });
 
+export const getGroupGallery = createSelector([
+  (state: RootState, id: string) => state.timelines.get(`group:${id}:media`)?.items || ImmutableOrderedSet<string>(),
+  (state: RootState) => state.statuses,
+  (state: RootState) => state.accounts,
+], (statusIds, statuses, accounts) => {
+
+  return statusIds.reduce((medias: ImmutableList<any>, statusId: string) => {
+    const status = statuses.get(statusId);
+    if (!status) return medias;
+    if (status.reblog) return medias;
+    if (typeof status.account !== 'string') return medias;
+
+    const account = accounts.get(status.account);
+
+    return medias.concat(
+      status.media_attachments.map(media => media.merge({ status, account })));
+  }, ImmutableList());
+});
+
 type APIChat = { id: string, last_message: string };
 
 export const makeGetChat = () => {