From 340e453b3e62405884e3fd5730d2e798a36daaf4 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sun, 23 Apr 2023 15:10:07 +0700
Subject: [PATCH] updated create channel modal

---
 src/components/channels/channelList.tsx       | 15 +---
 .../channels/createChannelModal.tsx           | 85 +++++++++++++------
 src/components/layouts/channel.tsx            | 31 +++++++
 src/pages/create-channel/index.page.tsx       |  9 --
 src/pages/index.page.tsx                      |  4 +-
 5 files changed, 95 insertions(+), 49 deletions(-)
 create mode 100644 src/components/layouts/channel.tsx
 delete mode 100644 src/pages/create-channel/index.page.tsx

diff --git a/src/components/channels/channelList.tsx b/src/components/channels/channelList.tsx
index ae9e990f..0e9b3dfb 100644
--- a/src/components/channels/channelList.tsx
+++ b/src/components/channels/channelList.tsx
@@ -1,26 +1,15 @@
 import { ChannelListItem } from '@components/channels/channelListItem';
+import { CreateChannelModal } from '@components/channels/createChannelModal';
 
 import { DEFAULT_CHANNELS } from '@stores/constants';
 
-import { Plus } from 'iconoir-react';
-
 export default function ChannelList() {
   return (
     <div className="flex flex-col gap-px">
       {DEFAULT_CHANNELS.map((item) => (
         <ChannelListItem key={item.event_id} data={item} />
       ))}
-      <a
-        href="/create-channel"
-        className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
-      >
-        <div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
-          <Plus width={12} height={12} className="text-zinc-500" />
-        </div>
-        <div>
-          <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new channel</h5>
-        </div>
-      </a>
+      <CreateChannelModal />
     </div>
   );
 }
diff --git a/src/components/channels/createChannelModal.tsx b/src/components/channels/createChannelModal.tsx
index 11cedf09..839fc1d8 100644
--- a/src/components/channels/createChannelModal.tsx
+++ b/src/components/channels/createChannelModal.tsx
@@ -1,6 +1,9 @@
 import { RelayContext } from '@components/relaysProvider';
 
+import { FULL_RELAYS } from '@stores/constants';
+
 import { dateToUnix } from '@utils/getDate';
+import { createChannel } from '@utils/storage';
 
 import * as Dialog from '@radix-ui/react-dialog';
 import useLocalStorage from '@rehooks/local-storage';
@@ -10,7 +13,7 @@ import { useContext, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 export const CreateChannelModal = () => {
-  const [pool, relays]: any = useContext(RelayContext);
+  const [pool]: any = useContext(RelayContext);
   const [open, setOpen] = useState(false);
   const [activeAccount]: any = useLocalStorage('account', {});
 
@@ -21,7 +24,7 @@ export const CreateChannelModal = () => {
     formState: { isDirty, isValid },
   } = useForm();
 
-  const onSubmit = (data) => {
+  const onSubmit = (data: any) => {
     const event: any = {
       content: JSON.stringify(data),
       created_at: dateToUnix(),
@@ -33,7 +36,9 @@ export const CreateChannelModal = () => {
     event.sig = signEvent(event, activeAccount.privkey);
 
     // publish channel
-    pool.publish(event, relays);
+    pool.publish(event, FULL_RELAYS);
+    // insert to database
+    createChannel(event.id, event.content, event.created_at);
     // close modal
     setOpen(false);
     // reset form
@@ -53,43 +58,48 @@ export const CreateChannelModal = () => {
         </div>
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
         <Dialog.Content className="fixed inset-0 z-50 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center">
-            <div className="relative flex h-min w-full max-w-xl flex-col rounded-lg shadow-modal">
-              <div className="sticky left-0 top-0 flex h-12 w-full shrink-0 items-center justify-between rounded-t-lg bg-zinc-950 px-3">
-                <div className="flex w-full items-center justify-between">
-                  <h5 className="font-medium leading-none text-zinc-500"># Create channel</h5>
-                  <Dialog.Close asChild>
-                    <button
-                      autoFocus={false}
-                      className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
-                    >
-                      <Cancel width={12} height={12} className="text-zinc-500" />
-                    </button>
-                  </Dialog.Close>
+            <div className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900">
+              <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-6">
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center justify-between">
+                    <h5 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-2xl font-semibold leading-none text-transparent">
+                      Create channel
+                    </h5>
+                    <Dialog.Close asChild>
+                      <button
+                        autoFocus={false}
+                        className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+                      >
+                        <Cancel width={20} height={20} className="text-zinc-300" />
+                      </button>
+                    </Dialog.Close>
+                  </div>
+                  <p className="leading-tight text-zinc-400">
+                    Channels are freedom square, everyone can speech freely, no one can stop you or deceive what to
+                    speech
+                  </p>
                 </div>
               </div>
-              <div className="flex h-full w-full flex-col overflow-y-auto rounded-b-lg bg-zinc-950 px-3 pb-3">
-                <form
-                  onSubmit={handleSubmit(onSubmit)}
-                  className="flex h-full w-full flex-col gap-4 rounded-lg border border-white/20 bg-zinc-900 p-4"
-                >
+              <div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
+                <form onSubmit={handleSubmit(onSubmit)} className="flex h-full w-full flex-col gap-4">
                   <div className="flex flex-col gap-1">
-                    <label className="text-xs font-semibold uppercase tracking-wider text-zinc-300">
+                    <label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
                       Channel name *
                     </label>
                     <div className="relative w-full shrink-0 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">
                       <input
                         type={'text'}
-                        {...register('name', { required: true })}
+                        {...register('name', { required: true, minLength: 4 })}
                         spellCheck={false}
                         className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
                       />
                     </div>
                   </div>
                   <div className="flex flex-col gap-1">
-                    <label className="text-xs font-semibold uppercase tracking-wider text-zinc-300">Picture</label>
+                    <label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Picture</label>
                     <div className="relative w-full shrink-0 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">
                       <input
                         type={'text'}
@@ -100,7 +110,7 @@ export const CreateChannelModal = () => {
                     </div>
                   </div>
                   <div className="flex flex-col gap-1">
-                    <label className="text-xs font-semibold uppercase tracking-wider text-zinc-300">About</label>
+                    <label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Description</label>
                     <div className="relative h-20 w-full shrink-0 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">
                       <textarea
                         {...register('about')}
@@ -109,6 +119,31 @@ export const CreateChannelModal = () => {
                       />
                     </div>
                   </div>
+                  <div className="flex h-14 items-center justify-between gap-1 rounded-lg bg-zinc-800 px-4 py-2">
+                    <div className="flex flex-col gap-0.5">
+                      <div className="inline-flex items-center gap-1">
+                        <span className="text-sm font-bold leading-none text-zinc-200">Make Private</span>
+                        <div className="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-0.5 text-xs font-medium ring-1 ring-inset ring-zinc-400/20">
+                          <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
+                            Coming soon
+                          </span>
+                        </div>
+                      </div>
+                      <p className="text-sm leading-none text-zinc-400">
+                        Private channels can only be viewed by member
+                      </p>
+                    </div>
+                    <div>
+                      <button
+                        disabled
+                        className="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-zinc-900 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-fuchsia-600 focus:ring-offset-2"
+                        role="switch"
+                        aria-checked="false"
+                      >
+                        <span className="pointer-events-none inline-block h-5 w-5 translate-x-0 transform rounded-full bg-zinc-600 shadow ring-0 transition duration-200 ease-in-out"></span>
+                      </button>
+                    </div>
+                  </div>
                   <div>
                     <button
                       type="submit"
diff --git a/src/components/layouts/channel.tsx b/src/components/layouts/channel.tsx
new file mode 100644
index 00000000..64ad6315
--- /dev/null
+++ b/src/components/layouts/channel.tsx
@@ -0,0 +1,31 @@
+import AppHeader from '@components/appHeader';
+import MultiAccounts from '@components/multiAccounts';
+import Navigation from '@components/navigation';
+
+export default function ChannelLayout({ 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 xl:col-span-4 xl:mr-1.5">
+              <div className="h-full w-full rounded-lg">{children}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/create-channel/index.page.tsx b/src/pages/create-channel/index.page.tsx
deleted file mode 100644
index 40b2af7f..00000000
--- a/src/pages/create-channel/index.page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import NewsfeedLayout from '@components/layouts/newsfeed';
-
-export function Page() {
-  return (
-    <NewsfeedLayout>
-      <h1>TODO</h1>
-    </NewsfeedLayout>
-  );
-}
diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx
index 299aea41..5ce354c2 100644
--- a/src/pages/index.page.tsx
+++ b/src/pages/index.page.tsx
@@ -2,7 +2,6 @@ import { RelayContext } from '@components/relaysProvider';
 
 import { dateToUnix, hoursAgo } from '@utils/getDate';
 import {
-  countTotalChannels,
   countTotalNotes,
   createChannel,
   createChat,
@@ -30,7 +29,6 @@ export function Page() {
     async (account: { id: number; pubkey: string; chats: string[] }, tags: any) => {
       const lastLogin = await getLastLogin();
       const notes = await countTotalNotes();
-      const channels = await countTotalChannels();
 
       const chats = account.chats?.length || 0;
       const follows = JSON.parse(tags);
@@ -64,6 +62,7 @@ export function Page() {
         });
       }
       // kind 40 (channels) query
+      /*
       if (channels.total === 0) {
         query.push({
           kinds: [40],
@@ -71,6 +70,7 @@ export function Page() {
           until: dateToUnix(now.current),
         });
       }
+       */
       // subscribe relays
       const unsubscribe = pool.subscribe(
         query,