Add session prop to TagsDialog and implement

follow functionality.
thebkht · Nov 7, 2023 · 535c822 · 535c822
1 parent b06370e
commit 535c822
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/app/(Main)/get-started/page.tsx b/app/(Main)/get-started/page.tsx
@@ -8,7 +8,7 @@ export default async function GetStartedPage() {
      console.log(tags);
      return (
           <>
-               <TagsDialog open tags={tags} />
+               <TagsDialog open tags={tags} session={session} />
           </>
      )
 }
diff --git a/components/get-started/tags.tsx b/components/get-started/tags.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { Icons } from "@/components/icon"
 import {
      AlertDialog,
@@ -13,9 +14,34 @@ import {
 import Link from "next/link"
 import TagBadge from "../tags/tag"
 import { Button } from "../ui/button"
-import { Plus } from "lucide-react"
+import { Check, Plus } from "lucide-react"
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { useSession } from "next-auth/react"
 
-export default function TagsDialog({ tags, ...props }: React.ComponentPropsWithoutRef<typeof AlertDialog> & { tags: any }) {
+export default function TagsDialog({ tags, session, ...props }: React.ComponentPropsWithoutRef<typeof AlertDialog> & { tags: any, session: any }) {
+     const router = useRouter();
+
+     const { status: sessionStatus } = useSession();
+
+     const [followingTags, setFollowingTags] = useState<any>([]);
+
+     const handleFollow  = async (tag: any) => {
+          if (sessionStatus === "authenticated") {
+               try {
+                    const response = await fetch(`/api/follow/tag?tagId=${tag.id}&userId=${session.id}`, {
+                         method: "GET",
+                    });
+               } catch (error) {
+                    console.error(error);
+               }
+               await fetch(`/api/revalidate?path=/tag/${tag.name}`, {
+                    method: "GET",
+                    });
+               router.refresh();
+     }
+
+     }
      return (
           <AlertDialog {...props}>
                     <AlertDialogContent className="">
@@ -27,10 +53,16 @@ export default function TagsDialog({ tags, ...props }: React.ComponentPropsWitho
                               </AlertDialogDescription>
                          </AlertDialogHeader>
                          <div className="flex flex-wrap justify-center mt-8">
+                              {followingTags.map((tag: any) => (
+                                    <TagBadge key={tag.id} className="bg-primary text-sm py-1.5 px-2.5 rounded-full mr-1.5 mb-1.5 text-primary-foreground capitalize">
+                                        <Button variant={'ghost'} className="h-fit w-fit !p-0 mr-2.5 hover:bg-transparent hover:text-primary-foreground"><Check className="h-4 w-4" /></Button>
+                                        {tag.name.replace(/-/g, ' ')}
+                                        </TagBadge>
+                              ))}
                               {tags.map((tag: any) => (
                                     <TagBadge key={tag.id} className="text-sm py-1.5 px-2.5 rounded-full mr-1.5 mb-1.5 capitalize">
+                                        <Button variant={'ghost'} className="h-fit w-fit !p-0 mr-2.5 hover:bg-transparent hover:text-primary-foreground"><Plus className="h-4 w-4" /></Button>
                                         {tag.name.replace(/-/g, ' ')}
-                                        <Button variant={'ghost'} className="h-fit w-fit !p-0 ml-2.5 hover:bg-transparent hover:text-primary-foreground"><Plus className="h-4 w-4" /></Button>
                                         </TagBadge>
                               ))}
                          </div>