From e40a0c844c837e8cc6aedcdd58bfbec8657a775b Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Fri, 23 Jun 2023 16:14:52 +0200
Subject: [PATCH] Creating CopyTextField component and adding it to
 showCompletedUpload and Shaere Modal

---
 .../modals/showCompletedReverseShareModal.tsx | 25 ++---------
 .../src/components/upload/CopyTextField.tsx   | 45 +++++++++++++++++++
 .../modals/showCompletedUploadModal.tsx       | 38 ++--------------
 3 files changed, 52 insertions(+), 56 deletions(-)
 create mode 100644 frontend/src/components/upload/CopyTextField.tsx

diff --git a/frontend/src/components/share/modals/showCompletedReverseShareModal.tsx b/frontend/src/components/share/modals/showCompletedReverseShareModal.tsx
index 54a872a..cb1047d 100644
--- a/frontend/src/components/share/modals/showCompletedReverseShareModal.tsx
+++ b/frontend/src/components/share/modals/showCompletedReverseShareModal.tsx
@@ -1,9 +1,7 @@
-import { ActionIcon, Button, Stack, TextInput } from "@mantine/core";
-import { useClipboard } from "@mantine/hooks";
+import { Button, Stack } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
-import { TbCopy } from "react-icons/tb";
-import toast from "../../../utils/toast.util";
+import CopyTextField from "../../upload/CopyTextField";
 
 const showCompletedReverseShareModal = (
   modals: ModalsContextProps,
@@ -26,28 +24,11 @@ const Body = ({
   link: string;
   getReverseShares: () => void;
 }) => {
-  const clipboard = useClipboard({ timeout: 500 });
   const modals = useModals();
 
   return (
     <Stack align="stretch">
-      <TextInput
-        readOnly
-        variant="filled"
-        value={link}
-        rightSection={
-          window.isSecureContext && (
-            <ActionIcon
-              onClick={() => {
-                clipboard.copy(link);
-                toast.success("Your link was copied to the keyboard.");
-              }}
-            >
-              <TbCopy />
-            </ActionIcon>
-          )
-        }
-      />
+        <CopyTextField link={link} />
 
       <Button
         onClick={() => {
diff --git a/frontend/src/components/upload/CopyTextField.tsx b/frontend/src/components/upload/CopyTextField.tsx
new file mode 100644
index 0000000..4251943
--- /dev/null
+++ b/frontend/src/components/upload/CopyTextField.tsx
@@ -0,0 +1,45 @@
+import {useRef, useState} from "react";
+import toast from "../../utils/toast.util";
+import {ActionIcon, TextInput} from "@mantine/core";
+import {TbCheck, TbCopy} from "react-icons/tb";
+import {useClipboard} from "@mantine/hooks";
+
+function CopyTextField(props: { link: string })
+{
+
+    const clipboard = useClipboard({ timeout: 500 });
+    const [checkState, setCheckState] = useState(false);
+    const timerRef = useRef<number | ReturnType<typeof setTimeout> | undefined>(
+        undefined
+    );
+
+    const copyLink = () => {
+        clipboard.copy(props.link);
+        toast.success("Your link was copied to the keyboard.");
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            setCheckState(false);
+        }, 1500);
+        setCheckState(true);
+    };
+
+
+    return(
+        <TextInput
+            readOnly
+            label="Link"
+            variant="filled"
+            value={props.link}
+            onClick={copyLink}
+            rightSection={
+                window.isSecureContext && (
+                    <ActionIcon onClick={copyLink}>
+                        {checkState ? <TbCheck /> : <TbCopy />}
+                    </ActionIcon>
+                )
+            }
+        />
+    )
+}
+
+export default CopyTextField;
\ No newline at end of file
diff --git a/frontend/src/components/upload/modals/showCompletedUploadModal.tsx b/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
index a3f0a95..fb79e1b 100644
--- a/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
+++ b/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
@@ -1,13 +1,10 @@
-import { ActionIcon, Button, Stack, Text, TextInput } from "@mantine/core";
-import { useClipboard } from "@mantine/hooks";
+import { Button, Stack, Text } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import moment from "moment";
 import { useRouter } from "next/router";
-import { TbCopy, TbChecks } from "react-icons/tb";
-import { useState, useRef } from "react";
 import { Share } from "../../../types/share.type";
-import toast from "../../../utils/toast.util";
+import CopyTextField from "../CopyTextField";
 
 const showCompletedUploadModal = (
   modals: ModalsContextProps,
@@ -24,42 +21,15 @@ const showCompletedUploadModal = (
 };
 
 const Body = ({ share, appUrl }: { share: Share; appUrl: string }) => {
-  const clipboard = useClipboard({ timeout: 500 });
+
   const modals = useModals();
   const router = useRouter();
 
-  const [checkState, setCheckState] = useState(false);
-  const timerRef = useRef<number | ReturnType<typeof setTimeout> | undefined>(
-    undefined
-  );
-
   const link = `${appUrl}/share/${share.id}`;
 
-  const copyLink = () => {
-    clipboard.copy(link);
-    toast.success("Your link was copied to the keyboard.");
-    if (timerRef.current) clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(() => {
-      setCheckState(false);
-    }, 1500);
-    setCheckState(true);
-  };
-
   return (
     <Stack align="stretch">
-      <TextInput
-        readOnly
-        variant="filled"
-        value={link}
-        onClick={copyLink}
-        rightSection={
-          window.isSecureContext && (
-            <ActionIcon onClick={copyLink}>
-              {checkState ? <TbCheck /> : <TbCopy />}
-            </ActionIcon>
-          )
-        }
-      />
+      <CopyTextField link={link} />
       <Text
         size="xs"
         sx={(theme) => ({