From 685b85bd48ab33af65a8ad63905b5f13426624f4 Mon Sep 17 00:00:00 2001
From: adueck <adueck@users.noreply.github.com>
Date: Tue, 8 Nov 2022 14:56:43 +0500
Subject: [PATCH] expose word id copy tag for all

---
 website/src/screens/IsolatedEntry.tsx | 34 +++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/website/src/screens/IsolatedEntry.tsx b/website/src/screens/IsolatedEntry.tsx
index cc2d47d..bce2813 100644
--- a/website/src/screens/IsolatedEntry.tsx
+++ b/website/src/screens/IsolatedEntry.tsx
@@ -53,11 +53,18 @@ function IsolatedEntry({ state, dictionary, isolateEntry }: {
     const [comment, setComment] = useState<string>("");
     const [editSubmitted, setEditSubmitted] = useState<boolean>(false);
     const [showingDeleteWarning, setShowingDeleteWarning] = useState<boolean>(false);
+    const [showClipped, setShowClipped] = useState<string>("");
     useEffect(() => {
         setEditing(false);
         setComment("");
         setEditSubmitted(false);
     }, [state]);
+    function flashClippedMessage(m: string) {
+        setShowClipped(m);
+        setTimeout(() => {
+            setShowClipped("");
+        }, 1250);
+    }
     const wordlistWord = state.wordlist.find((w) => w.entry.ts === state.isolatedEntry?.ts);
     const textOptions = getTextOptions(state);
     function submitEdit() {
@@ -128,6 +135,16 @@ function IsolatedEntry({ state, dictionary, isolateEntry }: {
             return null;
         }
     }
+    function handleClipId() {
+        if (!entry) return
+        navigator.clipboard.writeText(entry.ts.toString());
+        flashClippedMessage("word id copied to clipboard");
+    }
+    function handleClipEntry() {
+        if (!entry) return
+        navigator.clipboard.writeText(JSON.stringify(entry));
+        flashClippedMessage("entry data copied to clipboard");
+    }
     return <div className="wide-width-limiter">
         <Helmet>
             <title>{entry.p} - LingDocs Pashto Dictionary</title>
@@ -149,11 +166,11 @@ function IsolatedEntry({ state, dictionary, isolateEntry }: {
                     >
                         <i className={`fas fa-${exploded ? "compress" : "expand"}-alt`} />
                     </div>
+                    <div className="clickable mr-3" onClick={handleClipId}>
+                        <i className="fas fa-tag"></i>
+                    </div>
                     {state.user && state.user.level === "editor" && <>
-                        <div className="clickable mr-3" onClick={() => navigator.clipboard.writeText(entry.ts.toString())}>
-                            <i className="fas fa-tag"></i>
-                        </div>
-                        <div className="clickable mr-3" onClick={() => navigator.clipboard.writeText(JSON.stringify(entry))}>
+                        <div className="clickable mr-3" onClick={handleClipEntry}>
                             <i className="fas fa-code"></i>
                         </div>
                         <Link to={`/edit?id=${entry.ts}`} className="plain-link">
@@ -251,6 +268,15 @@ function IsolatedEntry({ state, dictionary, isolateEntry }: {
         {isVerbEntry && <div className="pb-4">
             <DisplayVPExplorer entry={entry} complement={complement} />
         </div>}
+        {showClipped && <div className="alert alert-primary text-center" role="alert" style={{
+            position: "fixed",
+            top: "30%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            zIndex: 9999999999999,
+        }}>
+            {showClipped}
+        </div>}
 
         {!!(relatedEntries && relatedEntries.length) ? <>
             <h4 style={{ marginTop: isVerbEntry ? "10rem" : "5rem" }}>Related Words</h4>