update

2025-12-18 22:44:26 +01:00 · 2023-03-18 01:44:02 +09:00
parent 5a37842702
commit 3f19aa120d
12 changed files with 144 additions and 138 deletions
--- 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,
--- 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()}
        />
--- 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">
--- 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>