From 1b947ee91511e37e3933ab1ab923e2e2cc8475cb Mon Sep 17 00:00:00 2001
From: Swarup Bhise <swarupbhise420@gmail.com>
Date: Mon, 13 May 2024 14:47:44 +0530
Subject: [PATCH] feat: create a Share Post Feature

---
 package-lock.json                   |  39 ++++++++
 package.json                        |   1 +
 public/assets/icons/cancel.svg      |   7 ++
 src/components/shared/PostStats.tsx |  50 +++++++----
 src/components/ui/Share.tsx         | 134 ++++++++++++++++++++++++++++
 5 files changed, 213 insertions(+), 18 deletions(-)
 create mode 100644 public/assets/icons/cancel.svg
 create mode 100644 src/components/ui/Share.tsx

diff --git a/package-lock.json b/package-lock.json
index c6c6b37..db046e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "react-hook-form": "^7.51.3",
         "react-intersection-observer": "^9.10.1",
         "react-router-dom": "^6.23.0",
+        "react-share": "^5.1.0",
         "tailwind-merge": "^2.3.0",
         "zod": "^3.23.5"
       },
@@ -2644,6 +2645,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -3527,6 +3533,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz",
+      "integrity": "sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==",
+      "dependencies": {
+        "debug": "^2.1.3"
+      }
+    },
+    "node_modules/jsonp/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/jsonp/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -4231,6 +4258,18 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-share": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-share/-/react-share-5.1.0.tgz",
+      "integrity": "sha512-OvyfMtj/0UzH1wi90OdHhZVJ6WUC/+IeWvBwppeZozwIGyAjQgyR0QXlHOrxVHVECqnGvcpBaFTXVrqouTieaw==",
+      "dependencies": {
+        "classnames": "^2.3.2",
+        "jsonp": "^0.2.1"
+      },
+      "peerDependencies": {
+        "react": "^17 || ^18"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
diff --git a/package.json b/package.json
index 3274621..21666a2 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "react-hook-form": "^7.51.3",
     "react-intersection-observer": "^9.10.1",
     "react-router-dom": "^6.23.0",
+    "react-share": "^5.1.0",
     "tailwind-merge": "^2.3.0",
     "zod": "^3.23.5"
   },
diff --git a/public/assets/icons/cancel.svg b/public/assets/icons/cancel.svg
new file mode 100644
index 0000000..e1f4aba
--- /dev/null
+++ b/public/assets/icons/cancel.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#877EFF" width="800px" height="800px" viewBox="0 0 32.00 32.00" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#877EFF">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <title>cancel1</title> <path d="M16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13zM16 6c-5.522 0-10 4.478-10 10s4.478 10 10 10c5.523 0 10-4.478 10-10s-4.477-10-10-10zM20.537 19.535l-1.014 1.014c-0.186 0.186-0.488 0.186-0.675 0l-2.87-2.87-2.87 2.87c-0.187 0.186-0.488 0.186-0.675 0l-1.014-1.014c-0.186-0.186-0.186-0.488 0-0.675l2.871-2.869-2.871-2.87c-0.186-0.187-0.186-0.489 0-0.676l1.014-1.013c0.187-0.187 0.488-0.187 0.675 0l2.87 2.87 2.87-2.87c0.187-0.187 0.489-0.187 0.675 0l1.014 1.013c0.186 0.187 0.186 0.489 0 0.676l-2.871 2.87 2.871 2.869c0.186 0.187 0.186 0.49 0 0.675z"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/components/shared/PostStats.tsx b/src/components/shared/PostStats.tsx
index 662ec58..e1fe277 100644
--- a/src/components/shared/PostStats.tsx
+++ b/src/components/shared/PostStats.tsx
@@ -9,6 +9,7 @@ import {
   useLikePost,
   useSavePost,
 } from "@/lib/react-query/queriesAndMutations";
+import Share from "../ui/Share";
 
 type PostStatsProps = {
   post?: Models.Document;
@@ -31,6 +32,7 @@ const PostStats = ({ post, userId }: PostStatsProps) => {
   const savedPostRecord = currentUser?.save.find(
     (record: Models.Document) => record.post.$id === post?.$id
   );
+  const [shareurl, setShareUrl] = useState("");
 
   useEffect(() => {
     setIsSaved(!!savedPostRecord);
@@ -83,32 +85,44 @@ const PostStats = ({ post, userId }: PostStatsProps) => {
     }
   };
 
+  const handleShare = () => {
+    const hostUrl = window.location.origin;
+
+    setShareUrl(hostUrl + "/posts/" + post?.$id);
+  };
+
   const containerStyles = location.pathname.startsWith("/profile")
     ? "w-full"
     : "";
 
   return (
     <div
-      className={`flex justify-between items-center z-20 ${containerStyles}`}
+      className={` position-relative flex justify-between items-center z-20 ${containerStyles}`}
     >
-      <div className="flex gap-2 mr-5">
-        <img
-          src={`${
-            checkIsLiked(likes, userId)
-              ? "/assets/icons/liked.svg"
-              : "/assets/icons/like.svg"
-          }`}
-          alt="like"
-          width={20}
-          height={20}
-          onClick={(e) => handleLikePost(e)}
-          onKeyDown={(e) => handleLikePost(e)}
-          className="cursor-pointer"
-          tabIndex={0}
-        />
-        <p className="small-medium lg:base-medium">{likes.length}</p>
+      <div className="flex gap-2">
+        <div className="flex gap-2 mr-5">
+          <img
+            src={`${
+              checkIsLiked(likes, userId)
+                ? "/assets/icons/liked.svg"
+                : "/assets/icons/like.svg"
+            }`}
+            alt="like"
+            width={20}
+            height={20}
+            onClick={(e) => handleLikePost(e)}
+            onKeyDown={(e) => handleLikePost(e)}
+            className="cursor-pointer"
+            tabIndex={0}
+          />
+          <p className="small-medium lg:base-medium">{likes.length}</p>
+        </div>
+        <div className="flex gap-2 mr-5">
+          <Share shareurl={shareurl} handleShare={handleShare} />
+
+          {/* <p className="small-medium lg:base-medium">0</p> */}
+        </div>
       </div>
-
       <div className="flex gap-2">
         <img
           src={isSaved ? "/assets/icons/saved.svg" : "/assets/icons/save.svg"}
diff --git a/src/components/ui/Share.tsx b/src/components/ui/Share.tsx
new file mode 100644
index 0000000..e541601
--- /dev/null
+++ b/src/components/ui/Share.tsx
@@ -0,0 +1,134 @@
+import {
+  EmailShareButton,
+  EmailIcon,
+  FacebookShareButton,
+  FacebookIcon,
+  WhatsappShareButton,
+  WhatsappIcon,
+  TwitterShareButton,
+  TwitterIcon,
+  TelegramShareButton,
+  TelegramIcon,
+} from "react-share";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "./button";
+
+type ShareProps = {
+  shareurl: string;
+  handleShare: () => void;
+};
+
+const Share = ({ shareurl, handleShare }: ShareProps) => {
+  const data = [
+    {
+      label: "Facebook",
+      icon: (
+        <FacebookShareButton url={shareurl}>
+          <FacebookIcon size={30} round />
+        </FacebookShareButton>
+      ),
+    },
+
+    {
+      label: "Whatsapp",
+      icon: (
+        <WhatsappShareButton url={shareurl}>
+          <WhatsappIcon size={30} round />
+        </WhatsappShareButton>
+      ),
+    },
+    {
+      label: "Twitter",
+      icon: (
+        <TwitterShareButton url={shareurl}>
+          <TwitterIcon size={30} round />
+        </TwitterShareButton>
+      ),
+    },
+    {
+      label: "Telegram",
+      icon: (
+        <TelegramShareButton url={shareurl}>
+          <TelegramIcon size={30} round />
+        </TelegramShareButton>
+      ),
+    },
+    {
+      label: "Email",
+      icon: (
+        <EmailShareButton url={shareurl}>
+          <EmailIcon size={30} round />
+        </EmailShareButton>
+      ),
+    },
+  ];
+
+  return (
+    <Dialog>
+      <DialogTrigger>
+        <img
+          className=" cursor-pointer"
+          src={"/assets/icons/share.svg"}
+          alt="share"
+          width={24}
+          height={24}
+          tabIndex={0}
+          onClick={handleShare}
+        />
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Share Link</DialogTitle>
+        </DialogHeader>
+        <div>
+          <p className="text-md mb-4">Share this Post via</p>
+          <div className="flex justify-between items-center flex-wrap gap-4">
+            {data.map((ele) => {
+              return (
+                <div className="flex flex-col justify-between items-center gap-2 cursor-pointer">
+                  {ele.icon}
+                  <span className="text-sm capitalize">{ele.label}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>{" "}
+        <div>
+          <p className="text-md mb-2">Or copy link</p>
+          <p className="text-md mb-2 text-gray-500">
+            Anyone who has this link will be able to view this
+          </p>
+          <div className="flex justify-center align-center gap-1">
+            <input
+              readOnly
+              className=" border border-white-800 rounded-sm w-[100%] p-2 bg-[#000] outline-none"
+              value={shareurl}
+            ></input>
+            <Button
+              className="bg-white"
+              onClick={() => {
+                window.navigator.clipboard.writeText(shareurl);
+              }}
+            >
+              <img
+                src={"/assets/icons/copy.svg"}
+                alt="edit"
+                width={20}
+                height={20}
+                className=" invert" // Add consistent spacing after the img tag
+              />
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default Share;