♻️ front: moved copy link button to own file (#50)

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>
+  );
+}

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
+            <CopyLinkButton
-              disabled={disabled || (!havePublicLink && publicLinkCreationLevel === 'none')}
+              textToCopy={havePublicLink && publicLink}
-              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>
           </div>
         </div>
         <div className="p-4 flex flex-row items-center justify-center text-zinc-800 dark:text-white">