From 23882a4feabf6634b2b9f258de96526f10d64a64 Mon Sep 17 00:00:00 2001
From: Michel Kansou <>
Date: Mon, 3 Jul 2023 11:11:35 +0200
Subject: [PATCH 1/2] fix: add follow unfollow for trending profiles

---
 src/app/trending/components/profile.tsx | 39 ++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/app/trending/components/profile.tsx b/src/app/trending/components/profile.tsx
index 054e8815..cddf356c 100644
--- a/src/app/trending/components/profile.tsx
+++ b/src/app/trending/components/profile.tsx
@@ -1,8 +1,10 @@
 import { Image } from "@shared/image";
 import { DEFAULT_AVATAR } from "@stores/constants";
 import { useQuery } from "@tanstack/react-query";
+import { useSocial } from "@utils/hooks/useSocial";
 import { compactNumber } from "@utils/number";
 import { shortenKey } from "@utils/shortenKey";
+import { useEffect, useState } from "react";
 
 export function Profile({ data }: { data: any }) {
 	const { status, data: userStats } = useQuery(
@@ -17,6 +19,41 @@ export function Profile({ data }: { data: any }) {
 
 	const embedProfile = data.profile ? JSON.parse(data.profile.content) : null;
 	const profile = embedProfile;
+	const { userFollows, follow, unfollow } = useSocial();
+
+	const [followed, setFollowed] = useState(false);
+
+
+	const followUser = (pubkey: string) => {
+		try {
+			follow(pubkey);
+
+			// // update state
+			setFollowed(true);
+		} catch (error) {
+			console.log(error);
+		}
+	};
+
+	const unfollowUser = (pubkey: string) => {
+		try {
+			unfollow(pubkey);
+
+			// // update state
+			setFollowed(false);
+		} catch (error) {
+			console.log(error);
+		}
+	};
+
+
+	useEffect(() => {
+		if (status === "success" && userFollows) {
+			if (userFollows.includes(data.pubkey)) {
+				setFollowed(true);
+			}
+		}
+	}, [status]);
 
 	if (!profile)
 		return (
@@ -46,7 +83,7 @@ export function Profile({ data }: { data: any }) {
 					</div>
 				</div>
 				<div className="inline-flex items-center gap-2">
-					<button type="button">Follow</button>
+					{!followed ? (<button type="button" onClick={() => followUser(data.pubkey)} >Follow</button>): (<button type="button" onClick={() => unfollowUser(data.pubkey)} >Unfollow</button>)}
 				</div>
 			</div>
 			<div className="mt-2">

From 6c6b94688e11ea66f213887ac8869cd4184dbd06 Mon Sep 17 00:00:00 2001
From: Michel Kansou <>
Date: Mon, 3 Jul 2023 11:22:43 +0200
Subject: [PATCH 2/2] fix: add loading to follow status

---
 src/app/trending/components/profile.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/trending/components/profile.tsx b/src/app/trending/components/profile.tsx
index cddf356c..67d02da0 100644
--- a/src/app/trending/components/profile.tsx
+++ b/src/app/trending/components/profile.tsx
@@ -19,7 +19,7 @@ export function Profile({ data }: { data: any }) {
 
 	const embedProfile = data.profile ? JSON.parse(data.profile.content) : null;
 	const profile = embedProfile;
-	const { userFollows, follow, unfollow } = useSocial();
+	const { status: socialStatus, userFollows, follow, unfollow } = useSocial();
 
 	const [followed, setFollowed] = useState(false);
 
@@ -83,7 +83,18 @@ export function Profile({ data }: { data: any }) {
 					</div>
 				</div>
 				<div className="inline-flex items-center gap-2">
-					{!followed ? (<button type="button" onClick={() => followUser(data.pubkey)} >Follow</button>): (<button type="button" onClick={() => unfollowUser(data.pubkey)} >Unfollow</button>)}
+					{socialStatus === "loading" ? (
+						<button
+							type="button"
+							className="inline-flex w-36 h-10 items-center justify-center rounded-md bg-zinc-900 hover:bg-fuchsia-500 text-sm font-medium"
+						>
+							Loading...
+						</button>
+					) : followed ? (
+					<button type="button" onClick={() => unfollowUser(data.pubkey)}>Unfollow</button>
+					) : (
+					<button type="button" onClick={() => followUser(data.pubkey)}>Follow</button>
+					)}
 				</div>
 			</div>
 			<div className="mt-2">