From a756e22cc8c31afa0e820d795ad8fd7dca5e8b64 Mon Sep 17 00:00:00 2001
From: Sosokker <sirinza29@gmail.com>
Date: Sun, 10 Nov 2024 18:12:19 +0700
Subject: [PATCH] fix: refetch follow record everytime component mount

---
 .../deals/[id]/followShareButton.tsx          | 35 +++++++++++++++----
 src/app/(investment)/deals/[id]/page.tsx      | 23 +-----------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/app/(investment)/deals/[id]/followShareButton.tsx b/src/app/(investment)/deals/[id]/followShareButton.tsx
index 5c69cd4..5a2c8de 100644
--- a/src/app/(investment)/deals/[id]/followShareButton.tsx
+++ b/src/app/(investment)/deals/[id]/followShareButton.tsx
@@ -2,22 +2,32 @@
 
 /* eslint-disable */
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { ShareIcon, StarIcon } from "lucide-react";
-import { deleteFollow, insertFollow } from "@/lib/data/followQuery";
+import { deleteFollow, getFollow, insertFollow } from "@/lib/data/followQuery";
 import toast from "react-hot-toast";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
 
 interface FollowShareButtons {
-  isFollow: boolean;
   userId: string;
   projectId: number;
 }
 
-const FollowShareButtons = ({ isFollow, userId, projectId }: FollowShareButtons) => {
+const FollowShareButtons = ({ userId, projectId }: FollowShareButtons) => {
   const supabase = createSupabaseClient();
-  const [isFollowState, setIsFollowState] = useState<boolean>(isFollow);
+  const { data: follow, isLoading: followIsLoading } = useQuery(getFollow(supabase, userId, projectId), {
+    staleTime: 0,
+  });
+
+  const [isFollowState, setIsFollowState] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (follow) {
+      setIsFollowState(!!follow);
+    }
+  }, [follow]);
 
   const handleShare = () => {
     const currentUrl = window.location.href;
@@ -27,11 +37,12 @@ const FollowShareButtons = ({ isFollow, userId, projectId }: FollowShareButtons)
       });
     }
   };
+
   const handleFollow = async () => {
     if (!isFollowState) {
       const error = await insertFollow(supabase, userId, projectId);
       if (error) {
-        toast.error("Error occur!");
+        toast.error("Error occurred!");
       } else {
         toast.success("You have followed the project!", { icon: "❤️" });
         setIsFollowState(true);
@@ -39,7 +50,7 @@ const FollowShareButtons = ({ isFollow, userId, projectId }: FollowShareButtons)
     } else {
       const error = await deleteFollow(supabase, userId, projectId);
       if (error) {
-        toast.error("Error occur!");
+        toast.error("Error occurred!");
       } else {
         toast.success("You have unfollowed the project!", { icon: "💔" });
         setIsFollowState(false);
@@ -47,6 +58,16 @@ const FollowShareButtons = ({ isFollow, userId, projectId }: FollowShareButtons)
     }
   };
 
+  if (followIsLoading) {
+    return (
+      <div className="grid grid-cols-2 gap-5 justify-self-end">
+        <div onClick={handleShare} className="cursor-pointer mt-2">
+          <ShareIcon />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="grid grid-cols-2 gap-5 justify-self-end ">
       <div className="mt-2 cursor-pointer" onClick={handleFollow}>
diff --git a/src/app/(investment)/deals/[id]/page.tsx b/src/app/(investment)/deals/[id]/page.tsx
index c86a41e..2a422d4 100644
--- a/src/app/(investment)/deals/[id]/page.tsx
+++ b/src/app/(investment)/deals/[id]/page.tsx
@@ -17,7 +17,6 @@ import { getDealList } from "@/app/api/dealApi";
 import { sumByKey, toPercentage } from "@/lib/utils";
 import { redirect } from "next/navigation";
 import { isOwnerOfProject } from "./query";
-import { getFollow } from "@/lib/data/followQuery";
 import remarkGfm from "remark-gfm";
 
 const PHOTO_MATERIAL_ID = 2;
@@ -60,26 +59,6 @@ export default async function ProjectDealPage({ params }: { params: { id: number
       </div>
     );
   }
-  const { data: follow, error: followError } = await getFollow(supabase, user!.user.id, params.id);
-
-  if (followError) {
-    return (
-      <div className="flex items-center justify-center h-screen">
-        <div className="container max-w-screen-xl text-center">
-          <p className="text-red-600">Error fetching data. Please try again.</p>
-          <p className="text-red-600">{followError.message}</p>
-          <Link href={`/deals/${params.id}`}>
-            <Button className="mt-4">Refresh</Button>
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
-  let isFollow = false;
-  if (follow) {
-    isFollow = true;
-  }
 
   const isOwner = await isOwnerOfProject(supabase, params.id, user.user?.id);
 
@@ -110,7 +89,7 @@ export default async function ProjectDealPage({ params }: { params: { id: number
               <Image src="/logo.svg" alt="logo" width={50} height={50} className="sm:scale-75" />
               <h1 className="mt-3 font-bold  text-lg md:text-3xl">{projectData?.project_name}</h1>
             </span>
-            <FollowShareButtons isFollow={isFollow} userId={user!.user.id} projectId={params.id} />
+            <FollowShareButtons userId={user!.user.id} projectId={params.id} />
           </div>
           {/* end of pack */}
           <p className="mt-2 sm:text-sm">{projectData?.project_short_description}</p>