Update share functionality

thebkht · Nov 28, 2023 · 1fb712b · 1fb712b
1 parent 522e938
commit 1fb712b
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 126 deletions.
diff --git a/components/blog/feed-post-card.tsx b/components/blog/feed-post-card.tsx
@@ -100,7 +100,7 @@ export default function FeedPostCard(
                   </div>
                   <div className="flex items-center space-x-1 text-muted-foreground text-sm feedpost__action-btn">
                     <Button variant="ghost" size={"icon"} className=" text-muted-foreground">
-                      <ShareList url={`${process.env.DOMAIN}/@${props.post.author.username}/${props.post.url}`} text={props.post.title}>
+                      <ShareList post={props.post.id} url={`${process.env.DOMAIN}/@${props.post.author.username}/${props.post.url}`} text={props.post.title}>
                         <div>
                           <MoreHorizontal className="h-5 w-5" />
                           <span className="sr-only">Share</span>
@@ -160,7 +160,7 @@ export default function FeedPostCard(
               </div>
               <div className="flex items-center space-x-1 text-muted-foreground text-sm feedpost__action-btn">
                 <Button variant="ghost" size={"icon"} className=" text-muted-foreground">
-                  <ShareList url={`${process.env.DOMAIN}/@${props.post.author.username}/${props.post.url}`} text={props.post.title}>
+                  <ShareList url={`${process.env.DOMAIN}/@${props.post.author.username}/${props.post.url}`} post={props.post.id} text={props.post.title}>
                     <div>
                       <Icons.moreHorizontal className="h-6 w-6" />
                       <span className="sr-only">Share</span>

diff --git a/components/blog/navbar.tsx b/components/blog/navbar.tsx
@@ -95,7 +95,7 @@ export default function PostTabs({ post: initialPost, className, session, author
                               )
                          }
                          <Separator orientation="vertical" />
-                         <ShareList url={`${process.env.DOMAIN}/@${author?.username}/${post.url}`} text={post.title} >
+                         <ShareList url={`${process.env.DOMAIN}/@${author?.username}/${post.url}`} text={post.title} post={post.id} >
                               <Button className="h-10 w-10 mr-0.5 rounded-full hover:bg-primary hover:text-primary-foreground" size={"icon"} variant={"ghost"} >
                                    <Icons.share className="w-6 h-6" />
                                    <span className="sr-only">Share</span>

diff --git a/components/blog/post-more-actions.tsx b/components/blog/post-more-actions.tsx
@@ -34,10 +34,12 @@ import React from "react";
 import { handleDelete } from "../delete";
 import { useRouter } from "next/navigation";
 import PostDeleteDialog from "./post-delete-dialog";
+import { addShare } from "@/lib/prisma/add-share";
 
 export default function PostMoreActions({ post, session, className, children, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenu> & { post: any, session: any, className?: string }) {
-     const copylink = (link: string) => {
+     const copylink = async(link: string) => {
           navigator.clipboard.writeText(link)
+          await addShare(post?.id)
      }
      const router = useRouter()
      const [showDeleteAlert, setShowDeleteAlert] = React.useState<boolean>(false)
@@ -71,7 +73,7 @@ export default function PostMoreActions({ post, session, className, children, ..
                               <Icons.link className="mr-2 h-4 w-4" />
                               <span>Copy link</span>
                          </DropdownMenuItem>
-                         <DropdownMenuItem>
+                         <DropdownMenuItem onClick={async() => await addShare(post?.id)}>
                               <TwitterShareButton
                                    url={`${process.env.DOMAIN}/@${post.author.username}/${post.url}`}
                                    title={post.title}
@@ -82,7 +84,7 @@ export default function PostMoreActions({ post, session, className, children, ..
                                    </div>
                               </TwitterShareButton>
                          </DropdownMenuItem>
-                         <DropdownMenuItem>
+                         <DropdownMenuItem onClick={async() => await addShare(post?.id)}>
                               <FacebookShareButton
                                    url={`${process.env.DOMAIN}/@${post.author.username}/${post.url}`}
                                    quote={post.title} >
@@ -92,7 +94,7 @@ export default function PostMoreActions({ post, session, className, children, ..
                                    </div>
                               </FacebookShareButton>
                          </DropdownMenuItem>
-                         <DropdownMenuItem>
+                         <DropdownMenuItem onClick={async() => await addShare(post?.id)}>
                               <LinkedinShareButton
                                    url={`${process.env.DOMAIN}/@${post.author.username}/${post.url}`} >
                                    <div className="flex">

diff --git a/components/share-list.tsx b/components/share-list.tsx
@@ -13,11 +13,14 @@ import {
 } from 'next-share'
 import { Icons } from "@/components/icon";
 import { Facebook, Linkedin } from "lucide-react";
+import { Post } from "@prisma/client";
+import { addShare } from "@/lib/prisma/add-share";
 
 
-export default function ShareList({ className, children, url, text, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenu> & { children: React.ReactNode, className?: string, url: string, text: string }) {
-     const copylink = (link: string) => {
+export default function ShareList({ className, children, url, text, post, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenu> & { children: React.ReactNode, className?: string, url: string, text: string, post: Post['id'] }) {
+     const copylink = async(link: string) => {
           navigator.clipboard.writeText(link)
+          await addShare(post)
      }
      return (
           <>
@@ -29,7 +32,7 @@ export default function ShareList({ className, children, url, text, ...props }:
                               <span>Copy link</span>
                          </DropdownMenuItem>
                          <DropdownMenuSeparator />
-                         <DropdownMenuItem>
+                         <DropdownMenuItem onClick={async() => await addShare(post)}>
                               <TwitterShareButton
                                    url={url}
                                    title={text}
@@ -41,7 +44,7 @@ export default function ShareList({ className, children, url, text, ...props }:
                                    </div>
                               </TwitterShareButton>
                          </DropdownMenuItem>
-                         <DropdownMenuItem>
+                         <DropdownMenuItem onClick={async() => await addShare(post)}>
                               <FacebookShareButton
                                    url={url}
                                    quote={text} >
@@ -51,7 +54,7 @@ export default function ShareList({ className, children, url, text, ...props }:
                                    </div>
                               </FacebookShareButton>
                          </DropdownMenuItem>
-                         <DropdownMenuItem>
+                         <DropdownMenuItem onClick={async() => await addShare(post)}>
                               <LinkedinShareButton
                                    url={url} >
                                    <div className="flex">

diff --git a/lib/prisma/add-share.ts b/lib/prisma/add-share.ts
@@ -0,0 +1,16 @@
+"use server";
+import { Post, PostShare } from "@prisma/client";
+import postgres from "../postgres";
+
+export const addShare = async (postId: PostShare["postId"]) => {
+  if (!postId) return;
+  try {
+    await postgres.postShare.create({
+      data: {
+        postId,
+      },
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
diff --git a/package-lock.json b/package-lock.json