From be8b40c86dedbb9174072b9ed4752cb69d155669 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sat, 29 Apr 2023 09:25:33 +0700
Subject: [PATCH] minor fixes

---
 src/app/channel/components/blacklist.tsx      |  2 +-
 src/app/channel/components/createModal.tsx    |  8 +-
 src/app/channel/components/updateModal.tsx    | 21 +++--
 src/app/channel/pages/index.page.tsx          |  4 +-
 src/app/chat/pages/index.page.tsx             |  2 +-
 src/app/newsfeed/components/contentParser.tsx |  4 +-
 src/shared/preview/video.tsx                  |  7 +-
 src/shared/preview/youtube.tsx                |  7 +-
 src/utils/hooks/useChannelProfile.tsx         | 77 +++++++++----------
 src/utils/parser.tsx                          |  4 +-
 10 files changed, 70 insertions(+), 66 deletions(-)

diff --git a/src/app/channel/components/blacklist.tsx b/src/app/channel/components/blacklist.tsx
index 7b2c755e..4911aa4f 100644
--- a/src/app/channel/components/blacklist.tsx
+++ b/src/app/channel/components/blacklist.tsx
@@ -10,7 +10,7 @@ export default function ChannelBlackList({ blacklist }: { blacklist: any }) {
       {({ open }) => (
         <>
           <Popover.Button
-            className={`group inline-flex h-8 w-8 items-center justify-center rounded-md ring-2 ring-zinc-950 ${
+            className={`group inline-flex h-8 w-8 items-center justify-center rounded-md ring-2 ring-zinc-950 focus:outline-none ${
               open ? 'bg-zinc-800 hover:bg-zinc-700' : 'bg-zinc-900 hover:bg-zinc-800'
             }`}
           >
diff --git a/src/app/channel/components/createModal.tsx b/src/app/channel/components/createModal.tsx
index 3c0da232..f551fba4 100644
--- a/src/app/channel/components/createModal.tsx
+++ b/src/app/channel/components/createModal.tsx
@@ -10,10 +10,12 @@ import { RelayPool } from 'nostr-relaypool';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { Fragment, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { useSWRConfig } from 'swr';
 import { navigate } from 'vite-plugin-ssr/client/router';
 
 export default function ChannelCreateModal() {
   const { account, isError, isLoading } = useActiveAccount();
+  const { mutate } = useSWRConfig();
 
   const [isOpen, setIsOpen] = useState(false);
   const [image, setImage] = useState(DEFAULT_AVATAR);
@@ -54,13 +56,15 @@ export default function ChannelCreateModal() {
       pool.publish(event, WRITEONLY_RELAYS);
       // insert to database
       createChannel(event.id, event.pubkey, event.content, event.created_at);
+      // update channe llist
+      mutate('channels');
       // reset form
       reset();
       setTimeout(() => {
         // close modal
         setIsOpen(false);
         // redirect to channel page
-        navigate(`/channel?id=${event.id}`);
+        navigate(`/app/channel?id=${event.id}`);
       }, 2000);
     } else {
       console.log('error');
@@ -204,7 +208,7 @@ export default function ChannelCreateModal() {
                       <button
                         type="submit"
                         disabled={!isDirty || !isValid}
-                        className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+                        className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
                       >
                         {loading ? (
                           <svg
diff --git a/src/app/channel/components/updateModal.tsx b/src/app/channel/components/updateModal.tsx
index bf388f46..90aeedd8 100644
--- a/src/app/channel/components/updateModal.tsx
+++ b/src/app/channel/components/updateModal.tsx
@@ -35,15 +35,11 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
   } = useForm({
     defaultValues: async () => {
       const channel = await getChannel(id);
-      if (channel) {
-        const metadata = JSON.parse(channel.metadata);
-        // update image state
-        setImage(metadata.picture);
-        // set default values
-        return metadata;
-      } else {
-        return null;
-      }
+      const metadata = JSON.parse(channel.metadata);
+      // update image state
+      setImage(metadata.picture);
+      // set default values
+      return metadata;
     },
   });
 
@@ -70,6 +66,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
       reset();
       // close modal
       setIsOpen(false);
+      setLoading(false);
     } else {
       console.log('error');
     }
@@ -84,7 +81,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
       <button
         type="button"
         onClick={() => openModal()}
-        className="group inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800"
+        className="group inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800 focus:outline-none"
       >
         <EditPencil width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
       </button>
@@ -207,7 +204,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
                       <button
                         type="submit"
                         disabled={!isDirty || !isValid}
-                        className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+                        className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
                       >
                         {loading ? (
                           <svg
@@ -231,7 +228,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
                             ></path>
                           </svg>
                         ) : (
-                          'Create channel'
+                          'Update channel'
                         )}
                       </button>
                     </div>
diff --git a/src/app/channel/pages/index.page.tsx b/src/app/channel/pages/index.page.tsx
index 5279e1c0..ef3e2abf 100644
--- a/src/app/channel/pages/index.page.tsx
+++ b/src/app/channel/pages/index.page.tsx
@@ -47,7 +47,7 @@ export function Page() {
   const hided = arrayObjToPureArr(activeHidedList);
   const muted = arrayObjToPureArr(activeMutedList);
 
-  useSWRSubscription(channelID ? channelID : null, (key: string, {}: any) => {
+  useSWRSubscription(channelID ? ['channel', channelID] : null, ([, key], {}: any) => {
     // subscribe to channel
     const pool = new RelayPool(FULL_RELAYS);
     const unsubscribe = pool.subscribe(
@@ -93,7 +93,7 @@ export function Page() {
           <ChannelMembers />
           <ChannelBlackList blacklist={mutedList} />
           {!isLoading && !isError && account ? (
-            account.pubkey === channelPubkey && <ChannelUpdateModal id={account.id} />
+            account.pubkey === channelPubkey && <ChannelUpdateModal id={channelID} />
           ) : (
             <></>
           )}
diff --git a/src/app/chat/pages/index.page.tsx b/src/app/chat/pages/index.page.tsx
index 69741796..4b752a25 100644
--- a/src/app/chat/pages/index.page.tsx
+++ b/src/app/chat/pages/index.page.tsx
@@ -23,7 +23,7 @@ export function Page() {
   const setChatMessages = useSetAtom(chatMessagesAtom);
   const resetChatMessages = useResetAtom(chatMessagesAtom);
 
-  useSWRSubscription(pubkey ? pubkey : null, (key: string, {}: any) => {
+  useSWRSubscription(pubkey ? ['chat', pubkey] : null, ([, key], {}: any) => {
     const pool = new RelayPool(FULL_RELAYS);
     const unsubscribe = pool.subscribe(
       [
diff --git a/src/app/newsfeed/components/contentParser.tsx b/src/app/newsfeed/components/contentParser.tsx
index d273132d..093dc6a0 100644
--- a/src/app/newsfeed/components/contentParser.tsx
+++ b/src/app/newsfeed/components/contentParser.tsx
@@ -19,10 +19,10 @@ export const contentParser = (noteContent: any, noteTags: any) => {
       return <ImagePreview key={match + i} url={match} size="large" />;
     } else if (match.match(/(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/)) {
       // youtube
-      return <YoutubePreview key={match + i} url={match} />;
+      return <YoutubePreview key={match + i} url={match} size="large" />;
     } else if (match.match(/\.(mp4|webm)$/i)) {
       // video
-      return <VideoPreview key={match + i} url={match} />;
+      return <VideoPreview key={match + i} url={match} size="large" />;
     } else {
       return (
         <a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">
diff --git a/src/shared/preview/video.tsx b/src/shared/preview/video.tsx
index bd2a6858..ec5762bd 100644
--- a/src/shared/preview/video.tsx
+++ b/src/shared/preview/video.tsx
@@ -1,8 +1,11 @@
 import { MediaOutlet, MediaPlayer } from '@vidstack/react';
 
-export default function VideoPreview({ url }: { url: string }) {
+export default function VideoPreview({ url, size }: { url: string; size: string }) {
   return (
-    <div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
+    <div
+      onClick={(e) => e.stopPropagation()}
+      className={`relative mt-2 flex flex-col overflow-hidden rounded-lg ${size === 'large' ? 'w-4/5' : 'w-2/3'}`}
+    >
       <MediaPlayer src={url} poster="" controls>
         <MediaOutlet />
       </MediaPlayer>
diff --git a/src/shared/preview/youtube.tsx b/src/shared/preview/youtube.tsx
index 0d291d49..d5b42ed2 100644
--- a/src/shared/preview/youtube.tsx
+++ b/src/shared/preview/youtube.tsx
@@ -5,11 +5,14 @@ function getVideoId(url: string) {
   return regex.exec(url)[3];
 }
 
-export default function YoutubePreview({ url }: { url: string }) {
+export default function YoutubePreview({ url, size }: { url: string; size: string }) {
   const id = getVideoId(url);
 
   return (
-    <div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
+    <div
+      onClick={(e) => e.stopPropagation()}
+      className={`relative mt-2 flex flex-col overflow-hidden rounded-lg ${size === 'large' ? 'w-4/5' : 'w-2/3'}`}
+    >
       <YouTube videoId={id} className="aspect-video xl:w-2/3" opts={{ width: '100%', height: '100%' }} />
     </div>
   );
diff --git a/src/utils/hooks/useChannelProfile.tsx b/src/utils/hooks/useChannelProfile.tsx
index 2ebc27b8..5eadd35d 100644
--- a/src/utils/hooks/useChannelProfile.tsx
+++ b/src/utils/hooks/useChannelProfile.tsx
@@ -4,49 +4,46 @@ import { RelayPool } from 'nostr-relaypool';
 import useSWRSubscription from 'swr/subscription';
 
 export const useChannelProfile = (id: string, channelPubkey: string) => {
-  const { data } = useSWRSubscription(
-    id
-      ? [
-          {
-            kinds: [41],
-            '#e': [id],
-          },
-          {
-            ids: [id],
-            kinds: [40],
-          },
-        ]
-      : null,
-    (key, { next }) => {
-      const pool = new RelayPool(FULL_RELAYS);
-      const unsubscribe = pool.subscribe(
-        key,
-        FULL_RELAYS,
-        (event: { kind: number; pubkey: string; content: string }) => {
-          switch (event.kind) {
-            case 40:
-              next(null, JSON.parse(event.content));
-              break;
-            case 41:
-              if (event.pubkey === channelPubkey) {
-                next(null, JSON.parse(event.content));
-              }
-            default:
-              break;
-          }
-        },
-        undefined,
-        undefined,
+  const { data } = useSWRSubscription(id ? id : null, (key, { next }) => {
+    const pool = new RelayPool(FULL_RELAYS);
+    const unsubscribe = pool.subscribe(
+      [
         {
-          unsubscribeOnEose: true,
+          kinds: [41],
+          '#e': [key],
+        },
+        {
+          ids: [key],
+          kinds: [40],
+        },
+      ],
+      FULL_RELAYS,
+      (event: { kind: number; pubkey: string; content: string }) => {
+        switch (event.kind) {
+          case 40:
+            next(null, JSON.parse(event.content));
+            break;
+          case 41:
+            console.log(event);
+            if (event.pubkey === channelPubkey) {
+              next(null, JSON.parse(event.content));
+            }
+            break;
+          default:
+            break;
         }
-      );
+      },
+      undefined,
+      undefined,
+      {
+        unsubscribeOnEose: true,
+      }
+    );
 
-      return () => {
-        unsubscribe();
-      };
-    }
-  );
+    return () => {
+      unsubscribe();
+    };
+  });
 
   return data;
 };
diff --git a/src/utils/parser.tsx b/src/utils/parser.tsx
index 01319c85..355b047b 100644
--- a/src/utils/parser.tsx
+++ b/src/utils/parser.tsx
@@ -14,10 +14,10 @@ export const messageParser = (noteContent: any) => {
       return <ImagePreview key={match + i} url={match} size="small" />;
     } else if (match.match(/(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/)) {
       // youtube
-      return <YoutubePreview key={match + i} url={match} />;
+      return <YoutubePreview key={match + i} url={match} size="small" />;
     } else if (match.match(/\.(mp4|webm)$/i)) {
       // video
-      return <VideoPreview key={match + i} url={match} />;
+      return <VideoPreview key={match + i} url={match} size="small" />;
     } else {
       return (
         <a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">