From c87589be4ecd17db2abdf7fc854b477772a98645 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Wed, 19 Apr 2023 16:51:07 -0400
Subject: [PATCH] Build group URI and handle successful copying

---
 .../steps/confirmation-step.tsx               | 23 +++++++++++++------
 app/soapbox/utils/copy.ts                     | 10 +++++++-
 2 files changed, 25 insertions(+), 8 deletions(-)

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 af1a5c363..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,8 @@
 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';
@@ -10,8 +11,18 @@ interface IConfirmationStep {
   group: Group
 }
 
+const messages = defineMessages({
+  copied: { id: 'copy.success', defaultMessage: 'Copied to clipboard!' },
+});
+
 const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
-  const handleCopyLink = () => copy(group.uri);
+  const intl = useIntl();
+
+  const handleCopyLink = () => {
+    copy(`${window.location.origin}/group/${group.slug}`, () => {
+      toast.success(intl.formatMessage(messages.copied));
+    });
+  };
 
   const handleShare = () => {
     navigator.share({
@@ -87,11 +98,9 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
           </Button>
         )}
 
-        {group.uri && (
-          <Button onClick={handleCopyLink} theme='transparent' icon={require('@tabler/icons/link.svg')} className='text-primary-600'>
-            <FormattedMessage id='manage_group.confirmation.copy' defaultMessage='Copy link' />
-          </Button>
-        )}
+        <Button onClick={handleCopyLink} theme='transparent' icon={require('@tabler/icons/link.svg')} className='text-primary-600'>
+          <FormattedMessage id='manage_group.confirmation.copy' defaultMessage='Copy link' />
+        </Button>
       </HStack>
     </Stack>
   );
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();
+      }
     }
   }
 };