From 65b26613c56ee2b35206bbc55573d6c679bad217 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sat, 11 May 2024 07:02:56 +0500
Subject: [PATCH] feat(navigation): add a copy current url button to navbar for
 ease of sharing

---
 .../NavigationRail/NavigationRail.jsx         | 10 ++++
 frontend/app/hooks/useCopyToClipboard.js      | 46 +++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 frontend/app/hooks/useCopyToClipboard.js

diff --git a/frontend/app/components/NavigationRail/NavigationRail.jsx b/frontend/app/components/NavigationRail/NavigationRail.jsx
index bad7d86..e399168 100644
--- a/frontend/app/components/NavigationRail/NavigationRail.jsx
+++ b/frontend/app/components/NavigationRail/NavigationRail.jsx
@@ -5,8 +5,10 @@ import Link from "next/link";
 import Image from "next/image";
 import { useUserStore } from "@/app/store/user-store";
 import { useRouter } from "next/navigation";
+import useCopyToClipboard from "@/app/hooks/useCopyToClipboard";
 
 export const NavigationRail = (props) => {
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
   const pathname = usePathname();
   const userStore = useUserStore();
   const router = useRouter();
@@ -98,6 +100,14 @@ export const NavigationRail = (props) => {
       )}
 
       <span className="max"></span>
+
+      <button className="circle transparent" onClick={() => copyToClipboard()}>
+        <i>{isCopied ? "done" : "content_copy"}</i>
+        <div class="tooltip right">
+          {isCopied ? "Ссылка скопирована" : "Скопировать ссылку"}
+        </div>
+      </button>
+
       <button
         className="circle transparent"
         onClick={() => props.setSettingsPopup(!props.settingsPopup)}
diff --git a/frontend/app/hooks/useCopyToClipboard.js b/frontend/app/hooks/useCopyToClipboard.js
new file mode 100644
index 0000000..94a14e9
--- /dev/null
+++ b/frontend/app/hooks/useCopyToClipboard.js
@@ -0,0 +1,46 @@
+// hooks/useCopyToClipboard.js
+
+import { useState, useEffect } from "react";
+
+function useCopyToClipboard() {
+  const [isCopied, setIsCopied] = useState(false);
+
+  useEffect(() => {
+    if (isCopied) {
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2500);
+    }
+  }, [isCopied]);
+
+  async function copyToClipboard(text) {
+    if (!navigator.clipboard) {
+      // Clipboard API not supported
+      try {
+        // Fallback for older browsers (like Firefox before v49)
+        const input = document.createElement("input");
+        document.body.appendChild(input);
+        input.setAttribute("value", window.location.href);
+        input.select();
+        document.execCommand("copy");
+        document.body.removeChild(input);
+        setIsCopied(true);
+      } catch (err) {
+        console.error("Failed to copy text: ", err);
+        setIsCopied(false);
+      }
+    } else {
+      try {
+        await navigator.clipboard.writeText(window.location.href);
+        setIsCopied(true);
+      } catch (err) {
+        console.error("Failed to copy text: ", err);
+        setIsCopied(false);
+      }
+    }
+  }
+
+  return [isCopied, copyToClipboard];
+}
+
+export default useCopyToClipboard;