wip: migrated to nostr-relaypool

src/pages/_app.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import RelayProvider from '@stores/context';
 import { relays } from '@stores/relays';
 
 import { useStore } from '@nanostores/react';
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
-import { NostrProvider } from 'nostr-react';
-import type { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import '../App.css';
 
@@ -21,12 +21,8 @@ type AppPropsWithLayout = AppProps & {
 export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => page);
-  // Get relays
+  // Get all relays
   const $relays = useStore(relays);
 
-  return (
-    <NostrProvider relayUrls={$relays} debug={false}>
-      {getLayout(<Component {...pageProps} />)}
-    </NostrProvider>
-  );
+  return <RelayProvider relays={$relays}>{getLayout(<Component {...pageProps} />)}</RelayProvider>;
 }

src/pages/feed/following.tsx

@@ -1,54 +1,59 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import BaseLayout from '@layouts/baseLayout';
 import NewsFeedLayout from '@layouts/newsfeedLayout';
 
-import { Placeholder } from '@components/note/placeholder';
-import { Thread } from '@components/thread';
-
 import { hoursAgo } from '@utils/getDate';
 
+import { RelayContext } from '@stores/context';
 import { follows } from '@stores/follows';
+import { relays } from '@stores/relays';
 
 import { useStore } from '@nanostores/react';
-import { dateToUnix, useNostrEvents } from 'nostr-react';
-import {
-  JSXElementConstructor,
-  ReactElement,
-  ReactFragment,
-  ReactPortal,
-  Suspense,
-  useRef,
-} from 'react';
+import { dateToUnix } from 'nostr-react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef, useState } from 'react';
 
 export default function Page() {
-  const $follows = useStore(follows);
+  const relayPool: any = useContext(RelayContext);
+
+  const [data, setData] = useState([]);
   const now = useRef(new Date());
 
-  const { events } = useNostrEvents({
-    filter: {
-      authors: $follows,
-      since: dateToUnix(hoursAgo(6, now.current)),
-      kinds: [1],
-      limit: 100,
-    },
-  });
+  const $follows = useStore(follows);
+  const $relays = useStore(relays);
+
+  useEffect(() => {
+    const unsub = relayPool.subscribe(
+      [
+        {
+          kinds: [1],
+          authors: $follows,
+          since: dateToUnix(hoursAgo(12, now.current)),
+        },
+      ],
+      $relays,
+      (event: any) => {
+        setData((data) => [event, ...data]);
+      },
+      undefined,
+      (events: any, relayURL: any) => {
+        console.log(events, relayURL);
+      }
+    );
+
+    return () => unsub();
+  }, [$follows, $relays, relayPool]);
 
   return (
     <div className="h-full w-full">
-      <Suspense fallback={<Placeholder />}>
-        <Thread data={events} />
-      </Suspense>
+      {data.map((item, index) => (
+        <p key={index}>{item.id}</p>
+      ))}
     </div>
   );
 }
 
 Page.getLayout = function getLayout(
-  page:
-    | string
-    | number
-    | boolean
-    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
-    | ReactFragment
-    | ReactPortal
+  page: string | number | boolean | ReactElement<unknown, string | JSXElementConstructor<unknown>> | ReactFragment | ReactPortal
 ) {
   return (
     <BaseLayout>

src/pages/index.tsx

@@ -40,7 +40,7 @@ export default function Page() {
     return result;
   }, []);
 
-  const getFollows = useCallback(async (account) => {
+  const getFollows = useCallback(async (account: { id: string }) => {
     const arr = [];
     const result: any = await db.select(`SELECT pubkey FROM follows WHERE account = "${account.id}"`);
 
@@ -82,7 +82,7 @@ export default function Page() {
         })
         .catch(console.error);
     });
-  }, [getAccount, getFollows, requestNotification, router]);
+  }, [requestNotification, getAccount, getFollows, router]);
 
   return (
     <div className="relative flex h-full flex-col items-center justify-between">