diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/create-group-modal.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/create-group-modal.tsx index bbeb2d43e..9f5d143a7 100644 --- a/app/soapbox/features/ui/components/modals/manage-group-modal/create-group-modal.tsx +++ b/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 = ({ onClose }) => { const debounce = useDebounce; const [group, setGroup] = useState(null); - const [params, setParams] = useState({}); + const [params, setParams] = useState({ + group_visibility: 'everyone', + }); const [currentStep, setCurrentStep] = useState(Steps.ONE); const { createGroup, isSubmitting } = useCreateGroup(); @@ -96,9 +98,22 @@ const CreateGroupModal: React.FC = ({ onClose }) => { } }; + const renderModalTitle = () => { + switch (currentStep) { + case Steps.ONE: + return ; + default: + if (params.group_visibility === 'everyone') { + return ; + } else { + return ; + } + } + }; + return ( } + title={renderModalTitle()} confirmationAction={handleNextStep} confirmationText={confirmationText} confirmationDisabled={isSubmitting || (currentStep === Steps.TWO && !isValid)} diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx index 7db6d9c20..f0be4f73b 100644 --- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx +++ b/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 = ({ 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 = () => { diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index f7f1f20e1..8a8e23db7 100644 --- a/app/soapbox/locales/en.json +++ b/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", diff --git a/app/soapbox/schemas/group.ts b/app/soapbox/schemas/group.ts index 827531ee7..746ae9d33 100644 --- a/app/soapbox/schemas/group.ts +++ b/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), diff --git a/app/soapbox/utils/copy.ts b/app/soapbox/utils/copy.ts index 4eea324f5..57aa2de8c 100644 --- a/app/soapbox/utils/copy.ts +++ b/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(); + } } } };