From fdf7ea1f82b47d8bcb534e35be491dc2c8d0dbba Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 21 Apr 2023 15:46:28 +0530
Subject: [PATCH] feat: copy page link added (#915)

---
 .../pages/single-page-detailed-item.tsx       | 32 ++++++++++++++++++-
 .../pages/single-page-list-item.tsx           | 32 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/apps/app/components/pages/single-page-detailed-item.tsx b/apps/app/components/pages/single-page-detailed-item.tsx
index 0c065d47f..9c025f21d 100644
--- a/apps/app/components/pages/single-page-detailed-item.tsx
+++ b/apps/app/components/pages/single-page-detailed-item.tsx
@@ -5,10 +5,12 @@ import { useRouter } from "next/router";
 
 // hooks
 import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
 // ui
 import { CustomMenu, Tooltip } from "components/ui";
 // icons
 import {
+  LinkIcon,
   LockClosedIcon,
   LockOpenIcon,
   PencilIcon,
@@ -17,7 +19,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { ExclamationIcon } from "components/icons";
 // helpers
-import { truncateText } from "helpers/string.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import { renderShortTime, renderShortDate, renderLongDateFormat } from "helpers/date-time.helper";
 // types
 import { IPage, IProjectMember } from "types";
@@ -46,6 +48,22 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
 
   const { user } = useUser();
 
+  const { setToastAlert } = useToast();
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Page link copied to clipboard.",
+      });
+    });
+  };
+
   return (
     <div className="relative">
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
@@ -172,6 +190,18 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                     <span>Delete Page</span>
                   </span>
                 </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleCopyText();
+                  }}
+                >
+                  <div className="flex items-center justify-start gap-2">
+                    <LinkIcon className="h-4 w-4" />
+                    <span>Copy Page link</span>
+                  </div>
+                </CustomMenu.MenuItem>
               </CustomMenu>
             </div>
           </div>
diff --git a/apps/app/components/pages/single-page-list-item.tsx b/apps/app/components/pages/single-page-list-item.tsx
index a06681fd1..bdb7d4bb9 100644
--- a/apps/app/components/pages/single-page-list-item.tsx
+++ b/apps/app/components/pages/single-page-list-item.tsx
@@ -5,11 +5,13 @@ import { useRouter } from "next/router";
 
 // hooks
 import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
 // ui
 import { CustomMenu, Tooltip } from "components/ui";
 // icons
 import {
   DocumentTextIcon,
+  LinkIcon,
   LockClosedIcon,
   LockOpenIcon,
   PencilIcon,
@@ -18,7 +20,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { ExclamationIcon } from "components/icons";
 // helpers
-import { truncateText } from "helpers/string.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import { renderLongDateFormat, renderShortDate, renderShortTime } from "helpers/date-time.helper";
 // types
 import { IPage, IProjectMember } from "types";
@@ -47,6 +49,22 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
 
   const { user } = useUser();
 
+  const { setToastAlert } = useToast();
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Page link copied to clipboard.",
+      });
+    });
+  };
+
   return (
     <li>
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
@@ -172,6 +190,18 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         <span>Delete Page</span>
                       </span>
                     </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleCopyText();
+                      }}
+                    >
+                      <div className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-4 w-4" />
+                        <span>Copy Page link</span>
+                      </div>
+                    </CustomMenu.MenuItem>
                   </CustomMenu>
                 </div>
               </div>