use route group

2023-04-17 16:36:27 +07:00
parent 59667f2977
commit 2b0a4e2402
21 changed files with 12 additions and 127 deletions
@@ -0,0 +1,77 @@
+'use client';
+
+import { ChannelMessages } from '@components/channels/messages/index';
+import FormChannelMessage from '@components/form/channelMessage';
+import { RelayContext } from '@components/relaysProvider';
+
+import { channelMessagesAtom, channelReplyAtom } from '@stores/channel';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { useSetAtom } from 'jotai';
+import { useResetAtom } from 'jotai/utils';
+import { Suspense, useContext, useEffect, useRef } from 'react';
+
+export default function Page({ params }: { params: { id: string } }) {
+  const [pool, relays]: any = useContext(RelayContext);
+  const [activeAccount]: any = useLocalStorage('activeAccount', {});
+
+  const setChannelMessages = useSetAtom(channelMessagesAtom);
+  const resetChannelMessages = useResetAtom(channelMessagesAtom);
+  const resetChannelReply = useResetAtom(channelReplyAtom);
+
+  const muted = useRef(new Set());
+  const hided = useRef(new Set());
+
+  useEffect(() => {
+    // reset channel reply
+    resetChannelReply();
+    // reset channel messages
+    resetChannelMessages();
+    // subscribe event
+    const unsubscribe = pool.subscribe(
+      [
+        {
+          authors: [activeAccount.pubkey],
+          kinds: [43, 44],
+          since: 0,
+        },
+        {
+          '#e': [params.id],
+          kinds: [42],
+          since: 0,
+        },
+      ],
+      relays,
+      (event: any) => {
+        if (event.kind === 44) {
+          muted.current = muted.current.add(event.tags[0][1]);
+        } else if (event.kind === 43) {
+          hided.current = hided.current.add(event.tags[0][1]);
+        } else {
+          if (muted.current.has(event.pubkey)) {
+            console.log('muted');
+          } else if (hided.current.has(event.id)) {
+            console.log('hided');
+          } else {
+            setChannelMessages((messages) => [event, ...messages]);
+          }
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [pool, relays, activeAccount.pubkey, params.id, setChannelMessages, resetChannelReply, resetChannelMessages]);
+
+  return (
+    <div className="flex h-full w-full flex-col justify-between">
+      <Suspense fallback={<>Loading...</>}>
+        <ChannelMessages />
+      </Suspense>
+      <div className="shrink-0 p-3">
+        <FormChannelMessage eventId={params.id} />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,28 @@
+'use client';
+
+import { BrowseChannelItem } from '@components/channels/browseChannelItem';
+
+import { useEffect, useState } from 'react';
+
+export default function Page() {
+  const [list, setList] = useState([]);
+
+  useEffect(() => {
+    const fetchChannels = async () => {
+      const { getChannels } = await import('@utils/bindings');
+      return await getChannels({ limit: 100, offset: 0 });
+    };
+
+    fetchChannels()
+      .then((res) => setList(res))
+      .catch(console.error);
+  }, []);
+
+  return (
+    <div className="h-full w-full overflow-y-auto">
+      {list.map((channel) => (
+        <BrowseChannelItem key={channel.id} data={channel} />
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,67 @@
+'use client';
+
+import { MessageList } from '@components/chats/messageList';
+import FormChat from '@components/form/chat';
+import { RelayContext } from '@components/relaysProvider';
+
+import { chatMessagesAtom } from '@stores/chat';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { useSetAtom } from 'jotai';
+import { useResetAtom } from 'jotai/utils';
+import { Suspense, useCallback, useContext, useEffect, useRef } from 'react';
+
+export default function Page({ params }: { params: { pubkey: string } }) {
+  const [pool, relays]: any = useContext(RelayContext);
+  const [activeAccount]: any = useLocalStorage('activeAccount', {});
+
+  const setChatMessages = useSetAtom(chatMessagesAtom);
+  const resetChatMessages = useResetAtom(chatMessagesAtom);
+
+  const unsubscribe = useRef(null);
+
+  const fetchMessages = useCallback(() => {
+    unsubscribe.current = pool.subscribe(
+      [
+        {
+          kinds: [4],
+          authors: [params.pubkey],
+          '#p': [activeAccount.pubkey],
+        },
+        {
+          kinds: [4],
+          authors: [activeAccount.pubkey],
+          '#p': [params.pubkey],
+        },
+      ],
+      relays,
+      (event: any) => {
+        setChatMessages((data) => [...data, event]);
+      }
+    );
+  }, [activeAccount.pubkey, params.pubkey, pool, relays, setChatMessages]);
+
+  useEffect(() => {
+    // reset stored messages
+    resetChatMessages();
+    // fetch messages from relays
+    fetchMessages();
+
+    return () => {
+      if (unsubscribe.current) {
+        unsubscribe.current();
+      }
+    };
+  }, [fetchMessages, resetChatMessages]);
+
+  return (
+    <div className="flex h-full w-full flex-col justify-between">
+      <Suspense fallback={<>Loading...</>}>
+        <MessageList />
+      </Suspense>
+      <div className="shrink-0 p-3">
+        <FormChat receiverPubkey={params.pubkey} />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <></>;
+}
@@ -0,0 +1,39 @@
+import AppHeader from '@components/appHeader';
+import MultiAccounts from '@components/multiAccounts';
+import Navigation from '@components/navigation';
+
+export default function NostrLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
+      <div className="flex h-screen w-full flex-col">
+        <div
+          data-tauri-drag-region
+          className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
+        >
+          <AppHeader collector={true} />
+        </div>
+        <div className="relative flex min-h-0 w-full flex-1">
+          <div className="relative w-[68px] shrink-0 border-r border-zinc-900">
+            <MultiAccounts />
+          </div>
+          <div className="grid w-full grid-cols-4 xl:grid-cols-5">
+            <div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
+              <Navigation />
+            </div>
+            <div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:mr-1.5">
+              <div className="h-full w-full rounded-lg">{children}</div>
+            </div>
+            <div className="col-span-3 m-3 hidden overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:ml-1.5 xl:flex">
+              <div className="flex h-full w-full items-center justify-center">
+                <p className="select-text p-8 text-center text-zinc-400">
+                  This feature hasn&apos;t implemented yet, so resize Lume to the initial size for a better experience.
+                  I&apos;m sorry for this inconvenience, and I swear I will add it soon 😁
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,5 @@
+'use client';
+
+export default function Page({ params }: { params: { id: string } }) {
+  return <div className="scrollbar-hide flex h-full flex-col gap-2 overflow-y-auto py-3">{params.id}</div>;
+}
@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <p className="text-sm text-zinc-400">Sorry, this feature under development, it will come in the next version</p>
+    </div>
+  );
+}
@@ -0,0 +1,121 @@
+'use client';
+
+import FormBase from '@components/form/base';
+import { NoteBase } from '@components/note/base';
+import { Placeholder } from '@components/note/placeholder';
+import { NoteQuoteRepost } from '@components/note/quoteRepost';
+
+import { filteredNotesAtom, hasNewerNoteAtom, notesAtom } from '@stores/note';
+
+import { dateToUnix } from '@utils/getDate';
+
+import { ArrowUp } from 'iconoir-react';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useCallback, useEffect, useRef } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+
+export default function Page() {
+  const [hasNewerNote, setHasNewerNote] = useAtom(hasNewerNoteAtom);
+  const setData = useSetAtom(notesAtom);
+  const data = useAtomValue(filteredNotesAtom);
+
+  const virtuosoRef = useRef(null);
+  const now = useRef(new Date());
+  const limit = useRef(20);
+  const offset = useRef(0);
+
+  const itemContent: any = useCallback(
+    (index: string | number) => {
+      switch (data[index].kind) {
+        case 1:
+          return <NoteBase event={data[index]} />;
+        case 6:
+          return <NoteQuoteRepost event={data[index]} />;
+        default:
+          break;
+      }
+    },
+    [data]
+  );
+
+  const computeItemKey = useCallback(
+    (index: string | number) => {
+      return data[index].eventId;
+    },
+    [data]
+  );
+
+  const initialData = useCallback(async () => {
+    const { getNotes } = await import('@utils/bindings');
+    const result: any = await getNotes({
+      date: dateToUnix(now.current),
+      limit: limit.current,
+      offset: offset.current,
+    });
+    setData((data) => [...data, ...result]);
+  }, [setData]);
+
+  const loadMore = useCallback(async () => {
+    const { getNotes } = await import('@utils/bindings');
+    offset.current += limit.current;
+    // next query
+    const result: any = await getNotes({
+      date: dateToUnix(now.current),
+      limit: limit.current,
+      offset: offset.current,
+    });
+    setData((data) => [...data, ...result]);
+  }, [setData]);
+
+  const loadLatest = useCallback(async () => {
+    const { getLatestNotes } = await import('@utils/bindings');
+    // next query
+    const result: any = await getLatestNotes({ date: dateToUnix(now.current) });
+    // update data
+    if (Array.isArray(result)) {
+      setData((data) => [...result, ...data]);
+    } else {
+      setData((data) => [result, ...data]);
+    }
+    // hide newer trigger
+    setHasNewerNote(false);
+    // scroll to top
+    virtuosoRef.current.scrollToIndex({ index: -1 });
+  }, [setData, setHasNewerNote]);
+
+  useEffect(() => {
+    initialData().catch(console.error);
+  }, [initialData]);
+
+  return (
+    <div className="relative h-full w-full">
+      {hasNewerNote && (
+        <div className="absolute left-1/2 top-2 z-50 -translate-x-1/2 transform">
+          <button
+            onClick={() => loadLatest()}
+            className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 pl-3 pr-3.5 text-sm shadow-md shadow-fuchsia-800/20 active:translate-y-1"
+          >
+            <ArrowUp width={14} height={14} />
+            Load latest
+          </button>
+        </div>
+      )}
+      <Virtuoso
+        ref={virtuosoRef}
+        data={data}
+        itemContent={itemContent}
+        computeItemKey={computeItemKey}
+        components={COMPONENTS}
+        overscan={200}
+        endReached={loadMore}
+        className="scrollbar-hide h-full w-full overflow-y-auto"
+      />
+    </div>
+  );
+}
+
+const COMPONENTS = {
+  Header: () => <FormBase />,
+  EmptyPlaceholder: () => <Placeholder />,
+  ScrollSeekPlaceholder: () => <Placeholder />,
+};
@@ -0,0 +1,47 @@
+'use client';
+
+import ProfileFollowers from '@components/profile/followers';
+import ProfileFollows from '@components/profile/follows';
+import ProfileMetadata from '@components/profile/metadata';
+import ProfileNotes from '@components/profile/notes';
+
+import * as Tabs from '@radix-ui/react-tabs';
+
+export default function Page({ params }: { params: { id: string } }) {
+  return (
+    <div className="scrollbar-hide h-full w-full overflow-y-auto">
+      <ProfileMetadata id={params.id} />
+      <Tabs.Root className="flex w-full flex-col" defaultValue="notes">
+        <Tabs.List className="flex border-b border-zinc-800">
+          <Tabs.Trigger
+            className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium leading-none text-zinc-400 outline-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
+            value="notes"
+          >
+            Notes
+          </Tabs.Trigger>
+          <Tabs.Trigger
+            className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium text-zinc-400 outline-none placeholder:leading-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
+            value="followers"
+          >
+            Followers
+          </Tabs.Trigger>
+          <Tabs.Trigger
+            className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium leading-none text-zinc-400 outline-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
+            value="following"
+          >
+            Following
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="notes">
+          <ProfileNotes id={params.id} />
+        </Tabs.Content>
+        <Tabs.Content value="followers">
+          <ProfileFollowers id={params.id} />
+        </Tabs.Content>
+        <Tabs.Content value="following">
+          <ProfileFollows id={params.id} />
+        </Tabs.Content>
+      </Tabs.Root>
+    </div>
+  );
+}