Merge pull request 'fix: don't reset follow list' (#40) from uifix into main

Reviewed-on: Kieran/stream#40

src/element/follow-button.tsx

@@ -11,18 +11,21 @@ export function LoggedInFollowButton({
   loggedIn: string;
   pubkey: string;
 }) {
-  const { contacts, relays } = useFollows(loggedIn, true);
   const login = useLogin();
-  const isFollowing = contacts.find((t) => t.at(1) === pubkey);
+  const following = useFollows(loggedIn, true);
+  const { tags, relays } = following ? following : { tags: [], relays: {} }
+  const follows = tags.filter((t) => t.at(0) === "p")
+  const isFollowing = follows.find((t) => t.at(1) === pubkey);
 
   async function unfollow() {
     const pub = login?.publisher();
     if (pub) {
       const ev = await pub.generic((eb) => {
         eb.kind(EventKind.ContactList).content(JSON.stringify(relays));
-        for (const c of contacts) {
-          if (c.at(1) !== pubkey) {
-            eb.tag(c);
+        for (const t of tags) {
+          const isFollow = t.at(0) === "p" && t.at(1) === pubkey
+          if (!isFollow) {
+            eb.tag(t);
           }
         }
         return eb;
@@ -37,7 +40,7 @@ export function LoggedInFollowButton({
     if (pub) {
       const ev = await pub.generic((eb) => {
         eb.kind(EventKind.ContactList).content(JSON.stringify(relays));
-        for (const tag of contacts) {
+        for (const tag of tags) {
           eb.tag(tag);
         }
         eb.tag(["p", pubkey]);
@@ -50,6 +53,7 @@ export function LoggedInFollowButton({
 
   return (
     <AsyncButton
+      disabled={!following}
       type="button"
       className="btn btn-primary"
       onClick={isFollowing ? unfollow : follow}

src/element/live-chat.css

@@ -108,6 +108,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-wrap: wrap;
 }
 
 .top-zappers {

src/element/live-chat.tsx

@@ -17,6 +17,7 @@ import { useLiveChatFeed } from "../hooks/live-chat";
 import { Profile } from "./profile";
 import { Icon } from "./icon";
 import Spinner from "./spinner";
+import { Text } from "./text";
 import { useLogin } from "../hooks/login";
 import { formatSats } from "../number";
 import useTopZappers from "../hooks/top-zappers";
@@ -201,7 +202,11 @@ function ChatZap({ zap }: { zap: ParsedZap }) {
         <span className="zap-amount">{formatSats(zap.amount)}</span>
         sats
       </div>
-      {zap.content && <div className="zap-content">{zap.content}</div>}
+      {zap.content &&  (
+        <div className="zap-content">
+          <Text content={zap.content} tags={[]} />
+        </div>
+      )}
     </div>
   );
 }

src/hooks/follows.ts

@@ -21,8 +21,6 @@ export default function useFollows(pubkey: string, leaveOpen = false) {
     sub
   );
 
-  const contacts = (data?.tags ?? []).filter((t) => t.at(0) === "p");
   const relays = JSON.parse(data?.content ?? "{}");
-
-  return { contacts, relays };
+  return data ? { tags: data.tags, relays } : null
 }