Merge branch 'group-improvements' into 'develop'

Improve Group UX

See merge request soapbox-pub/soapbox!2494

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

@@ -14,7 +14,7 @@ function useGroupMembershipRequests(groupId: string) {
 
   const { entity: relationship } = useGroupRelationship(groupId);
 
-  const { entities, invalidate, ...rest } = useEntities(
+  const { entities, invalidate, fetchEntities, ...rest } = useEntities(
     path,
     () => api.get(`/api/v1/groups/${groupId}/membership_requests`),
     {
@@ -37,6 +37,7 @@ function useGroupMembershipRequests(groupId: string) {
 
   return {
     accounts: entities,
+    refetch: fetchEntities,
     authorize,
     reject,
     ...rest,

app/soapbox/components/authorize-reject-buttons.tsx

@@ -51,7 +51,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
           await action();
           setState(past);
         } catch (e) {
-          console.error(e);
+          if (e) console.error(e);
         }
       };
       if (typeof countdown === 'number') {

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 {
+    return authorize(account.id)
-      await authorize(account.id);
+      .then(() => Promise.resolve())
-    } catch (_e) {
+      .catch((error: AxiosError) => {
-      toast.error(intl.formatMessage(messages.authorizeFail, { name: account.username }));
+        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 {
+    return reject(account.id)
-      await reject(account.id);
+      .then(() => Promise.resolve())
-    } catch (_e) {
+      .catch((error: AxiosError) => {
-      toast.error(intl.formatMessage(messages.rejectFail, { name: account.username }));
+        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' },
+  heading: { id: 'column.manage_group', defaultMessage: 'Manage Group' },
-  editGroup: { id: 'manage_group.edit_group', defaultMessage: 'Edit 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));
     });
   };

app/soapbox/locales/en.json

@@ -358,7 +358,7 @@
   "column.import_data": "Import data",
   "column.info": "Server information",
   "column.lists": "Lists",
-  "column.manage_group": "Manage group",
+  "column.manage_group": "Manage Group",
   "column.mentions": "Mentions",
   "column.mfa": "Multi-Factor Authentication",
   "column.mfa_cancel": "Cancel",
@@ -491,7 +491,7 @@
   "confirmations.delete_from_group.heading": "Delete from group",
   "confirmations.delete_from_group.message": "Are you sure you want to delete @{name}'s post?",
   "confirmations.delete_group.confirm": "Delete",
-  "confirmations.delete_group.heading": "Delete group",
+  "confirmations.delete_group.heading": "Delete Group",
   "confirmations.delete_group.message": "Are you sure you want to delete this group? This is a permanent action that cannot be undone.",
   "confirmations.delete_list.confirm": "Delete",
   "confirmations.delete_list.heading": "Delete list",
@@ -970,9 +970,9 @@
   "manage_group.confirmation.share": "Share this group",
   "manage_group.confirmation.title": "You’re all set!",
   "manage_group.create": "Create Group",
-  "manage_group.delete_group": "Delete group",
+  "manage_group.delete_group": "Delete Group",
   "manage_group.done": "Done",
-  "manage_group.edit_group": "Edit group",
+  "manage_group.edit_group": "Edit Group",
   "manage_group.fields.cannot_change_hint": "This cannot be changed after the group is created.",
   "manage_group.fields.description_label": "Description",
   "manage_group.fields.description_placeholder": "Description",
@@ -1354,7 +1354,7 @@
   "settings.delete_account": "Delete Account",
   "settings.edit_profile": "Edit Profile",
   "settings.messages.label": "Allow users to start a new chat with you",
-  "settings.other": "Other options",
+  "settings.other": "Other Options",
   "settings.preferences": "Preferences",
   "settings.profile": "Profile",
   "settings.save.success": "Your preferences have been saved!",