From ea1a201493e883b3e342da30da9deb342422974b Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 3 Dec 2023 21:42:19 +0100
Subject: [PATCH] feat(post tools): add functional share button

---
 src/components/account-bar/account-bar.tsx    |  9 ++++++-
 .../post/post-tools/post-tools.module.css     |  9 +++++++
 src/components/post/post-tools/post-tools.tsx | 27 ++++++++++++++-----
 src/lib/utils/url-utils.ts                    | 12 ++++++++-
 4 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/components/account-bar/account-bar.tsx b/src/components/account-bar/account-bar.tsx
index d5ce9dcd..289bf532 100644
--- a/src/components/account-bar/account-bar.tsx
+++ b/src/components/account-bar/account-bar.tsx
@@ -102,7 +102,14 @@ const AccountBar = () => {
         </Link>
       </span>
       <span className={styles.separator}>|</span>
-      <Link to='/settings' className={styles.iconButton} onClick={(e) => {e.preventDefault(); setIsMailUnread(!isMailUnread)}}>
+      <Link
+        to='/settings'
+        className={styles.iconButton}
+        onClick={(e) => {
+          e.preventDefault();
+          setIsMailUnread(!isMailUnread);
+        }}
+      >
         <span className={`${styles.mailIcon} ${mailClass}`} />
         {isMailUnread && <span className={styles.mailUnreadCount}>1</span>}
       </Link>
diff --git a/src/components/post/post-tools/post-tools.module.css b/src/components/post/post-tools/post-tools.module.css
index 6a444bd5..fb041acd 100644
--- a/src/components/post/post-tools/post-tools.module.css
+++ b/src/components/post/post-tools/post-tools.module.css
@@ -84,4 +84,13 @@
 
 .menuItem button {
   text-transform: capitalize;
+}
+
+.text {
+  font-weight: normal !important;
+  color: var(--text) !important;
+}
+
+.text:hover {
+  text-decoration: none !important;
 }
\ No newline at end of file
diff --git a/src/components/post/post-tools/post-tools.tsx b/src/components/post/post-tools/post-tools.tsx
index f57cf176..f6eb40d0 100644
--- a/src/components/post/post-tools/post-tools.tsx
+++ b/src/components/post/post-tools/post-tools.tsx
@@ -7,6 +7,7 @@ import styles from './post-tools.module.css';
 import { FailedLabel, PendingLabel, SpoilerLabel } from '../label';
 import challengesStore from '../../../hooks/use-challenges';
 import { alertChallengeVerificationFailed } from '../../../lib/utils/challenge-utils';
+import { getShareLink } from '../../../lib/utils/url-utils';
 const { addChallenge } = challengesStore.getState();
 
 interface PostToolsProps {
@@ -16,7 +17,7 @@ interface PostToolsProps {
   isReply?: boolean;
   replyCount?: number;
   spoiler?: boolean;
-  subplebbitAddress?: string;
+  subplebbitAddress: string;
   showReplyForm?: () => void;
 }
 
@@ -119,14 +120,28 @@ const ThreadTools = ({ cid, hasLabel, subplebbitAddress, replyCount = 0 }: PostT
   const { t } = useTranslation();
   const validReplyCount = isNaN(replyCount) ? 0 : replyCount;
   const commentCount = validReplyCount === 0 ? t('post_no_comments') : `${validReplyCount} ${validReplyCount === 1 ? t('post_comment') : t('post_comments')}`;
+  const [hasShared, setHasShared] = useState(false);
+
+  useEffect(() => {
+    if (hasShared) {
+      setTimeout(() => setHasShared(false), 2000);
+    }
+  }, [hasShared]);
 
   return (
     <>
       <li className={`${styles.button} ${!hasLabel ? styles.firstButton : ''}`}>
         <Link to={`/p/${subplebbitAddress}/c/${cid}`}>{commentCount}</Link>
       </li>
-      <li className={styles.button}>
-        <span>{t('post_share')}</span>
+      <li className={`${!hasShared ? styles.button : styles.text}`}>
+        <span
+          onClick={() => {
+            setHasShared(true);
+            getShareLink(subplebbitAddress, cid);
+          }}
+        >
+          {hasShared ? 'link copied' : t('post_share')}
+        </span>
       </li>
       <li className={styles.button}>
         <span>{t('post_save')}</span>
@@ -185,13 +200,13 @@ const PostTools = ({ cid, failed, hasLabel = false, isReply, replyCount, spoiler
 
   return (
     <ul className={`${styles.buttons} ${isReply ? styles.buttonsReply : ''} ${hasLabel ? styles.buttonsLabel : ''}`}>
-      {hasLabel && <PostToolsLabel cid={cid} failed={failed} isReply={isReply} spoiler={spoiler} />}
+      {hasLabel && <PostToolsLabel cid={cid} failed={failed} isReply={isReply} spoiler={spoiler} subplebbitAddress={subplebbitAddress} />}
       {isReply ? (
-        <ReplyTools cid={cid} hasLabel={hasLabel} showReplyForm={showReplyForm} />
+        <ReplyTools cid={cid} hasLabel={hasLabel} showReplyForm={showReplyForm} subplebbitAddress={subplebbitAddress} />
       ) : (
         <ThreadTools cid={cid} hasLabel={hasLabel} subplebbitAddress={subplebbitAddress} replyCount={replyCount} />
       )}
-      {isMod && <ModTools cid={cid} />}
+      {isMod && <ModTools cid={cid} subplebbitAddress={subplebbitAddress} />}
     </ul>
   );
 };
diff --git a/src/lib/utils/url-utils.ts b/src/lib/utils/url-utils.ts
index 09ba908a..0f43a966 100644
--- a/src/lib/utils/url-utils.ts
+++ b/src/lib/utils/url-utils.ts
@@ -13,4 +13,14 @@ export const isValidURL = (url: string) => {
   } catch {
     return false;
   }
-};
\ No newline at end of file
+};
+
+export const getShareLink = (subplebbitAddress: string, cid: string) => {
+  const shareLink = `https://pleb.bz/p/${subplebbitAddress}/c/${cid}?redirect=seedit.eth.limo`;
+
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(shareLink);
+  } else {
+    alert('Your browser does not support clipboard API');
+  }
+}
\ No newline at end of file