From 5ea338a68556767eb35acaf3dafe16a50e078952 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 25 Apr 2023 16:34:51 +0700
Subject: [PATCH] add channel update modal
---
.../channels/updateChannelModal.tsx | 241 ++++++++++++++++++
src/pages/channel/index.page.tsx | 9 +-
2 files changed, 246 insertions(+), 4 deletions(-)
create mode 100644 src/components/channels/updateChannelModal.tsx
diff --git a/src/components/channels/updateChannelModal.tsx b/src/components/channels/updateChannelModal.tsx
new file mode 100644
index 00000000..3522bc88
--- /dev/null
+++ b/src/components/channels/updateChannelModal.tsx
@@ -0,0 +1,241 @@
+import { AccountContext } from '@components/accountProvider';
+import { AvatarUploader } from '@components/avatarUploader';
+import { RelayContext } from '@components/relaysProvider';
+
+import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@stores/constants';
+
+import { dateToUnix } from '@utils/getDate';
+import { getChannel, updateChannelMetadata } from '@utils/storage';
+
+import { Dialog, Transition } from '@headlessui/react';
+import { Cancel, EditPencil } from 'iconoir-react';
+import { getEventHash, signEvent } from 'nostr-tools';
+import { Fragment, useContext, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+export const UpdateChannelModal = ({ id }: { id: string }) => {
+ const pool: any = useContext(RelayContext);
+ const activeAccount: any = useContext(AccountContext);
+
+ const [isOpen, setIsOpen] = useState(false);
+ const [image, setImage] = useState(DEFAULT_AVATAR);
+ const [loading, setLoading] = useState(false);
+
+ const closeModal = () => {
+ setIsOpen(false);
+ };
+
+ const openModal = () => {
+ setIsOpen(true);
+ };
+
+ const {
+ register,
+ handleSubmit,
+ reset,
+ setValue,
+ formState: { isDirty, isValid },
+ } = useForm({
+ defaultValues: async () => {
+ const channel = await getChannel(id);
+ const metadata = JSON.parse(channel.metadata);
+ // update image state
+ setImage(metadata.picture);
+ // set default values
+ return metadata;
+ },
+ });
+
+ const onSubmit = (data: any) => {
+ setLoading(true);
+
+ const event: any = {
+ content: JSON.stringify(data),
+ created_at: dateToUnix(),
+ kind: 41,
+ pubkey: activeAccount.pubkey,
+ tags: [],
+ };
+ event.id = getEventHash(event);
+ event.sig = signEvent(event, activeAccount.privkey);
+
+ // publish channel
+ pool.publish(event, WRITEONLY_RELAYS);
+ // update channel metadata in database
+ updateChannelMetadata(event.id, event.content);
+ // reset form
+ reset();
+ // close modal
+ setIsOpen(false);
+ };
+
+ useEffect(() => {
+ setValue('picture', image);
+ }, [setValue, image]);
+
+ return (
+ <>
+
+