Follow buttons

src/element/FollowButton.js

@@ -12,9 +12,14 @@ export default function FollowButton(props) {
         publiser.broadcast(ev);
     }
 
+    async function unfollow(pubkey) {
+        let ev = await publiser.removeFollow(pubkey);
+        publiser.broadcast(ev);
+    }
+
     let isFollowing = follows?.includes(pubkey) ?? false;
     return (
-        <div className={className} onClick={() => follow(pubkey)}>
+        <div className={className} onClick={() => isFollowing ? unfollow(pubkey) : follow(pubkey)}>
             {isFollowing ? "Unfollow" : "Follow"}
         </div>
     )

src/feed/EventPublisher.js

@@ -98,14 +98,27 @@ export default function useEventPublisher() {
             ev.Tags.push(new Tag(["p", evRef.PubKey], 1));
             return await signEvent(ev, privKey);
         },
-        addFollow: async (pubkey) => {
+        addFollow: async (pkAdd) => {
             let ev = Event.ForPubKey(pubKey);
             ev.Kind = EventKind.ContactList;
             ev.Content = JSON.stringify(relays);
             for(let pk of follows) {
                 ev.Tags.push(new Tag(["p", pk]));
             }
-            ev.Tags.push(new Tag(["p", pubkey]));
+            ev.Tags.push(new Tag(["p", pkAdd]));
+
+            return await signEvent(ev, privKey);
+        },
+        removeFollow: async (pkRemove) => {
+            let ev = Event.ForPubKey(pubKey);
+            ev.Kind = EventKind.ContactList;
+            ev.Content = JSON.stringify(relays);
+            for(let pk of follows) {
+                if(pk === pkRemove) {
+                    continue;
+                }
+                ev.Tags.push(new Tag(["p", pk]));
+            }
 
             return await signEvent(ev, privKey);
         }

src/index.css

@@ -75,10 +75,8 @@ input[type="text"], input[type="password"] {
 
 .flex {
   display: flex;
-}
-
-.f-center {
   align-items: center;
+  min-width: 0;
 }
 
 .f-grow {

src/pages/EventPage.js

@@ -10,5 +10,5 @@ export default function EventPage() {
     return <Thread notes={[
         ...main,
         ...other
-    ].filter((v, i, a) => a.indexOf(b => b.id === v.id) === -1)} this={id} />;
+    ].filter((v, i, a) => a.indexOf(v) === i)} this={id} />;
 }

src/pages/ProfilePage.js

@@ -15,6 +15,7 @@ import Note from "../element/Note";
 import QRCodeStyling from "qr-code-styling";
 import Modal from "../element/Modal";
 import { logout } from "../state/Login";
+import FollowButton from "../element/FollowButton";
 
 export default function ProfilePage() {
     const dispatch = useDispatch();
@@ -66,7 +67,7 @@ export default function ProfilePage() {
     useMemo(() => {
         if (qrRef.current && showLnQr) {
             let qr = new QRCodeStyling({
-                data: {lud16},
+                data: { lud16 },
                 type: "canvas"
             });
             qrRef.current.innerHTML = "";
@@ -98,7 +99,7 @@ export default function ProfilePage() {
             elm.click();
         });
     }
-    
+
     async function setNewAvatar() {
         let file = await openFile();
         console.log(file);
@@ -153,10 +154,16 @@ export default function ProfilePage() {
     function details() {
         return (
             <>
-                <h2>{name}</h2>
+                <div className="flex">
+                    <h2 className="f-grow">{name}</h2>
+                    <div>
+                        <FollowButton pubkey={id} />
+                    </div>
+                </div>
                 <p>{about}</p>
                 {website ? <a href={website} target="_blank" rel="noreferrer">{website}</a> : null}
-                {lud16 ? <div className="flex f-center">
+
+                {lud16 ? <div className="flex">
                     <div className="btn" onClick={(e) => setShowLnQr(true)}>
                         <FontAwesomeIcon icon={faQrcode} size="xl" />
                     </div>