Merge branch 'group-improvements' into 'develop'

Improve Group UX

See merge request soapbox-pub/soapbox!2494

app/soapbox/features/group/group-membership-requests.tsx

@@ -1,3 +1,4 @@
+import { AxiosError } from 'axios';
 import React, { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -58,7 +59,7 @@ const GroupMembershipRequests: React.FC<IGroupMembershipRequests> = ({ params })
 
   const { group } = useGroup(id);
 
-  const { accounts, authorize, reject, isLoading } = useGroupMembershipRequests(id);
+  const { accounts, authorize, reject, refetch, isLoading } = useGroupMembershipRequests(id);
   const { invalidate } = useGroupMembers(id, GroupRoles.USER);
 
   useEffect(() => {
@@ -80,19 +81,35 @@ const GroupMembershipRequests: React.FC<IGroupMembershipRequests> = ({ params })
   }
 
   async function handleAuthorize(account: AccountEntity) {
-    try {
-      await authorize(account.id);
-    } catch (_e) {
-      toast.error(intl.formatMessage(messages.authorizeFail, { name: account.username }));
-    }
+    return authorize(account.id)
+      .then(() => Promise.resolve())
+      .catch((error: AxiosError) => {
+        refetch();
+
+        let message = intl.formatMessage(messages.authorizeFail, { name: account.username });
+        if (error.response?.status === 409) {
+          message = (error.response?.data as any).error;
+        }
+        toast.error(message);
+
+        return Promise.reject();
+      });
   }
 
   async function handleReject(account: AccountEntity) {
-    try {
-      await reject(account.id);
-    } catch (_e) {
-      toast.error(intl.formatMessage(messages.rejectFail, { name: account.username }));
-    }
+    return reject(account.id)
+      .then(() => Promise.resolve())
+      .catch((error: AxiosError) => {
+        refetch();
+
+        let message = intl.formatMessage(messages.rejectFail, { name: account.username });
+        if (error.response?.status === 409) {
+          message = (error.response?.data as any).error;
+        }
+        toast.error(message);
+
+        return Promise.reject();
+      });
   }
 
   return (

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

@@ -16,16 +16,16 @@ import ColumnForbidden from '../ui/components/column-forbidden';
 type RouteParams = { groupId: string };
 
 const messages = defineMessages({
-  heading: { id: 'column.manage_group', defaultMessage: 'Manage group' },
-  editGroup: { id: 'manage_group.edit_group', defaultMessage: 'Edit group' },
+  heading: { id: 'column.manage_group', defaultMessage: 'Manage Group' },
+  editGroup: { id: 'manage_group.edit_group', defaultMessage: 'Edit Group' },
   pendingRequests: { id: 'manage_group.pending_requests', defaultMessage: 'Pending Requests' },
   blockedMembers: { id: 'manage_group.blocked_members', defaultMessage: 'Banned Members' },
-  deleteGroup: { id: 'manage_group.delete_group', defaultMessage: 'Delete group' },
+  deleteGroup: { id: 'manage_group.delete_group', defaultMessage: 'Delete Group' },
   deleteConfirm: { id: 'confirmations.delete_group.confirm', defaultMessage: 'Delete' },
-  deleteHeading: { id: 'confirmations.delete_group.heading', defaultMessage: 'Delete group' },
+  deleteHeading: { id: 'confirmations.delete_group.heading', defaultMessage: 'Delete Group' },
   deleteMessage: { id: 'confirmations.delete_group.message', defaultMessage: 'Are you sure you want to delete this group? This is a permanent action that cannot be undone.' },
   members: { id: 'group.tabs.members', defaultMessage: 'Members' },
-  other: { id: 'settings.other', defaultMessage: 'Other options' },
+  other: { id: 'settings.other', defaultMessage: 'Other Options' },
   deleteSuccess: { id: 'group.delete.success', defaultMessage: 'Group successfully deleted' },
 });
 

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

@@ -40,7 +40,7 @@ const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
   useEffect(() => {
     setLoading(true);
 
-    if (group && (isMember || !isPrivate)) {
+    if (group && !group.deleted_at && (isMember || !isPrivate)) {
       dispatch(expandGroupMediaTimeline(group.id))
       // @ts-ignore
         .then(() => setLoading(false))
@@ -72,7 +72,7 @@ const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
     }
   };
 
-  if (isPrivate && !isMember) {
+  if ((isPrivate && !isMember) || group?.deleted_at) {
     return null;
   }
 

app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx

@@ -19,7 +19,7 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
   const intl = useIntl();
 
   const handleCopyLink = () => {
-    copy(`${window.location.origin}/group/${group?.slug}`, () => {
+    copy(group?.url as string, () => {
       toast.success(intl.formatMessage(messages.copied));
     });
   };