refacto (#13)

apps/website/package.json

@@ -19,10 +19,11 @@
     "next": "^14.2.3",
     "nostr-tools": "^2.7.0",
     "qs": "^6.12.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "starknet": "6.9.0",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "afk_nostr_sdk":"workspace:*",
+    "@nostr-dev-kit/ndk": "^2.8.2"
+
   },
   "devDependencies": {
     "@types/node": "^20",

apps/website/src/app/_app.tsx

@@ -0,0 +1,19 @@
+import './index.css';
+import type { Metadata } from 'next';
+import Providers from './providers';
+
+export const metadata: Metadata = {
+  title: 'afk community portal',
+  description: 'afk community portal',
+};
+import { AppProps } from 'next/app';
+
+function MyApp({ Component, pageProps }: AppProps) {
+    return (
+        <Providers>
+            <Component {...pageProps} />
+        </Providers>
+    );
+}
+
+export default MyApp;

apps/website/src/app/app/page.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { ContributeSection } from '../components/landing/ContributeSection';
+import { Footer } from '../components/Footer';
+import { Navbar } from '../components/Navbar';
+import { useRootNotes } from 'afk_nostr_sdk/hooks/useRootNotes';
+// import { NDKEvent } from 'afk_nostr_sdk';
+
+import Providers from '../providers';
+import NDK, { NDKEvent, NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
+import { AFK_RELAYS } from 'afk_nostr_sdk/utils/relay';
+import { useEffect } from 'react';
+import { useNostrContext } from 'afk_nostr_sdk/context/NostrContext';
+import { useSearch, useSearchNotes } from 'afk_nostr_sdk/hooks';
+import { useState } from 'react';
+
+export default function AppHomepage() {
+
+  const nostr = useNostrContext()
+
+  const [events, setEvents] = useState<NDKEvent[]>([])
+  const [isInitDone, setIsInitDone] = useState<boolean>(false)
+
+  useEffect(() => {
+
+    if (!isInitDone) {
+      fetch()
+      setIsInitDone(true)
+    }
+
+  })
+  const fetch = async () => {
+    const filter: NDKFilter = {
+      kinds: [NDKKind.Text, NDKKind.ChannelMetadata, NDKKind.Metadata],
+
+    };
+    let events_package = await nostr?.ndk?.fetchEvents(filter)
+    // console.log("events_package", events_package)
+    setEvents([
+      ...events_package,
+      ...eventsSearch?.data?.pages
+    ])
+  }
+
+  const eventsSearch = useSearchNotes({
+    kinds: [
+      NDKKind.Text, 
+      // NDKKind.ChannelMetadata
+    ]
+
+  });
+  // const events = useRootNotes();
+  console.log("events hooks", eventsSearch?.data?.pages)
+  return (
+    // <Providers>
+    <div className="min-h-screen w-full relative bg-black text-white">
+      <Navbar />
+
+
+      <button onClick={() => fetch()}>Reload</button>
+
+
+      <div className='md:grid-cols-2'>
+        {events?.length > 0 && events.map((e: NDKEvent, i) => {
+          // console.log("e", e)
+          return (
+            <div className='text-white'>
+              <p>{e?.id}</p>
+              <p>{e?.content}</p>
+              <p>{e?.created_at}</p>
+
+              <a href="#" className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+
+                <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+                <p className="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+              </a>
+
+            </div>
+          )
+        })}
+      </div>
+
+      <div className='md:grid-cols-2'>
+        {eventsSearch?.data?.pages?.map((e: NDKEvent) => {
+          console.log("e", e)
+          return (
+            <div  key={e?.id} className='text-white'>
+              <p>{e?.id}</p>
+
+              <a href="#" className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+
+                <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+                <p className="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+              </a>
+
+            </div>
+          )
+        })}
+      </div>
+
+
+
+
+      <Footer />
+    </div>
+    // </Providers>
+
+  );
+}

apps/website/src/app/components/NavigationLinks.tsx

@@ -7,6 +7,9 @@ export function NavigationLinks() {
       <li>
         <Link href="/features">Features </Link>
       </li>
+      {/* <li>
+        <Link href="/app">App </Link>
+      </li> */}
       {/* <li>Ecosystem</li> */}
       {/* <li>Developers</li> */}
     </ul>

apps/website/src/app/components/AboutUs.tsx → apps/website/src/app/components/landing/AboutUs.tsx

@@ -1,7 +1,7 @@
 import {motion} from 'framer-motion';
 
-import {Footer} from './Footer';
-import {Navbar} from './Navbar';
+import {Footer} from '../Footer';
+import {Navbar} from '../Navbar';
 
 const AboutUs: React.FC = () => {
   return (

apps/website/src/app/components/Faq.tsx → apps/website/src/app/components/landing/Faq.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {FaqBar} from './FaqBar';
+import {FaqBar} from '../FaqBar';
 
 export function Faq() {
   return (

apps/website/src/app/features/page.tsx

@@ -1,4 +1,4 @@
-import {ContributeSection} from '../components/ContributeSection';
+import {ContributeSection} from '../components/landing/ContributeSection';
 import {DescriptionFeatures} from '../components/features/DescriptionFeatures';
 import {Footer} from '../components/Footer';
 import {Navbar} from '../components/Navbar';

apps/website/src/app/layout.tsx

@@ -1,16 +1,19 @@
 import './index.css';
 
-import type {Metadata} from 'next';
+import type { Metadata } from 'next';
+import Providers from './providers';
 
 export const metadata: Metadata = {
   title: 'afk community portal',
   description: 'afk community portal',
 };
 
-export default function RootLayout({children}: {children: React.ReactNode}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <Providers>
+        <body>{children}</body>
+      </Providers>
     </html>
   );
 }

apps/website/src/app/page.tsx

@@ -1,10 +1,10 @@
-import {About} from './components/About';
-import {ContributeSection} from './components/ContributeSection';
-import {DescriptionSection} from './components/DescriptionSection';
-import {DownloadSection} from './components/DownloadSection';
-import {Faq} from './components/Faq';
+import {About} from './components/landing/About';
+import {ContributeSection} from './components/landing/ContributeSection';
+import {DescriptionSection} from './components/landing/DescriptionSection';
+import {DownloadSection} from './components/landing/DownloadSection';
+import {Faq} from './components/landing/Faq';
 import {Footer} from './components/Footer';
-import {HeroSection} from './components/HeroSection';
+import {HeroSection} from './components/landing/HeroSection';
 import {Navbar} from './components/Navbar';
 
 export default function App() {

apps/website/src/app/providers.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { NostrProvider } from 'afk_nostr_sdk/context/NostrContext';
+import { TanstackProvider } from 'afk_nostr_sdk/context/TanstackProvider';
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <NostrProvider>
+      <TanstackProvider>
+        {children}
+      </TanstackProvider>
+    </NostrProvider>
+  );
+}

apps/website/tsconfig.json

@@ -1,18 +1,19 @@
 {
   "compilerOptions": {
+    "target": "ESNext",
     "lib": [
       "dom",
       "dom.iterable",
       "esnext"
     ],
+    "module": "ES6",
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "esModuleInterop": true,
-    "module": "esnext",
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,

packages/afk_nostr_sdk/.eslintrc.cjs

@@ -0,0 +1,20 @@
+require('@uniswap/eslint-config/load');
+
+module.exports = {
+  extends: ['next/core-web-vitals', '@uniswap/eslint-config/node'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+      rules: {
+        'import/no-unused-modules': 'off',
+
+        'prettier/prettier': [
+          'error',
+          {
+            endOfLine: 'auto',
+          },
+        ],
+      },
+    },
+  ],
+};

packages/afk_nostr_sdk/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "semi": true,
+  "endOfLine": "lf"
+}

packages/nostr_sdk/context/NostrContext.tsx → packages/afk_nostr_sdk/context/NostrContext.tsx

@@ -1,6 +1,5 @@
 import NDK, {NDKPrivateKeySigner} from '@nostr-dev-kit/ndk';
 import {createContext, useContext, useEffect, useState} from 'react';
-
 import { useAuth } from '../store/auth';
 import {AFK_RELAYS} from "../utils/relay"
 export type NostrContextType = {

packages/afk_nostr_sdk/context/TanstackProvider.tsx

@@ -0,0 +1,14 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { PropsWithChildren } from "react";
+
+const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: 2 } },
+});
+
+export const TanstackProvider: React.FC<PropsWithChildren> = ({ children }) => {
+    return (
+        <QueryClientProvider client={queryClient}>
+            {children}
+        </QueryClientProvider>
+    )
+}

packages/afk_nostr_sdk/hooks/channel/useChannels.ts

@@ -0,0 +1,40 @@
+import {NDKKind} from '@nostr-dev-kit/ndk';
+import {useInfiniteQuery} from '@tanstack/react-query';
+
+import {useNostrContext} from '../../context/NostrContext';
+
+export type UseRootNotesOptions = {
+  authors?: string[];
+  search?: string;
+};
+
+export const useChannels = (options?: UseRootNotesOptions) => {
+  const {ndk} = useNostrContext();
+
+  return useInfiniteQuery({
+    initialPageParam: 0,
+    queryKey: ['channels', options?.authors, options?.search, ndk],
+    getNextPageParam: (lastPage: any, allPages, lastPageParam) => {
+      if (!lastPage?.length) return undefined;
+
+      const pageParam = lastPage[lastPage.length - 1].created_at - 1;
+
+      if (!pageParam || pageParam === lastPageParam) return undefined;
+      return pageParam;
+    },
+    queryFn: async ({pageParam}) => {
+      const notes = await ndk.fetchEvents({
+        kinds: [NDKKind.ChannelCreation],
+        authors: options?.authors,
+        search: options?.search,
+        until: pageParam || Math.round(Date.now() / 1000),
+        limit: 20,
+      });
+
+      console.log('notes', notes);
+
+      return [...notes].filter((note) => note.tags.every((tag) => tag[0] !== 'e'));
+    },
+    placeholderData: {pages: [], pageParams: []},
+  });
+};

packages/afk_nostr_sdk/hooks/channel/useCreateChannel.ts

@@ -0,0 +1,35 @@
+import {NDKEvent, NDKKind} from '@nostr-dev-kit/ndk';
+import {useMutation} from '@tanstack/react-query';
+
+import {useAuth} from '../../store/auth';
+
+import {useNostrContext} from '../../context/NostrContext';
+
+export const useCreateChannel = () => {
+  const {ndk} = useNostrContext();
+  const {publicKey} = useAuth();
+
+  return useMutation({
+    mutationKey: ['createChannel', ndk],
+    mutationFn: async (data: {content: string; channel_name: string; tags?: string[][]}) => {
+      try {
+        const user = ndk.getUser({pubkey: publicKey});
+
+        // if (!user.profile) {
+        //   throw new Error('Profile not found');
+        // }
+        const event = new NDKEvent(ndk);
+        event.kind = NDKKind.ChannelCreation;
+        event.content = data.content;
+        event.author = user;
+        event.tags = data.tags ?? [];
+        await event.publish();
+
+        return event;
+      } catch (error) {
+        console.error('Error create channel', error);
+        throw error;
+      }
+    },
+  });
+};