wip: migrate channel to zustand

src/app/channel/components/messageList.tsx

@@ -1,37 +1,34 @@
-import ChannelMessageItem from "@app/channel/components/messages/item";
-
-import { sortedChannelMessagesAtom } from "@stores/channel";
-
+import { ChannelMessageItem } from "@app/channel/components/messages/item";
+import { useChannelMessages } from "@stores/channels";
 import { getHourAgo } from "@utils/date";
-
-import { useAtomValue } from "jotai";
 import { useCallback, useRef } from "react";
 import { Virtuoso } from "react-virtuoso";
 
-export default function ChannelMessageList() {
+export function ChannelMessageList() {
 	const now = useRef(new Date());
 	const virtuosoRef = useRef(null);
-	const data = useAtomValue(sortedChannelMessagesAtom);
+
+	const messages = useChannelMessages((state: any) => state.messages);
 
 	const itemContent: any = useCallback(
 		(index: string | number) => {
-			return <ChannelMessageItem data={data[index]} />;
+			return <ChannelMessageItem data={messages[index]} />;
 		},
-		[data],
+		[messages],
 	);
 
 	const computeItemKey = useCallback(
 		(index: string | number) => {
-			return data[index].id;
+			return messages[index].id;
 		},
-		[data],
+		[messages],
 	);
 
 	return (
 		<div className="h-full w-full">
 			<Virtuoso
 				ref={virtuosoRef}
-				data={data}
+				data={messages}
 				itemContent={itemContent}
 				components={{
 					Header: () => (
@@ -66,7 +63,7 @@ export default function ChannelMessageList() {
 					),
 				}}
 				computeItemKey={computeItemKey}
-				initialTopMostItemIndex={data.length - 1}
+				initialTopMostItemIndex={messages.length - 1}
 				alignToBottom={true}
 				followOutput={true}
 				overscan={50}

src/app/channel/components/messages/item.tsx

@@ -1,28 +1,24 @@
 import MessageHideButton from "@app/channel/components/messages/hideButton";
 import MessageMuteButton from "@app/channel/components/messages/muteButton";
 import MessageReplyButton from "@app/channel/components/messages/replyButton";
-import ChannelMessageUser from "@app/channel/components/messages/user";
-
+import { ChannelMessageUser } from "@app/channel/components/messages/user";
 import { noteParser } from "@utils/parser";
-
 import { useMemo } from "react";
 
-export default function ChannelMessageItem({ data }: { data: any }) {
+export function ChannelMessageItem({ data }: { data: any }) {
 	const content = useMemo(() => noteParser(data), [data]);
 
 	return (
-		<div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
+		<div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
 			<div className="flex flex-col">
 				<ChannelMessageUser pubkey={data.pubkey} time={data.created_at} />
-				<div className="-mt-[17px] pl-[48px]">
-					<div className="flex flex-col gap-2">
-						<div className="whitespace-pre-line break-words text-base leading-tight">
-							{data.hide ? (
-								<span className="italic text-zinc-400">[hided message]</span>
-							) : (
-								content.parsed
-							)}
-						</div>
+				<div className="-mt-[20px] pl-[49px]">
+					<div className="whitespace-pre-line break-words text-base leading-tight">
+						{data.hide ? (
+							<span className="italic text-zinc-400">[hided message]</span>
+						) : (
+							content.parsed
+						)}
 					</div>
 				</div>
 			</div>

src/app/channel/components/messages/user.tsx

@@ -7,7 +7,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 
 dayjs.extend(relativeTime);
 
-export default function ChannelMessageUser({
+export function ChannelMessageUser({
 	pubkey,
 	time,
 }: { pubkey: string; time: number }) {
@@ -17,7 +17,7 @@ export default function ChannelMessageUser({
 		<div className="group flex items-start gap-3">
 			{isError || isLoading ? (
 				<>
-					<div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800" />
+					<div className="relative h-11 w-11 shrink animate-pulse rounded-md bg-zinc-800" />
 					<div className="flex w-full flex-1 items-start justify-between">
 						<div className="flex items-baseline gap-2 text-base">
 							<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
@@ -26,17 +26,17 @@ export default function ChannelMessageUser({
 				</>
 			) : (
 				<>
-					<div className="relative h-9 w-9 shrink rounded-md">
+					<div className="relative h-11 w-11 shrink rounded-md">
 						<Image
 							src={user?.picture || DEFAULT_AVATAR}
 							alt={pubkey}
-							className="h-9 w-9 rounded-md object-cover"
+							className="h-11 w-11 rounded-md object-cover"
 						/>
 					</div>
 					<div className="flex w-full flex-1 items-start justify-between">
 						<div className="flex items-baseline gap-2 text-base">
 							<span className="font-semibold leading-none text-white group-hover:underline">
-								{user?.display_name || user?.name || shortenKey(pubkey)}
+								{user?.nip05 || user?.name || shortenKey(pubkey)}
 							</span>
 							<span className="leading-none text-zinc-500">·</span>
 							<span className="leading-none text-zinc-500">

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

@@ -1,19 +1,18 @@
 import ChannelBlackList from "@app/channel/components/blacklist";
 import ChannelMembers from "@app/channel/components/members";
+import { ChannelMessageList } from "@app/channel/components/messageList";
 import ChannelMessageForm from "@app/channel/components/messages/form";
 import ChannelMetadata from "@app/channel/components/metadata";
 import ChannelUpdateModal from "@app/channel/components/updateModal";
 import { RelayContext } from "@shared/relayProvider";
 import { useActiveAccount } from "@stores/accounts";
-import { channelMessagesAtom, channelReplyAtom } from "@stores/channel";
+import { useChannelMessages } from "@stores/channels";
 import { READONLY_RELAYS } from "@stores/constants";
 import { dateToUnix, getHourAgo } from "@utils/date";
 import { usePageContext } from "@utils/hooks/usePageContext";
 import { getActiveBlacklist, getBlacklist } from "@utils/storage";
 import { arrayObjToPureArr } from "@utils/transform";
-import { useSetAtom } from "jotai";
-import { useResetAtom } from "jotai/utils";
-import { Suspense, lazy, useContext, useEffect, useRef } from "react";
+import { useContext, useRef } from "react";
 import useSWR from "swr";
 import useSWRSubscription from "swr/subscription";
 
@@ -29,20 +28,17 @@ const fetchHided = async ([, id]) => {
 	return array;
 };
 
-const ChannelMessageList = lazy(
-	() => import("@app/channel/components/messageList"),
-);
-
 export function Page() {
 	const pool: any = useContext(RelayContext);
-	const account: any = useActiveAccount((state: any) => state.account);
 
 	const pageContext = usePageContext();
 	const searchParams: any = pageContext.urlParsed.search;
-
 	const channelID = searchParams.id;
 	const channelPubkey = searchParams.channelpub;
 
+	const account: any = useActiveAccount((state: any) => state.account);
+	const addMessage = useChannelMessages((state: any) => state.add);
+
 	const { data: muted } = useSWR(
 		account ? ["muted", account.id] : null,
 		fetchMuted,
@@ -52,10 +48,6 @@ export function Page() {
 		fetchHided,
 	);
 
-	const setChannelMessages = useSetAtom(channelMessagesAtom);
-	const resetChannelMessages = useResetAtom(channelMessagesAtom);
-	const resetChannelReply = useResetAtom(channelReplyAtom);
-
 	const now = useRef(new Date());
 
 	useSWRSubscription(
@@ -80,7 +72,7 @@ export function Page() {
 						message["hide"] = false;
 					}
 					if (!muted.array.includes(event.pubkey)) {
-						setChannelMessages((prev) => [...prev, message]);
+						addMessage(message);
 					}
 				},
 			);
@@ -91,24 +83,29 @@ export function Page() {
 		},
 	);
 
-	useEffect(() => {
-		let ignore = false;
-
-		if (!ignore) {
-			// reset channel reply
-			resetChannelReply();
-			// reset channel messages
-			resetChannelMessages();
-		}
-
-		return () => {
-			ignore = true;
-		};
-	});
-
 	return (
-		<div className="flex h-full flex-col justify-between gap-2">
-			<div className="flex h-11 w-full shrink-0 items-center justify-between">
+		<div className="h-full w-full grid grid-cols-3">
+			<div className="col-span-2 flex flex-col justify-between border-r border-zinc-900">
+				<div
+					data-tauri-drag-region
+					className="h-11 w-full shrink-0 inline-flex items-center justify-center border-b border-zinc-900"
+				>
+					<h3 className="font-semibold text-zinc-100">Public Channel</h3>
+				</div>
+				<div className="w-full flex-1 p-3">
+					<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900 shadow-input shadow-black/20">
+						<ChannelMessageList />
+						<div className="inline-flex shrink-0 p-3">
+							<ChannelMessageForm channelID={channelID} />
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className="col-span-1">
+				<div
+					data-tauri-drag-region
+					className="h-11 w-full shrink-0 inline-flex items-center justify-center border-b border-zinc-900"
+				/>
 				<div>
 					<ChannelMetadata id={channelID} pubkey={channelPubkey} />
 				</div>
@@ -124,14 +121,6 @@ export function Page() {
 					)}
 				</div>
 			</div>
-			<div className="relative flex w-full flex-1 flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
-				<Suspense fallback={<p>Loading...</p>}>
-					<ChannelMessageList />
-				</Suspense>
-				<div className="inline-flex shrink-0 p-3">
-					<ChannelMessageForm channelID={channelID} />
-				</div>
-			</div>
 		</div>
 	);
 }

src/app/chat/components/item.tsx

@@ -44,7 +44,7 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
 					</div>
 					<div className="inline-flex items-baseline gap-1">
 						<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
-							{user?.nip05 || user.name || shortenKey(pubkey)}
+							{user?.nip05 || user?.name || shortenKey(pubkey)}
 						</h5>
 						{account?.pubkey === pubkey && (
 							<span className="text-zinc-500">(you)</span>

src/shared/accounts/active.tsx

@@ -4,7 +4,7 @@ import { DEFAULT_AVATAR } from "@stores/constants";
 import { useProfile } from "@utils/hooks/useProfile";
 
 export default function ActiveAccount({ data }: { data: any }) {
-	const { user } = useProfile(data.npub);
+	const { user } = useProfile(data.pubkey);
 
 	return (
 		<button type="button" className="relative h-11 w-11 overflow-hidden">

src/shared/composer/modal.tsx

@@ -58,7 +58,7 @@ export function ComposerModal() {
 							<Dialog.Panel className="relative h-min w-full max-w-xl rounded-lg border border-zinc-800 bg-zinc-900">
 								<div className="flex items-center justify-between px-4 py-4">
 									<div className="flex items-center gap-2">
-										<div>{account && <User data={account} />}</div>
+										<div>{account && <User pubkey={account.pubkey} />}</div>
 										<span>
 											<ChevronRightIcon
 												width={14}

src/shared/composer/user.tsx

@@ -1,21 +1,22 @@
 import { Image } from "@shared/image";
 import { DEFAULT_AVATAR } from "@stores/constants";
+import { useProfile } from "@utils/hooks/useProfile";
 
-export function User({ data }: { data: any }) {
-	const metadata = JSON.parse(data.metadata);
+export function User({ pubkey }: { pubkey: string }) {
+	const { user } = useProfile(pubkey);
 
 	return (
 		<div className="flex items-center gap-2">
 			<div className="h-8 w-8 shrink-0 overflow-hidden rounded bg-zinc-900">
 				<Image
-					src={metadata?.picture || DEFAULT_AVATAR}
-					alt={data.pubkey}
+					src={user?.picture || DEFAULT_AVATAR}
+					alt={pubkey}
 					className="h-8 w-8 object-cover"
 					loading="auto"
 				/>
 			</div>
 			<h5 className="text-base font-semibold leading-none text-white">
-				{metadata?.display_name || metadata?.name || (
+				{user?.nip05 || user?.name || (
 					<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
 				)}
 			</h5>

src/stores/channels.tsx

@@ -9,8 +9,9 @@ export const useChannels = create((set) => ({
 	},
 }));
 
-export const useChannelMessage = create((set) => ({
+export const useChannelMessages = create((set) => ({
 	messages: [],
+	replyTo: null,
 	add: (message: any) => {
 		set((state: any) => ({ messages: [...state.messages, message] }));
 	},

src/stores/constants.tsx

@@ -20,6 +20,9 @@ export const WRITEONLY_RELAYS = [
 	"wss://relay.nostr.band",
 ];
 
+// metadata relay
+export const METADATA_RELAY = ["wss://relay.nostr.band"];
+
 // full-relay list
 export const FULL_RELAYS = [
 	"wss://welcome.nostr.wine",

src/utils/hooks/useProfile.tsx

@@ -1,7 +1,10 @@
-import { METADATA_SERVICE } from "@stores/constants";
+import { RelayContext } from "@shared/relayProvider";
+import { METADATA_RELAY } from "@stores/constants";
 import { createPleb, getPleb } from "@utils/storage";
 import { nip19 } from "nostr-tools";
+import { useContext } from "react";
 import useSWR from "swr";
+import useSWRSubscription from "swr/subscription";
 
 const fetcher = async (key: string) => {
 	let npub: string;
@@ -18,30 +21,56 @@ const fetcher = async (key: string) => {
 	if (result && result.created_at + 86400 < current) {
 		return result;
 	} else {
-		const res = await fetch(`${METADATA_SERVICE}/${key}/metadata.json`);
-
-		if (!res.ok) {
-			return null;
-		}
-
-		const json = await res.json();
-		const saveToDB = await createPleb(key, json);
-
-		if (saveToDB) {
-			return JSON.parse(json.content);
-		}
+		return null;
 	}
 };
 
 export function useProfile(key: string) {
-	const { data, error, isLoading } = useSWR(key, fetcher, {
+	const pool: any = useContext(RelayContext);
+
+	const {
+		data: cache,
+		error,
+		isLoading,
+	} = useSWR(key, fetcher, {
 		revalidateIfStale: false,
 		revalidateOnFocus: false,
 		revalidateOnReconnect: true,
 	});
 
+	const { data: newest } = useSWRSubscription(
+		cache ? null : key,
+		(_, { next }) => {
+			const unsubscribe = pool.subscribe(
+				[
+					{
+						authors: [key],
+						kinds: [0],
+					},
+				],
+				METADATA_RELAY,
+				(event: { content: string }) => {
+					const content = JSON.parse(event.content);
+					// update state
+					next(null, content);
+					// save to database
+					createPleb(key, event);
+				},
+				undefined,
+				undefined,
+				{
+					unsubscribeOnEose: true,
+				},
+			);
+
+			return () => {
+				unsubscribe();
+			};
+		},
+	);
+
 	return {
-		user: data,
+		user: newest ? newest : cache,
 		isLoading,
 		isError: error,
 	};