From 3de744d5e9bbbfee8934b402ac09016a4bd1c459 Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Thu, 22 Jun 2023 23:16:45 +0200
Subject: [PATCH] Adding a check when link is clicked, and now also on the text

---
 .../modals/showCompletedUploadModal.tsx       | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/upload/modals/showCompletedUploadModal.tsx b/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
index 70b1cd0..261b395 100644
--- a/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
+++ b/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
@@ -4,10 +4,11 @@ import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import moment from "moment";
 import { useRouter } from "next/router";
-import { TbCopy } from "react-icons/tb";
-import { useState } from "react";
+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 {TIMEOUT} from "dns";
 
 const showCompletedUploadModal = (
   modals: ModalsContextProps,
@@ -23,13 +24,34 @@ const showCompletedUploadModal = (
   });
 };
 
+
+
 const Body = ({ share, appUrl }: { share: Share; appUrl: string }) => {
   const clipboard = useClipboard({ timeout: 500 });
   const modals = useModals();
   const router = useRouter();
   const [linkClicked, setLinkClicked] = useState(false);
+  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);
+
+      setLinkClicked(true);
+      setCheckState(true);
+  }
+
   return (
     <Stack align="stretch">
       <TextInput
@@ -37,22 +59,13 @@ const Body = ({ share, appUrl }: { share: Share; appUrl: string }) => {
         variant="filled"
         style={{ borderColor: "green" }}
         value={link}
-        onClick={() => {
-            if (linkClicked) return;
-            clipboard.copy(link);
-            toast.success("Your link was copied to the keyboard.");
-            setLinkClicked(true);
-        }}
+        onClick={copyLink}
         rightSection={
           window.isSecureContext && (
             <ActionIcon
-              onClick={() => {
-                clipboard.copy(link);
-                toast.success("Your link was copied to the keyboard.");
-                setLinkClicked(true);
-              }}
+              onClick={copyLink}
             >
-              <TbCopy />
+                { checkState ? <TbChecks /> : <TbCopy /> }
             </ActionIcon>
           )
         }