From 3f19aa120d3ab1e0abbbba8ce147111d68fdaf5f Mon Sep 17 00:00:00 2001
From: Shusui MOYATANI <syusui.s@gmail.com>
Date: Sat, 18 Mar 2023 01:44:02 +0900
Subject: [PATCH] update

---
 src/components/Config.tsx                     |  10 +-
 src/components/NotePostForm.tsx               |  60 +++++-----
 .../textNote/MentionedEventDisplay.tsx        |   6 +-
 src/components/textNote/TextNoteDisplay.tsx   | 107 ++++++++++--------
 src/core/parseTextNote.ts                     |   9 +-
 src/core/userFilter/contentFilter.ts          |   1 -
 src/nostr/useCommands.ts                      |  76 +++++++------
 src/nostr/useDeprecatedReposts.ts             |   2 +-
 src/nostr/useReactions.ts                     |   2 +-
 src/nostr/useThread.ts                        |   5 +-
 src/pages/Home.tsx                            |   2 +-
 src/utils/formatDate.ts                       |   2 +-
 12 files changed, 144 insertions(+), 138 deletions(-)

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index 8495d83..7bedaf4 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -12,9 +12,9 @@ const RelayConfig = () => {
 
   const handleClickAddRelay: JSX.EventHandler<HTMLFormElement, Event> = (ev) => {
     ev.preventDefault();
-    const relayUrl = ev.currentTarget?.relayUrl?.value as string | undefined;
-    if (relayUrl == null) return;
+    if (relayUrlInput().length > 0) return;
     addRelay(relayUrlInput());
+    setRelayUrlInput('');
   };
 
   return (
@@ -80,13 +80,13 @@ const DateFormatConfig = () => {
   return (
     <div>
       <h3 class="font-bold">時刻の表記</h3>
-      <div class="flex flex-col justify-evenly gap-2 md:flex-row">
+      <div class="flex flex-col justify-evenly gap-2 sm:flex-row">
         <For each={dateFormats}>
           {({ id, name, example }) => (
-            <div class="flex flex-1 flex-row items-center gap-1 md:flex-col">
+            <div class="flex flex-1 flex-row items-center gap-1 sm:flex-col">
               <button
                 type="button"
-                class="w-48 rounded border border-rose-300 p-2 font-bold md:w-full"
+                class="w-48 rounded border border-rose-300 p-2 font-bold sm:w-full"
                 classList={{
                   'bg-rose-300': config().dateFormat === id,
                   'text-white': config().dateFormat === id,
diff --git a/src/components/NotePostForm.tsx b/src/components/NotePostForm.tsx
index d7b4303..418f1b0 100644
--- a/src/components/NotePostForm.tsx
+++ b/src/components/NotePostForm.tsx
@@ -8,7 +8,9 @@ import {
   type JSX,
   type Accessor,
 } from 'solid-js';
+import { createMutation } from '@tanstack/solid-query';
 import { Event as NostrEvent } from 'nostr-tools';
+import uniq from 'lodash/uniq';
 
 import PaperAirplane from 'heroicons/24/solid/paper-airplane.svg';
 import XMark from 'heroicons/24/outline/x-mark.svg';
@@ -41,26 +43,35 @@ const placeholder = (mode: NotePostFormProps['mode']) => {
 const NotePostForm: Component<NotePostFormProps> = (props) => {
   let textAreaRef: HTMLTextAreaElement | undefined;
 
+  const [text, setText] = createSignal<string>('');
+  const clearText = () => setText('');
+
   const { config } = useConfig();
   const getPubkey = usePubkey();
   const commands = useCommands();
 
-  const [text, setText] = createSignal<string>('');
-  const clearText = () => setText('');
-
   const replyTo = () => props.replyTo && eventWrapper(props.replyTo);
   const mode = () => props.mode ?? 'normal';
 
+  const publishTextNoteMutation = createMutation({
+    mutationKey: ['publishTextNote'],
+    mutationFn: commands.publishTextNote.bind(commands),
+    onSuccess: () => {
+      console.log('succeeded to post');
+      clearText();
+      props?.onClose();
+    },
+    onError: (err) => {
+      console.error('error', err);
+    },
+  });
+
   const mentionedPubkeys: Accessor<string[]> = createMemo(
     () => replyTo()?.mentionedPubkeysWithoutAuthor() ?? [],
   );
   const notifyPubkeys = (pubkey: string): string[] | undefined => {
-    if (mentionedPubkeys().length === 0) return undefined;
-    return [...mentionedPubkeys(), pubkey];
-  };
-
-  const handleChangeText: JSX.EventHandler<HTMLTextAreaElement, Event> = (ev) => {
-    setText(ev.currentTarget.value);
+    if (props.replyTo === undefined) return undefined;
+    return uniq([props.replyTo.pubkey, ...mentionedPubkeys(), pubkey]);
   };
 
   const submit = () => {
@@ -69,23 +80,14 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
       console.error('pubkey is not available');
       return;
     }
-    commands
-      .publishTextNote({
-        relayUrls: config().relayUrls,
-        pubkey,
-        content: text(),
-        notifyPubkeys: notifyPubkeys(pubkey),
-        rootEventId: replyTo()?.rootEvent()?.id ?? replyTo()?.id,
-        replyEventId: replyTo()?.id,
-      })
-      .then(() => {
-        console.log('succeeded to post');
-        clearText();
-        props?.onClose();
-      })
-      .catch((err) => {
-        console.error('error', err);
-      });
+    publishTextNoteMutation.mutate({
+      relayUrls: config().relayUrls,
+      pubkey,
+      content: text(),
+      notifyPubkeys: notifyPubkeys(pubkey),
+      rootEventId: replyTo()?.rootEvent()?.id ?? replyTo()?.id,
+      replyEventId: replyTo()?.id,
+    });
   };
 
   const handleSubmit: JSX.EventHandler<HTMLFormElement, Event> = (ev) => {
@@ -101,7 +103,9 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
     }
   };
 
-  const submitDisabled = createMemo(() => text().trim().length === 0);
+  const submitDisabled = createMemo(
+    () => text().trim().length === 0 || publishTextNoteMutation.isLoading,
+  );
 
   onMount(() => {
     setTimeout(() => {
@@ -130,7 +134,7 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
           class="rounded border-none"
           rows={4}
           placeholder={placeholder(mode())}
-          onInput={handleChangeText}
+          onInput={(ev) => setText(ev.currentTarget.value)}
           onKeyDown={handleKeyDown}
           value={text()}
         />
diff --git a/src/components/textNote/MentionedEventDisplay.tsx b/src/components/textNote/MentionedEventDisplay.tsx
index 383a946..4da5608 100644
--- a/src/components/textNote/MentionedEventDisplay.tsx
+++ b/src/components/textNote/MentionedEventDisplay.tsx
@@ -10,11 +10,7 @@ export type MentionedEventDisplayProps = {
 const MentionedEventDisplay = (props: MentionedEventDisplayProps) => {
   return (
     <Show
-      when={
-        props.mentionedEvent.marker == null ||
-        props.mentionedEvent.marker.length === 0 ||
-        props.mentionedEvent.marker === 'mention'
-      }
+      when={props.mentionedEvent.marker != null && props.mentionedEvent.marker.length > 0}
       fallback={() => <EventLink eventId={props.mentionedEvent.eventId} />}
     >
       <div class="my-1 rounded border p-1">
diff --git a/src/components/textNote/TextNoteDisplay.tsx b/src/components/textNote/TextNoteDisplay.tsx
index 54df82e..8e9abe0 100644
--- a/src/components/textNote/TextNoteDisplay.tsx
+++ b/src/components/textNote/TextNoteDisplay.tsx
@@ -1,14 +1,6 @@
-import {
-  Show,
-  For,
-  createSignal,
-  createMemo,
-  type JSX,
-  type Component,
-  Match,
-  Switch,
-} from 'solid-js';
+import { Show, For, createSignal, createMemo, type JSX, type Component } from 'solid-js';
 import type { Event as NostrEvent } from 'nostr-tools';
+import { createMutation } from '@tanstack/solid-query';
 
 import HeartOutlined from 'heroicons/24/outline/heart.svg';
 import HeartSolid from 'heroicons/24/solid/heart.svg';
@@ -47,13 +39,10 @@ export type TextNoteDisplayProps = {
 const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
   const { config } = useConfig();
   const formatDate = useFormatDate();
-  const commands = useCommands();
   const pubkey = usePubkey();
 
   const [showReplyForm, setShowReplyForm] = createSignal(false);
   const [showMenu, setShowMenu] = createSignal(false);
-  const [postingRepost, setPostingRepost] = createSignal(false);
-  const [postingReaction, setPostingReaction] = createSignal(false);
 
   const event = createMemo(() => eventWrapper(props.event));
 
@@ -75,6 +64,34 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
     eventId: props.event.id as string, // TODO いつかなおす
   }));
 
+  const commands = useCommands();
+
+  const publishReactionMutation = createMutation({
+    mutationKey: ['publishReaction', event().id],
+    mutationFn: commands.publishReaction.bind(commands),
+    onSuccess: () => {
+      console.log('succeeded to publish reaction');
+      invalidateReactions().catch((err) => console.error('failed to refetch reactions', err));
+    },
+    onError: (err) => {
+      console.error('failed to publish reaction: ', err);
+    },
+  });
+
+  const publishDeprecatedRepostMutation = createMutation({
+    mutationKey: ['publishDeprecatedRepost', event().id],
+    mutationFn: commands.publishDeprecatedRepost.bind(commands),
+    onSuccess: () => {
+      console.log('succeeded to publish deprecated reposts');
+      invalidateDeprecatedReposts().catch((err) =>
+        console.error('failed to refetch deprecated reposts', err),
+      );
+    },
+    onError: (err) => {
+      console.error('failed to publish deprecated repost: ', err);
+    },
+  });
+
   const isReactedByMe = createMemo(() => isReactedBy(pubkey()));
   const isRepostedByMe = createMemo(() => isRepostedBy(pubkey()));
 
@@ -97,22 +114,14 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
       // TODO remove reaction
       return;
     }
-    if (postingRepost()) {
-      return;
-    }
 
-    setPostingRepost(true);
     ensureNonNull([pubkey(), props.event.id] as const)(([pubkeyNonNull, eventIdNonNull]) => {
-      commands
-        .publishDeprecatedRepost({
-          relayUrls: config().relayUrls,
-          pubkey: pubkeyNonNull,
-          eventId: eventIdNonNull,
-          notifyPubkey: props.event.pubkey,
-        })
-        .then(() => invalidateDeprecatedReposts())
-        .catch((err) => console.error('failed to repost: ', err))
-        .finally(() => setPostingRepost(false));
+      publishDeprecatedRepostMutation.mutate({
+        relayUrls: config().relayUrls,
+        pubkey: pubkeyNonNull,
+        eventId: eventIdNonNull,
+        notifyPubkey: props.event.pubkey,
+      });
     });
   };
 
@@ -121,23 +130,15 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
       // TODO remove reaction
       return;
     }
-    if (postingReaction()) {
-      return;
-    }
 
-    setPostingReaction(true);
     ensureNonNull([pubkey(), props.event.id] as const)(([pubkeyNonNull, eventIdNonNull]) => {
-      commands
-        .publishReaction({
-          relayUrls: config().relayUrls,
-          pubkey: pubkeyNonNull,
-          content: '+',
-          eventId: eventIdNonNull,
-          notifyPubkey: props.event.pubkey,
-        })
-        .then(() => invalidateReactions())
-        .catch((err) => console.error('failed to publish reaction: ', err))
-        .finally(() => setPostingReaction(false));
+      publishReactionMutation.mutate({
+        relayUrls: config().relayUrls,
+        pubkey: pubkeyNonNull,
+        content: '+',
+        eventId: eventIdNonNull,
+        notifyPubkey: props.event.pubkey,
+      });
     });
   };
 
@@ -173,14 +174,14 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
           </div>
           <Show when={showReplyEvent()} keyed>
             {(id) => (
-              <div class="border p-1">
+              <div class="mt-1 rounded border p-1">
                 <TextNoteDisplayById eventId={id} actions={false} embedding={false} />
               </div>
             )}
           </Show>
-          <Show when={event().mentionedPubkeysWithoutAuthor().length > 0}>
+          <Show when={event().mentionedPubkeys().length > 0}>
             <div class="text-xs">
-              <For each={event().mentionedPubkeysWithoutAuthor()}>
+              <For each={event().mentionedPubkeys()}>
                 {(replyToPubkey: string) => (
                   <span class="pr-1 text-blue-500 underline">
                     <GeneralUserMentionDisplay pubkey={replyToPubkey} />
@@ -207,10 +208,14 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
                 class="flex shrink-0 items-center gap-1"
                 classList={{
                   'text-zinc-400': !isRepostedByMe(),
-                  'text-green-400': isRepostedByMe(),
+                  'text-green-400': isRepostedByMe() || publishDeprecatedRepostMutation.isLoading,
                 }}
               >
-                <button class="h-4 w-4" onClick={handleRepost} disabled={postingRepost()}>
+                <button
+                  class="h-4 w-4"
+                  onClick={handleRepost}
+                  disabled={publishDeprecatedRepostMutation.isLoading}
+                >
                   <ArrowPathRoundedSquare />
                 </button>
                 <Show when={reposts().length > 0}>
@@ -221,10 +226,14 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
                 class="flex shrink-0 items-center gap-1"
                 classList={{
                   'text-zinc-400': !isReactedByMe(),
-                  'text-rose-400': isReactedByMe(),
+                  'text-rose-400': isReactedByMe() || publishReactionMutation.isLoading,
                 }}
               >
-                <button class="h-4 w-4" onClick={handleReaction} disabled={postingReaction()}>
+                <button
+                  class="h-4 w-4"
+                  onClick={handleReaction}
+                  disabled={publishReactionMutation.isLoading}
+                >
                   <Show when={isReactedByMe()} fallback={<HeartOutlined />}>
                     <HeartSolid />
                   </Show>
diff --git a/src/core/parseTextNote.ts b/src/core/parseTextNote.ts
index 47e80c3..6999893 100644
--- a/src/core/parseTextNote.ts
+++ b/src/core/parseTextNote.ts
@@ -12,7 +12,7 @@ export type MentionedEvent = {
   content: string;
   tagIndex: number;
   eventId: string;
-  marker: string | null; // TODO 'reply' | 'root' | 'mention' | null;
+  marker: 'reply' | 'root' | 'mention' | undefined;
 };
 
 export type MentionedUser = {
@@ -98,22 +98,21 @@ export const parseTextNote = (event: NostrEvent): ParsedTextNote => {
         result.push(mentionedUser);
       } else if (tagName === 'e') {
         const mention = eventWrapper(event)
-          .mentionedEvents()
+          .taggedEvents()
           .find((ev) => ev.index === tagIndex);
-        if (mention == null) return;
 
         const mentionedEvent: MentionedEvent = {
           type: 'MentionedEvent',
           tagIndex,
           content: match[0],
           eventId: tag[1],
-          marker: mention.marker,
+          marker: mention?.marker,
         };
         result.push(mentionedEvent);
       }
     } else if (match.groups?.nip19 && match.index >= pos) {
       try {
-        const decoded = decode(match[0]);
+        const decoded = decode(match[0].toLowerCase());
         const bech32Entity: Bech32Entity = {
           type: 'Bech32Entity',
           content: match[0],
diff --git a/src/core/userFilter/contentFilter.ts b/src/core/userFilter/contentFilter.ts
index 8dcd1d8..ef585b2 100644
--- a/src/core/userFilter/contentFilter.ts
+++ b/src/core/userFilter/contentFilter.ts
@@ -45,4 +45,3 @@ const applyContentFilter = (contentFilter: ContentFilter): boolean => {
 // DOUBLEQUOTE
 // A filter '"HELLO WORLD"' should match 'HELLO WORLD'
 // A filter '"HELLO WORLD"' should not match 'hello world'
-
diff --git a/src/nostr/useCommands.ts b/src/nostr/useCommands.ts
index c7da219..6902330 100644
--- a/src/nostr/useCommands.ts
+++ b/src/nostr/useCommands.ts
@@ -38,46 +38,48 @@ const useCommands = () => {
     });
   };
 
-  return {
-    // NIP-01
-    publishTextNote({
-      relayUrls,
+  // NIP-01
+  const publishTextNote = ({
+    relayUrls,
+    pubkey,
+    content,
+    tags,
+    notifyPubkeys,
+    rootEventId,
+    mentionEventIds,
+    replyEventId,
+  }: {
+    relayUrls: string[];
+    pubkey: string;
+    content: string;
+    tags?: string[][];
+    notifyPubkeys?: string[];
+    rootEventId?: string;
+    mentionEventIds?: string[];
+    replyEventId?: string;
+  }): Promise<Promise<void>[]> => {
+    const pTags = notifyPubkeys?.map((p) => ['p', p]) ?? [];
+    const eTags = [];
+    // NIP-10
+    if (rootEventId != null) eTags.push(['e', rootEventId, '', 'root']);
+    if (mentionEventIds != null)
+      mentionEventIds.forEach((id) => eTags.push(['e', id, '', 'mention']));
+    if (replyEventId != null) eTags.push(['e', replyEventId, '', 'reply']);
+
+    const mergedTags = [...eTags, ...pTags, ...(tags ?? [])];
+
+    const preSignedEvent: NostrEvent = {
+      kind: 1,
       pubkey,
+      created_at: currentDate(),
+      tags: mergedTags,
       content,
-      tags,
-      notifyPubkeys,
-      rootEventId,
-      mentionEventIds,
-      replyEventId,
-    }: {
-      relayUrls: string[];
-      pubkey: string;
-      content: string;
-      tags?: string[][];
-      notifyPubkeys?: string[];
-      rootEventId?: string;
-      mentionEventIds?: string[];
-      replyEventId?: string;
-    }): Promise<Promise<void>[]> {
-      const pTags = notifyPubkeys?.map((p) => ['p', p]) ?? [];
-      const eTags = [];
-      // NIP-10
-      if (rootEventId != null) eTags.push(['e', rootEventId, '', 'root']);
-      if (mentionEventIds != null)
-        mentionEventIds.forEach((id) => eTags.push(['e', id, '', 'mention']));
-      if (replyEventId != null) eTags.push(['e', replyEventId, '', 'reply']);
+    };
+    return publishEvent(relayUrls, preSignedEvent);
+  };
 
-      const mergedTags = [...eTags, ...pTags, ...(tags ?? [])];
-
-      const preSignedEvent: NostrEvent = {
-        kind: 1,
-        pubkey,
-        created_at: currentDate(),
-        tags: mergedTags,
-        content,
-      };
-      return publishEvent(relayUrls, preSignedEvent);
-    },
+  return {
+    publishTextNote,
     // NIP-25
     publishReaction({
       relayUrls,
diff --git a/src/nostr/useDeprecatedReposts.ts b/src/nostr/useDeprecatedReposts.ts
index 4fc18d9..2baf10e 100644
--- a/src/nostr/useDeprecatedReposts.ts
+++ b/src/nostr/useDeprecatedReposts.ts
@@ -18,7 +18,7 @@ export type UseDeprecatedReposts = {
 };
 
 const { exec } = useBatchedEvents<UseDeprecatedRepostsProps>(() => ({
-  interval: 5000,
+  interval: 3400,
   generateKey: ({ eventId }) => eventId,
   mergeFilters: (args) => {
     const eventIds = args.map((arg) => arg.eventId);
diff --git a/src/nostr/useReactions.ts b/src/nostr/useReactions.ts
index 05dfa7a..9e8573e 100644
--- a/src/nostr/useReactions.ts
+++ b/src/nostr/useReactions.ts
@@ -19,7 +19,7 @@ export type UseReactions = {
 };
 
 const { exec } = useBatchedEvents<UseReactionsProps>(() => ({
-  interval: 5000,
+  interval: 3400,
   generateKey: ({ eventId }) => eventId,
   mergeFilters: (args) => {
     const eventIds = args.map((arg) => arg.eventId);
diff --git a/src/nostr/useThread.ts b/src/nostr/useThread.ts
index 50174ca..e9be0d7 100644
--- a/src/nostr/useThread.ts
+++ b/src/nostr/useThread.ts
@@ -1,7 +1,4 @@
 const filter = {
   kinds: [1],
-  '#e': [
-    rootEventId,
-    currentEventId,
-  ],
+  '#e': [rootEventId, currentEventId],
 };
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index d6ce357..7f1b813 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -48,7 +48,7 @@ const Home: Component = () => {
       filters: [
         {
           kinds: [1, 6],
-          authors: [...followingPubkeys(), pubkeyNonNull],
+          authors: followingPubkeys(),
           limit: 25,
           since: Math.floor(Date.now() / 1000) - 12 * 60 * 60,
         },
diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts
index a90fbec..828ca02 100644
--- a/src/utils/formatDate.ts
+++ b/src/utils/formatDate.ts
@@ -59,7 +59,7 @@ const defaultAbsoluteDateShortFormatter = (parsedDate: AbsoluteDate): string =>
 };
 
 const calcDiffSec = (date: Date, currentDate: Date): number =>
-  (Number(currentDate) - Number(date)) / 1000;
+  Math.round(Number(currentDate) - Number(date)) / 1000;
 
 const parseDateDiff = (date: Date, currentDate: Date): RelativeDate => {
   const diffSec = calcDiffSec(date, currentDate);