Merge branch 'improve-group-creation' into 'develop'

Improve group creation

See merge request soapbox-pub/soapbox!2456

app/soapbox/features/ui/components/modals/manage-group-modal/create-group-modal.tsx

@@ -14,7 +14,7 @@ import PrivacyStep from './steps/privacy-step';
 
 const messages = defineMessages({
   next: { id: 'manage_group.next', defaultMessage: 'Next' },
-  create: { id: 'manage_group.create', defaultMessage: 'Create' },
+  create: { id: 'manage_group.create', defaultMessage: 'Create Group' },
   done: { id: 'manage_group.done', defaultMessage: 'Done' },
 });
 
@@ -33,7 +33,9 @@ const CreateGroupModal: React.FC<ICreateGroupModal> = ({ onClose }) => {
   const debounce = useDebounce;
 
   const [group, setGroup] = useState<Group | null>(null);
-  const [params, setParams] = useState<CreateGroupParams>({});
+  const [params, setParams] = useState<CreateGroupParams>({
+    group_visibility: 'everyone',
+  });
   const [currentStep, setCurrentStep] = useState<Steps>(Steps.ONE);
 
   const { createGroup, isSubmitting } = useCreateGroup();
@@ -96,9 +98,22 @@ const CreateGroupModal: React.FC<ICreateGroupModal> = ({ onClose }) => {
     }
   };
 
+  const renderModalTitle = () => {
+    switch (currentStep) {
+      case Steps.ONE:
+        return <FormattedMessage id='navigation_bar.create_group' defaultMessage='Create Group' />;
+      default:
+        if (params.group_visibility === 'everyone') {
+          return <FormattedMessage id='navigation_bar.create_group.public' defaultMessage='Create Public Group' />;
+        } else {
+          return <FormattedMessage id='navigation_bar.create_group.private' defaultMessage='Create Private Group' />;
+        }
+    }
+  };
+
   return (
     <Modal
-      title={<FormattedMessage id='navigation_bar.create_group' defaultMessage='Create Group' />}
+      title={renderModalTitle()}
       confirmationAction={handleNextStep}
       confirmationText={confirmationText}
       confirmationDisabled={isSubmitting || (currentStep === Steps.TWO && !isValid)}

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

@@ -1,7 +1,9 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Avatar, Divider, HStack, Stack, Text, Button } from 'soapbox/components/ui';
+import toast from 'soapbox/toast';
+import copy from 'soapbox/utils/copy';
 
 import type { Group } from 'soapbox/schemas';
 
@@ -9,11 +11,17 @@ interface IConfirmationStep {
   group: Group
 }
 
+const messages = defineMessages({
+  copied: { id: 'copy.success', defaultMessage: 'Copied to clipboard!' },
+});
+
 const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
+  const intl = useIntl();
+
   const handleCopyLink = () => {
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(group.uri);
-    }
+    copy(`${window.location.origin}/group/${group.slug}`, () => {
+      toast.success(intl.formatMessage(messages.copied));
+    });
   };
 
   const handleShare = () => {

app/soapbox/locales/en.json

@@ -528,6 +528,7 @@
   "confirmations.scheduled_status_delete.heading": "Cancel scheduled post",
   "confirmations.scheduled_status_delete.message": "Are you sure you want to cancel this scheduled post?",
   "confirmations.unfollow.confirm": "Unfollow",
+  "copy.success": "Copied to clipboard!",
   "crypto_donate.explanation_box.message": "{siteTitle} accepts cryptocurrency donations. You may send a donation to any of the addresses below. Thank you for your support!",
   "crypto_donate.explanation_box.title": "Sending cryptocurrency donations",
   "crypto_donate_panel.actions.view": "Click to see {count, plural, one {# wallet} other {# wallets}}",
@@ -965,7 +966,7 @@
   "manage_group.confirmation.info_3": "Share your new group with friends, family and followers to grow its membership.",
   "manage_group.confirmation.share": "Share this group",
   "manage_group.confirmation.title": "You’re all set!",
-  "manage_group.create": "Create",
+  "manage_group.create": "Create Group",
   "manage_group.delete_group": "Delete group",
   "manage_group.done": "Done",
   "manage_group.edit_group": "Edit group",
@@ -1055,6 +1056,8 @@
   "navigation_bar.compose_reply": "Reply to post",
   "navigation_bar.create_event": "Create new event",
   "navigation_bar.create_group": "Create Group",
+  "navigation_bar.create_group.private": "Create Private Group",
+  "navigation_bar.create_group.public": "Create Public Group",
   "navigation_bar.domain_blocks": "Domain blocks",
   "navigation_bar.edit_group": "Edit Group",
   "navigation_bar.favourites": "Likes",

app/soapbox/schemas/group.ts

@@ -22,7 +22,7 @@ const groupSchema = z.object({
   group_visibility: z.string().catch(''), // TruthSocial
   header: z.string().catch(headerMissing),
   header_static: z.string().catch(''),
-  id: z.string(),
+  id: z.coerce.string(),
   locked: z.boolean().catch(false),
   membership_required: z.boolean().catch(false),
   members_count: z.number().catch(0),

app/soapbox/utils/copy.ts

@@ -1,6 +1,10 @@
-const copy = (text: string) => {
+const copy = (text: string, onSuccess?: () => void) => {
   if (navigator.clipboard) {
     navigator.clipboard.writeText(text);
+
+    if (onSuccess) {
+      onSuccess();
+    }
   } else {
     const textarea = document.createElement('textarea');
 
@@ -16,6 +20,10 @@ const copy = (text: string) => {
     // Do nothing
     } finally {
       document.body.removeChild(textarea);
+
+      if (onSuccess) {
+        onSuccess();
+      }
     }
   }
 };