From 5c6c6a0bcf3bb2952c90fb2ec8ad3ead70754b07 Mon Sep 17 00:00:00 2001
From: HannesOberreiter <hoberreiter@gmail.com>
Date: Fri, 21 Jun 2024 11:48:36 +0200
Subject: [PATCH] feat: Add copy link action to card modal (#804)

---
 client/src/components/CardModal/CardModal.jsx | 19 ++++++++++++++++++-
 client/src/locales/de/core.js                 |  2 ++
 client/src/locales/en/core.js                 |  2 ++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/client/src/components/CardModal/CardModal.jsx b/client/src/components/CardModal/CardModal.jsx
index ff77aa97..9c9651cc 100755
--- a/client/src/components/CardModal/CardModal.jsx
+++ b/client/src/components/CardModal/CardModal.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -81,6 +81,7 @@ const CardModal = React.memo(
     onClose,
   }) => {
     const [t] = useTranslation();
+    const [isLinkCopied, setIsLinkCopied] = useState(false);
 
     const isGalleryOpened = useRef(false);
 
@@ -146,6 +147,14 @@ const CardModal = React.memo(
       onClose();
     }, [onDuplicate, onClose]);
 
+    const handleCopyLinkClick = useCallback(() => {
+      navigator.clipboard.writeText(window.location.href);
+      setIsLinkCopied(true);
+      setTimeout(() => {
+        setIsLinkCopied(false);
+      }, 5000);
+    }, []);
+
     const handleGalleryOpen = useCallback(() => {
       isGalleryOpened.current = true;
     }, []);
@@ -506,6 +515,14 @@ const CardModal = React.memo(
                   <Icon name="copy outline" className={styles.actionIcon} />
                   {t('action.duplicate')}
                 </Button>
+                <Button fluid className={styles.actionButton} onClick={handleCopyLinkClick}>
+                  <Icon name={isLinkCopied ? 'linkify' : 'unlink'} className={styles.actionIcon} />
+                  {isLinkCopied
+                    ? t('common.linkIsCopied')
+                    : t('action.copyLink', {
+                        context: 'title',
+                      })}
+                </Button>
                 <DeletePopup
                   title="common.deleteCard"
                   content="common.areYouSureYouWantToDeleteThisCard"
diff --git a/client/src/locales/de/core.js b/client/src/locales/de/core.js
index 0b743de5..12fce8b3 100644
--- a/client/src/locales/de/core.js
+++ b/client/src/locales/de/core.js
@@ -104,6 +104,7 @@ export default {
       language: 'Sprache',
       leaveBoard_title: 'Board verlassen',
       leaveProject_title: 'Projekt verlassen',
+      linkIsCopied: 'Link kopiert',
       list: 'Listen',
       listActions_title: 'Aufgaben auflisten',
       managers: 'Manager',
@@ -169,6 +170,7 @@ export default {
       addTask: 'Aufgabe hinzufügen',
       addToCard: 'Zu Karte hinzufügen',
       addUser: 'Benutzer hinzufügen',
+      copyLink_title: 'Link kopieren',
       createBoard: 'Board erstellen',
       createFile: 'Datei erstellen',
       createLabel: 'Label erstellen',
diff --git a/client/src/locales/en/core.js b/client/src/locales/en/core.js
index 2fd51243..75fa8c0c 100644
--- a/client/src/locales/en/core.js
+++ b/client/src/locales/en/core.js
@@ -106,6 +106,7 @@ export default {
       language: 'Language',
       leaveBoard_title: 'Leave Board',
       leaveProject_title: 'Leave Project',
+      linkIsCopied: 'Link is copied',
       list: 'List',
       listActions_title: 'List Actions',
       managers: 'Managers',
@@ -183,6 +184,7 @@ export default {
       addTask: 'Add task',
       addToCard: 'Add to card',
       addUser: 'Add user',
+      copyLink_title: 'Copy Link',
       createBoard: 'Create board',
       createFile: 'Create file',
       createLabel: 'Create label',