From c4a9a6db437c0e4f3756f2bdf80ee9d2702e3624 Mon Sep 17 00:00:00 2001
From: Eric Doughty-Papassideris <edoughtypapassideris@linagora.com>
Date: Sun, 21 Apr 2024 22:10:40 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20front:=20moved=20copy=20li?=
 =?UTF-8?q?nk=20button=20to=20own=20file=20(#50)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modals/public-link/copy-link-button.tsx   | 42 +++++++++++++++++++
 .../modals/public-link/public-link-access.tsx | 32 ++------------
 2 files changed, 46 insertions(+), 28 deletions(-)
 create mode 100644 tdrive/frontend/src/app/views/client/body/drive/modals/public-link/copy-link-button.tsx

diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/public-link/copy-link-button.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/public-link/copy-link-button.tsx
new file mode 100644
index 000000000..78f2c6b69
--- /dev/null
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/public-link/copy-link-button.tsx
@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+import Languages from 'features/global/services/languages-service';
+import { copyToClipboard } from '@features/global/utils/CopyClipboard';
+
+import { Button } from '@atoms/button/button';
+import { LinkIcon, CheckCircleIcon } from '@heroicons/react/outline';
+
+export const CopyLinkButton = (props: {
+  textToCopy?: string | false;
+}) => {
+  const [didJustCompleteACopy, setDidJustCompleteACopy] = useState<boolean>(false);
+  const haveTextToCopy = props.textToCopy && props.textToCopy.length > 0 || false;
+  return (
+    <Button
+      onClick={() => {
+        if (!haveTextToCopy) return;
+        copyToClipboard(props.textToCopy as string);
+        if (!didJustCompleteACopy) {
+          // No point enqueuing further ones, the first timeout will undo immediately anyway
+          // so not bothering with useEffect either - tiny window of a tiny leak in improbable use case
+          setDidJustCompleteACopy(true);
+          setTimeout(() => setDidJustCompleteACopy(false), 1500);
+        }
+      }}
+      disabled={!haveTextToCopy}
+      theme={didJustCompleteACopy ? "green" : "primary"}
+      className="justify-center"
+      >
+      { didJustCompleteACopy
+        ? <CheckCircleIcon className="w-5 mr-2" />
+        : <LinkIcon className="w-5 mr-2" />
+      }
+      {Languages.t(
+        didJustCompleteACopy
+        ? 'components.public-link-copied-info'
+        : (haveTextToCopy
+          ? "components.public-link-copy"
+          : "components.public-link-get"))}
+    </Button>
+  );
+}
\ No newline at end of file
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/public-link/public-link-access.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/public-link/public-link-access.tsx
index cd88a3b3d..635b2f350 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/public-link/public-link-access.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/public-link/public-link-access.tsx
@@ -9,6 +9,7 @@ import { Button } from '@atoms/button/button';
 import { LinkIcon, UserGroupIcon, CheckCircleIcon } from '@heroicons/react/outline';
 import type { DriveFileAccessLevelForPublicLink } from 'app/features/drive/types';
 import { changePublicLink } from '@features/files/utils/access-info-helpers';
+import { CopyLinkButton } from './copy-link-button';
 
 export const PublicLinkManager = ({ id, disabled }: { id: string; disabled?: boolean }) => {
   const { item, loading, update } = useDriveItem(id);
@@ -42,34 +43,9 @@ export const PublicLinkManager = ({ id, disabled }: { id: string; disabled?: boo
               theme={havePublicLink ? "blue" : "outline"}
               value={havePublicLink ? publicLink : Languages.t('components.public-link-acess.public-link-placeholder')}
             />
-            <Button
-              disabled={disabled || (!havePublicLink && publicLinkCreationLevel === 'none')}
-              onClick={() => {
-                if (havePublicLink) {
-                  copyToClipboard(publicLink);
-                  if (!didJustCompleteACopy) {
-                    // No point enqueuing further ones, the first timeout will undo immediately anyway
-                    // so not bothering with useEffect either
-                    setDidJustCompleteACopy(true);
-                    setTimeout(() => setDidJustCompleteACopy(false), 1500);
-                  }
-                } else
-                  updatePublicLinkLevel(publicLinkCreationLevel);
-              }}
-              theme={didJustCompleteACopy ? "green" : "primary"}
-              className="absolute top-0 right-0 justify-center"
-            >
-              { didJustCompleteACopy
-                ? <CheckCircleIcon className="w-5 mr-2" />
-                : <LinkIcon className="w-5 mr-2" />
-              }
-              {Languages.t(
-                didJustCompleteACopy
-                ? 'components.public-link-copied-info'
-                : (havePublicLink
-                  ? "components.public-link-copy"
-                  : "components.public-link-get"))}
-            </Button>
+            <CopyLinkButton
+              textToCopy={havePublicLink && publicLink}
+              />
           </div>
         </div>
         <div className="p-4 flex flex-row items-center justify-center text-zinc-800 dark:text-white">