restructured and clean up

src/components/note/modal/index.tsx

@@ -1,52 +0,0 @@
-import { RelayContext } from '@components/contexts/relay';
-import { Content } from '@components/note/content';
-import NoteReply from '@components/note/modal/noteReply';
-
-import useLocalStorage from '@rehooks/local-storage';
-import { memo, useContext, useState } from 'react';
-
-const Modal = ({ event }: { event: any }) => {
-  const relayPool: any = useContext(RelayContext);
-  const [relays]: any = useLocalStorage('relays');
-  const [events, setEvents] = useState([]);
-
-  relayPool.subscribe(
-    [
-      {
-        '#e': [event.id],
-        since: event.created_at,
-        kinds: [1],
-      },
-    ],
-    relays,
-    (event: any) => {
-      setEvents((events) => [event, ...events]);
-    },
-    undefined,
-    (events: any, relayURL: any) => {
-      console.log(events, relayURL);
-    }
-  );
-
-  return (
-    <div className="flex min-h-full items-center justify-center p-4">
-      <div className="relative h-[90vh] w-full max-w-3xl transform overflow-hidden rounded-lg text-zinc-100 shadow-modal transition-all">
-        <div className="absolute top-0 left-0 h-full w-full bg-black bg-opacity-20 backdrop-blur-lg"></div>
-        <div className="relative z-10 h-full p-4">
-          <div className="relative h-full overflow-auto rounded-lg border-[0.5px] border-white/30 bg-zinc-800 p-4 shadow-inner">
-            <div className="flex flex-col gap-4">
-              <Content data={event} />
-            </div>
-            <div className="flex flex-col gap-2 divide-y divide-zinc-700">
-              {events.map((item) => (
-                <NoteReply key={item.id} event={item} />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default memo(Modal);

src/components/note/modal/noteReply.tsx

@@ -1,9 +0,0 @@
-import { Content } from '@components/note/content';
-
-export default function NoteReply({ event }: { event: any }) {
-  return (
-    <div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-4 hover:bg-zinc-800">
-      <Content data={event} />
-    </div>
-  );
-}