added unfollow

app/(app)/(profile)/[npub]/_components/FollowButton.tsx

@@ -9,11 +9,10 @@ import { NDKUser } from "@nostr-dev-kit/ndk";
 
 type FollowButtonProps = {
   pubkey: string;
-  follows: Set<NDKUser>;
 };
 
-export default function FollowButton({ pubkey, follows }: FollowButtonProps) {
-  const { currentUser } = useCurrentUser();
+export default function FollowButton({ pubkey }: FollowButtonProps) {
+  const { currentUser, follows, addFollow, setFollows } = useCurrentUser();
   const { ndk } = useNDK();
   const [loading, setLoading] = useState(false);
 
@@ -22,13 +21,27 @@ export default function FollowButton({ pubkey, follows }: FollowButtonProps) {
     setLoading(true);
     try {
       await follow(ndk, currentUser, pubkey);
-      toast.success("Payment Sent!");
+      addFollow(new NDKUser({ hexpubkey: pubkey }));
+      toast.success("Following!");
     } catch (err) {
       console.log("Error", err);
     }
     setLoading(false);
   }
-  if (Array.from(follows).find((i) => i.pubkey === pubkey)) {
+  async function handleUnfollow() {
+    if (!ndk || !currentUser) return;
+    setLoading(true);
+    try {
+      await follow(ndk, currentUser, pubkey, true);
+      const newFollows = Array.from(follows).filter((i) => i.pubkey !== pubkey);
+      setFollows(new Set(newFollows));
+      toast.success("Unfollowed!");
+    } catch (err) {
+      console.log("Error", err);
+    }
+    setLoading(false);
+  }
+  if (!Array.from(follows).find((i) => i.pubkey === pubkey)) {
     return (
       <Button
         onClick={handleFollow}
@@ -39,6 +52,16 @@ export default function FollowButton({ pubkey, follows }: FollowButtonProps) {
         Follow
       </Button>
     );
+  } else {
+    return (
+      <Button
+        onClick={handleUnfollow}
+        loading={loading}
+        variant={"outline"}
+        className="rounded-sm px-5 max-sm:h-8 max-sm:text-xs"
+      >
+        Unfollow
+      </Button>
+    );
   }
-  return null;
 }

app/(app)/(profile)/[npub]/page.tsx

@@ -107,7 +107,7 @@ export default function ProfilePage({
                 Edit
               </Button>
             )}
-            {currentUser && <FollowButton pubkey={pubkey} follows={follows} />}
+            {currentUser && <FollowButton pubkey={pubkey} />}
           </div>
         </div>
         <div className="mx-auto max-w-[800px] space-y-1 px-4">

lib/actions/create.ts

@@ -281,16 +281,29 @@ export async function unlockEvent(
   return publishedEvent;
 }
 
-export async function follow(ndk: NDK, currentUser: NDKUser, pubkey: string) {
+export async function follow(
+  ndk: NDK,
+  currentUser: NDKUser,
+  pubkey: string,
+  unfollow?: boolean,
+) {
   const userContacts = await ndk.fetchEvent({
     kinds: [3],
     authors: [currentUser.pubkey],
   });
   if (!userContacts) return;
+  let newTags = userContacts.tags;
+  if (unfollow) {
+    newTags = newTags.filter(([t, k]) =>
+      t === "p" && k === pubkey ? false : true,
+    );
+  } else {
+    newTags.push(["p", pubkey]);
+  }
   const newEvent = {
     kind: 3,
     ...userContacts.rawEvent(),
-    tags: [...userContacts.tags, ["p", pubkey]],
+    tags: newTags,
   };
   const newContacts = await createEvent(ndk, newEvent);
   return newContacts;

lib/hooks/useCurrentUser.ts

@@ -15,6 +15,7 @@ export default function useCurrentUser() {
     updateCurrentUser,
     follows,
     setFollows,
+    addFollow,
   } = currentUserStore();
   const { loginWithNip07, getProfile, ndk, fetchEvents } = useNDK();
   const { init } = useLists();
@@ -90,5 +91,7 @@ export default function useCurrentUser() {
     attemptLogin,
     initSubscriptions,
     mySubscription,
+    addFollow,
+    setFollows,
   };
 }

lib/stores/currentUser.ts

@@ -10,6 +10,7 @@ interface CurrentUserState {
   setCurrentUser: (user: NDKUser | null) => void;
   updateCurrentUser: (user: Partial<NDKUser>) => void;
   setFollows: (follows: Set<NDKUser>) => void;
+  addFollow: (follow: NDKUser) => void;
 }
 
 const currentUserStore = create<CurrentUserState>()((set) => ({
@@ -23,6 +24,8 @@ const currentUserStore = create<CurrentUserState>()((set) => ({
       currentUser: { ...state.currentUser, ...user } as NDKUser,
     })),
   setFollows: (follows) => set((state) => ({ ...state, follows: follows })),
+  addFollow: (follow) =>
+    set((state) => ({ ...state, follows: new Set(state.follows).add(follow) })),
 }));
 
 export default currentUserStore;