FUCK!!!

src/components/note/connector.tsx

@@ -6,29 +6,28 @@ import { relaysAtom } from '@stores/relays';
 
 import { dateToUnix, hoursAgo } from '@utils/getDate';
 import { createCacheNote, getAllFollowsByID } from '@utils/storage';
+import { pubkeyArray } from '@utils/transform';
 
-import { useAtom, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { memo, useContext, useEffect, useRef, useState } from 'react';
 
 export const NoteConnector = memo(function NoteConnector() {
   const pool: any = useContext(RelayContext);
 
   const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
-  const [relays] = useAtom(relaysAtom);
+  const relays = useAtomValue(relaysAtom);
   const [activeAccount] = useAtom(activeAccountAtom);
 
   const [isOnline] = useState(true);
   const now = useRef(new Date());
 
   useEffect(() => {
-    let unsubscribe;
-
     getAllFollowsByID(activeAccount.id).then((follows) => {
-      unsubscribe = pool.subscribe(
+      pool.subscribe(
         [
           {
             kinds: [1],
-            authors: follows,
+            authors: pubkeyArray(follows),
             since: dateToUnix(hoursAgo(12, now.current)),
           },
         ],
@@ -43,10 +42,6 @@ export const NoteConnector = memo(function NoteConnector() {
         }
       );
     });
-
-    return () => {
-      unsubscribe();
-    };
   }, [activeAccount.id, pool, relays, setHasNewerNote]);
 
   return (

src/components/note/content/index.tsx

@@ -8,7 +8,7 @@ import destr from 'destr';
 import { memo, useMemo } from 'react';
 import reactStringReplace from 'react-string-replace';
 
-export const Content = memo(function Content({ data }: { data: any }) {
+export const NoteContent = memo(function NoteContent({ data }: { data: any }) {
   const content = useMemo(() => {
     let parsedContent;
     // get data tags
@@ -33,7 +33,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
         if (tags[match][0] === 'p') {
           return <UserMention key={match + i} pubkey={tags[match][1]} />;
         } else if (tags[match][0] === 'e') {
-          return <MentionNote id={tags[match][1]} />;
+          return <MentionNote key={match + i} id={tags[match][1]} />;
         }
       });
     }

src/components/note/content/metadata.tsx

@@ -4,7 +4,7 @@ import { RelayContext } from '@components/relaysProvider';
 
 import { relaysAtom } from '@stores/relays';
 
-import { useAtom } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { useContext, useEffect, useState } from 'react';
 
 export default function NoteMetadata({
@@ -19,7 +19,7 @@ export default function NoteMetadata({
   eventContent: any;
 }) {
   const pool: any = useContext(RelayContext);
-  const [relays] = useAtom(relaysAtom);
+  const relays = useAtomValue(relaysAtom);
 
   const [likes, setLikes] = useState(0);
   const [comments, setComments] = useState(0);

src/components/note/counter/comments.tsx

@@ -11,7 +11,7 @@ import CommentIcon from '@assets/icons/comment';
 
 import * as Dialog from '@radix-ui/react-dialog';
 import { SizeIcon } from '@radix-ui/react-icons';
-import { useAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { useRouter } from 'next/router';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { memo, useContext, useState } from 'react';
@@ -32,7 +32,7 @@ export const CommentsCounter = memo(function CommentsCounter({
   const router = useRouter();
   const pool: any = useContext(RelayContext);
 
-  const [relays] = useAtom(relaysAtom);
+  const relays = useAtomValue(relaysAtom);
   const [activeAccount] = useAtom(activeAccountAtom);
 
   const [open, setOpen] = useState(false);

src/components/note/counter/likes.tsx

@@ -8,7 +8,7 @@ import { dateToUnix } from '@utils/getDate';
 import LikeIcon from '@assets/icons/like';
 import LikedIcon from '@assets/icons/liked';
 
-import { useAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { memo, useContext, useEffect, useState } from 'react';
 
@@ -23,7 +23,7 @@ export const LikesCounter = memo(function LikesCounter({
 }) {
   const pool: any = useContext(RelayContext);
 
-  const [relays] = useAtom(relaysAtom);
+  const relays = useAtomValue(relaysAtom);
   const [activeAccount] = useAtom(activeAccountAtom);
 
   const [isReact, setIsReact] = useState(false);

src/components/note/form/basic.tsx

@@ -8,7 +8,7 @@ import { dateToUnix } from '@utils/getDate';
 import * as Dialog from '@radix-ui/react-dialog';
 import { SizeIcon } from '@radix-ui/react-icons';
 import * as commands from '@uiw/react-md-editor/lib/commands';
-import { useAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import dynamic from 'next/dynamic';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';
@@ -20,7 +20,7 @@ const MDEditor = dynamic(() => import('@uiw/react-md-editor').then((mod) => mod.
 export default function FormBasic() {
   const pool: any = useContext(RelayContext);
 
-  const [relays] = useAtom(relaysAtom);
+  const relays = useAtomValue(relaysAtom);
   const [activeAccount] = useAtom(activeAccountAtom);
 
   const [open, setOpen] = useState(false);

src/components/note/form/comment.tsx

@@ -6,14 +6,14 @@ import { relaysAtom } from '@stores/relays';
 
 import { dateToUnix } from '@utils/getDate';
 
-import { useAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';
 
 export default function FormComment({ eventID }: { eventID: any }) {
   const pool: any = useContext(RelayContext);
 
-  const [relays] = useAtom(relaysAtom);
+  const relays = useAtomValue(relaysAtom);
   const [activeAccount] = useAtom(activeAccountAtom);
 
   const [value, setValue] = useState('');

src/components/note/index.tsx

@@ -1,16 +1,16 @@
-import { Content } from '@components/note/content';
+import { NoteContent } from '@components/note/content';
 import { RootNote } from '@components/note/root';
 
 import destr from 'destr';
 import { useRouter } from 'next/router';
-import { memo, useMemo, useRef } from 'react';
+import { memo, useCallback, useRef } from 'react';
 
 export const Note = memo(function Note({ event }: { event: any }) {
   const router = useRouter();
   const tags = destr(event.tags);
   const rootEventID = useRef(null);
 
-  const fetchRootEvent = useMemo(() => {
+  const fetchRootEvent = useCallback(() => {
     if (tags.length > 0) {
       if (tags[0][0] === 'e' || tags[0][2] === 'root') {
         rootEventID.current = tags[0][1];
@@ -43,8 +43,8 @@ export const Note = memo(function Note({ event }: { event: any }) {
       onClick={(e) => openThread(e)}
       className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20"
     >
-      <>{fetchRootEvent}</>
-      <Content data={event} />
+      <div>{fetchRootEvent()}</div>
+      <NoteContent data={event} />
     </div>
   );
 });

src/components/note/mention.tsx

@@ -5,13 +5,13 @@ import { relaysAtom } from '@stores/relays';
 
 import { createCacheNote, getNoteByID } from '@utils/storage';
 
-import { useAtom } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
   const pool: any = useContext(RelayContext);
 
-  const [relays] = useAtom(relaysAtom);
+  const relays = useAtomValue(relaysAtom);
   const [event, setEvent] = useState(null);
 
   const fetchEvent = useCallback(() => {

src/components/note/root.tsx

@@ -1,17 +1,17 @@
-import { Content } from '@components/note/content';
+import { NoteContent } from '@components/note/content';
 import { RelayContext } from '@components/relaysProvider';
 
 import { relaysAtom } from '@stores/relays';
 
 import { createCacheNote, getNoteByID } from '@utils/storage';
 
-import { useAtom } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const RootNote = memo(function RootNote({ id }: { id: string }) {
   const pool: any = useContext(RelayContext);
 
-  const [relays] = useAtom(relaysAtom);
+  const relays = useAtomValue(relaysAtom);
   const [event, setEvent] = useState(null);
 
   const fetchEvent = useCallback(() => {
@@ -51,7 +51,7 @@ export const RootNote = memo(function RootNote({ id }: { id: string }) {
     return (
       <div className="relative pb-5">
         <div className="absolute top-0 left-[21px] h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
-        <Content data={event} />
+        <NoteContent data={event} />
       </div>
     );
   } else {