move channel list logic to atom

src/components/appHeader/actions.tsx

@@ -14,7 +14,7 @@ export default function AppActions() {
   };
 
   return (
-    <div className={`pl-[68px]} flex h-full items-center gap-2`}>
+    <div className={`flex h-full items-center gap-2 pl-[68px]`}>
       <button
         onClick={() => goBack()}
         className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"

src/components/channels/channelList.tsx

@@ -1,12 +1,16 @@
 import { ChannelListItem } from '@components/channels/channelListItem';
 import { CreateChannelModal } from '@components/channels/createChannelModal';
 
-import { DEFAULT_CHANNELS } from '@stores/constants';
+import { channelsAtom } from '@stores/channel';
+
+import { useAtomValue } from 'jotai';
 
 export default function ChannelList() {
+  const list = useAtomValue(channelsAtom);
+
   return (
     <div className="flex flex-col gap-px">
-      {DEFAULT_CHANNELS.map((item) => (
+      {list.map((item: { event_id: string }) => (
         <ChannelListItem key={item.event_id} data={item} />
       ))}
       <CreateChannelModal />

src/components/channels/createChannelModal.tsx

@@ -1,5 +1,6 @@
 import { RelayContext } from '@components/relaysProvider';
 
+import { defaultChannelsAtom } from '@stores/channel';
 import { FULL_RELAYS } from '@stores/constants';
 
 import { dateToUnix } from '@utils/getDate';
@@ -8,6 +9,7 @@ import { createChannel } from '@utils/storage';
 import * as Dialog from '@radix-ui/react-dialog';
 import useLocalStorage from '@rehooks/local-storage';
 import { Cancel, Plus } from 'iconoir-react';
+import { useSetAtom } from 'jotai';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -16,6 +18,7 @@ export const CreateChannelModal = () => {
   const [pool]: any = useContext(RelayContext);
   const [open, setOpen] = useState(false);
   const [activeAccount]: any = useLocalStorage('account', {});
+  const setChannel = useSetAtom(defaultChannelsAtom);
 
   const {
     register,
@@ -39,6 +42,15 @@ export const CreateChannelModal = () => {
     pool.publish(event, FULL_RELAYS);
     // insert to database
     createChannel(event.id, event.content, event.created_at);
+    // update jotai state
+    setChannel((prev: any) => [
+      ...prev,
+      {
+        event_id: event.id,
+        metadata: { name: data.name, picture: data.picture, about: data.about },
+        created_at: event.created_at,
+      },
+    ]);
     // close modal
     setOpen(false);
     // reset form

src/components/navigation/channels.tsx

@@ -2,7 +2,8 @@ import ChannelList from '@components/channels/channelList';
 
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { NavArrowUp } from 'iconoir-react';
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
+import Skeleton from 'react-loading-skeleton';
 
 export default function Channels() {
   const [open, setOpen] = useState(true);
@@ -21,7 +22,9 @@ export default function Channels() {
           <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Channels</h3>
         </Collapsible.Trigger>
         <Collapsible.Content>
-          <ChannelList />
+          <Suspense fallback={<Skeleton />}>
+            <ChannelList />
+          </Suspense>
         </Collapsible.Content>
       </div>
     </Collapsible.Root>

src/pages/channel/index.page.client.tsx

@@ -70,18 +70,10 @@ export function Page() {
   });
 
   useEffect(() => {
-    let ignore = false;
-
-    if (!ignore) {
-      // reset channel reply
-      resetChannelReply();
-      // reset channel messages
-      resetChannelMessages();
-    }
-
-    return () => {
-      ignore = true;
-    };
+    // reset channel reply
+    resetChannelReply();
+    // reset channel messages
+    resetChannelMessages();
   }, [resetChannelReply, resetChannelMessages]);
 
   return (

src/stores/channel.tsx

@@ -1,8 +1,19 @@
+import { DEFAULT_CHANNELS } from '@stores/constants';
+
 import { atom } from 'jotai';
 import { atomWithReset } from 'jotai/utils';
 
+// channel list
+export const defaultChannelsAtom = atom(DEFAULT_CHANNELS);
+export const channelsAtom = atom(async (get) => {
+  const { getChannels } = await import('@utils/storage');
+  const result: any = await getChannels(100, 0);
+  return get(defaultChannelsAtom).concat(result);
+});
+
 // channel reply id
 export const channelReplyAtom = atomWithReset({ id: null, pubkey: null, content: null });
+
 // channel messages
 export const channelMessagesAtom = atomWithReset([]);
 export const sortedChannelMessagesAtom = atom((get) => {