Merge pull request #53 from CoderSwarup/sharepost

feat: create a Share Post Feature

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"
   },

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"}

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;