small fix and working follow button

app/(content)/(user)/[username]/(profile)/layout.tsx

@@ -6,8 +6,8 @@ import { Card } from "@/components/ui/card"
 import { UserNotFound } from "@/components/user-not-found"
 import getURL from "@/lib/utils"
 
-export const dynamic = 'force-dynamic'
-export const fetchCache = 'force-no-store'
+// export const dynamic = 'force-dynamic'
+// export const fetchCache = 'force-no-store'
 
 export default async function ProfileLayout({
     params,

app/api/users/follow/route.ts

@@ -87,9 +87,7 @@ export async function PUT(request: Request) {
 // unfollow a user
 export async function DELETE(request: Request) {
     const session = await getCurrentUser()
-    const { searchParams } = new URL(request.url)
-
-    const userId = searchParams.get("userId") || undefined
+    const { userId } = await request.json()
 
     const followerIdSchema = z
         .object({

components/follow-button.tsx

 "use client"
 
+import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
+import { Icons } from "./icons"
 import { useFollow } from "./profile/hooks/use-follow"
 import { Button } from "./ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog"
@@ -16,17 +19,41 @@ export const FollowButton = ({
     const followMutation = useFollow("follow")
     const unfollowMutation = useFollow("unfollow")
 
+    const [text, setText] = useState<"Following" | "Unfollow">("Following")
+    const [isHovered, setIsHovered] = useState(false)
+    const [open, setOpen] = useState(false)
+
+    const router = useRouter()
+
+    useEffect(() => {
+        if (followMutation.isSuccess) {
+            router.refresh()
+        }
+        if (unfollowMutation.isSuccess) {
+            setOpen(false)
+            router.refresh()
+        }
+    }, [router, followMutation.isSuccess, unfollowMutation.isSuccess])
+
     return (
-        <Dialog>
+        <Dialog open={open} onOpenChange={setOpen}>
             {isFollowing ? (
-                <Button variant="outline" size="lg" >
-                    <span className="hover:hidden">Following</span>
-                    <DialogTrigger>
-                        <span className="hidden hover:block text-destructive border-destructive">Unfollow</span>
-                    </DialogTrigger>
-                </Button>
+                <DialogTrigger asChild>
+                    <Button variant={`${isHovered ? "destructive" : "outline"}`} size="lg"
+                        className="w-24"
+                        onMouseEnter={() => {
+                            setText("Unfollow")
+                            setIsHovered(true)
+                        }}
+                        onMouseOut={() => {
+                            setText("Following")
+                            setIsHovered(false)
+                        }}>
+                        {text}
+                    </Button>
+                </DialogTrigger>
             ) : (
-                <Button variant="outline" size="lg" onClick={() => followMutation.mutate({ userId })}>
+                <Button size="lg" onClick={() => followMutation.mutate({ userId })}>
                     Follow
                 </Button>
             )}
@@ -34,12 +61,14 @@ export const FollowButton = ({
                 <DialogHeader>
                     <DialogTitle>Unfollow @{username}?</DialogTitle>
                     <DialogDescription>
-                        Their Gweets will no longer show up in your home timeline.
-                        You can still view their profile, unless their Tweets are protected.
+                        You can still view their profile, unless their Gweets are protected.
                     </DialogDescription>
                 </DialogHeader>
                 <DialogFooter>
-                    <Button type="submit" onClick={() => unfollowMutation.mutate({ userId })}>
+                    <Button type="submit" onClick={() => unfollowMutation.mutate({ userId })} disabled={unfollowMutation.isLoading}>
+                        {unfollowMutation.isLoading && (
+                            <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+                        )}
                         Unfollow
                     </Button>
                 </DialogFooter>

components/profile/api/follow-user.ts

 export const followUser = async (userId: string) => {
-    console.log({ userId })
     try {
         const data = await fetch("/api/users/follow", {
-            method: "POST",
-            body: JSON.stringify({
-                userId,
-            }),
+            method: "PUT",
+            body: JSON.stringify({ userId }),
         }).then((result) => result.json())
 
         return data

components/profile/api/unfollow-user.ts

-export const unfollowUser = async (
-    user_id: string,
-) => {
+export const unfollowUser = async (userId: string) => {
     try {
-        const { data } = await fetch(`/api/users/follow?user_id=${user_id}`, {
-            method: "DELETE"
+        const data = await fetch(`/api/users/follow`, {
+            method: "DELETE",
+            body: JSON.stringify({ userId }),
         }).then((result) => result.json())
 
         return data

components/profile/components/profile-navbar.tsx

@@ -10,25 +10,25 @@ export const ProfileNavbar = ({ children, param }: { children: React.ReactNode,
     return (
         <Tabs defaultValue={"gweets"} value={pathValue} className="w-full h-full p-6 md:p-12 ">
             <TabsList className="grid w-full grid-cols-4">
-                <Link href={`/${param}`} className="w-full inline-flex items-center justify-center">
+                <Link href={`/${param}`} scroll={false} className="w-full inline-flex items-center justify-center">
                     <TabsTrigger value="gweets" className="w-full">
                         Gweets
                     </TabsTrigger>
                 </Link>
 
-                <Link href={`/${param}/games`} className="w-full inline-flex items-center justify-center">
+                <Link href={`/${param}/games`} scroll={false} className="w-full inline-flex items-center justify-center">
                     <TabsTrigger value="games" className="w-full">
                         Games
                     </TabsTrigger>
                 </Link>
 
-                <Link href={`/${param}/media`} className="w-full inline-flex items-center justify-center">
+                <Link href={`/${param}/media`} scroll={false} className="w-full inline-flex items-center justify-center">
                     <TabsTrigger value="media" className="w-full">
                         Media
                     </TabsTrigger>
                 </Link>
 
-                <Link href={`/${param}/likes`} className="w-full inline-flex items-center justify-center">
+                <Link href={`/${param}/likes`} scroll={false} className="w-full inline-flex items-center justify-center">
                     <TabsTrigger value="likes" className="w-full">
                         Likes
                     </TabsTrigger>