update channel

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

@@ -3,13 +3,11 @@ import CancelIcon from "@icons/cancel";
 import { ImagePicker } from "@shared/form/imagePicker";
 import { RelayContext } from "@shared/relayProvider";
 import { useActiveAccount } from "@stores/accounts";
-import { channelContentAtom, channelReplyAtom } from "@stores/channel";
+import { useChannelMessages } from "@stores/channels";
 import { WRITEONLY_RELAYS } from "@stores/constants";
 import { dateToUnix } from "@utils/date";
-import { useAtom, useAtomValue } from "jotai";
-import { useResetAtom } from "jotai/utils";
 import { getEventHash, getSignature } from "nostr-tools";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 
 export default function ChannelMessageForm({
 	channelID,
@@ -17,20 +15,20 @@ export default function ChannelMessageForm({
 	const pool: any = useContext(RelayContext);
 	const account = useActiveAccount((state: any) => state.account);
 
-	const [value, setValue] = useAtom(channelContentAtom);
-	const resetValue = useResetAtom(channelContentAtom);
-
-	const channelReply = useAtomValue(channelReplyAtom);
-	const resetChannelReply = useResetAtom(channelReplyAtom);
+	const [value, setValue] = useState("");
+	const [replyTo, closeReply] = useChannelMessages((state: any) => [
+		state.replyTo,
+		state.closeReply,
+	]);
 
 	const submitEvent = () => {
 		let tags: any[][];
 
-		if (channelReply.id !== null) {
+		if (replyTo.id !== null) {
 			tags = [
 				["e", channelID, "", "root"],
-				["e", channelReply.id, "", "reply"],
-				["p", channelReply.pubkey, ""],
+				["e", replyTo.id, "", "reply"],
+				["p", replyTo.pubkey, ""],
 			];
 		} else {
 			tags = [["e", channelID, "", "root"]];
@@ -50,11 +48,6 @@ export default function ChannelMessageForm({
 
 			// publish note
 			pool.publish(event, WRITEONLY_RELAYS);
-
-			// reset state
-			resetValue();
-			// reset channel reply
-			resetChannelReply();
 		} else {
 			console.log("error");
 		}
@@ -68,24 +61,22 @@ export default function ChannelMessageForm({
 	};
 
 	const stopReply = () => {
-		resetChannelReply();
+		closeReply();
 	};
 
 	return (
 		<div
 			className={`relative ${
-				channelReply.id ? "h-36" : "h-24"
+				replyTo.id ? "h-36" : "h-24"
 			} w-full overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20`}
 		>
-			{channelReply.id && (
+			{replyTo.id && (
 				<div className="absolute left-0 top-0 z-10 h-14 w-full p-[2px]">
 					<div className="flex h-full w-full items-center justify-between rounded-t-md border-b border-zinc-700/70 bg-zinc-900 px-3">
 						<div className="flex w-full flex-col">
-							<UserReply pubkey={channelReply.pubkey} />
+							<UserReply pubkey={replyTo.pubkey} />
 							<div className="-mt-3.5 pl-[32px]">
-								<div className="text-base text-white">
-									{channelReply.content}
-								</div>
+								<div className="text-base text-white">{replyTo.content}</div>
 							</div>
 						</div>
 						<button
@@ -105,13 +96,12 @@ export default function ChannelMessageForm({
 				spellCheck={false}
 				placeholder="Message"
 				className={`relative ${
-					channelReply.id ? "h-36 pt-16" : "h-24 pt-3"
+					replyTo.id ? "h-36 pt-16" : "h-24 pt-3"
 				} w-full resize-none rounded-lg border border-black/5 px-3.5 pb-3 text-base shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500`}
 			/>
 			<div className="absolute bottom-2 w-full px-2">
 				<div className="flex w-full items-center justify-between bg-zinc-800">
 					<div className="flex items-center gap-2 divide-x divide-zinc-700">
-						<ImagePicker type="channel" />
 						<div className="flex items-center gap-2 pl-2" />
 					</div>
 					<div className="flex items-center gap-2">