note options constant param

2024-01-08 15:42:25 +02:00 · 2024-01-08 15:42:25 +02:00 · d3bc1b1c1d
commit d3bc1b1c1d
parent a20c8dbbf4
9 changed files with 182 additions and 175 deletions
--- a/packages/app/src/Components/Event/Create/NoteCreator.tsx
+++ b/packages/app/src/Components/Event/Create/NoteCreator.tsx
@ -30,6 +30,32 @@ import { ZapTarget } from "@/Utils/Zapper";
 import FileUploadProgress from "../FileUpload";
 import { OkResponseRow } from "./OkResponseRow";

+const previewNoteOptions = {
+  showContextMenu: false,
+  showFooter: false,
+  canClick: false,
+  showTime: false,
+};
+
+const replyToNoteOptions = {
+  showFooter: false,
+  showContextMenu: false,
+  showProfileCard: false,
+  showTime: false,
+  canClick: false,
+  showMedia: false,
+  longFormPreview: true,
+};
+
+const quoteNoteOptions = {
+  showFooter: false,
+  showContextMenu: false,
+  showTime: false,
+  canClick: false,
+  showMedia: false,
+  longFormPreview: true,
+};
+
 export function NoteCreator() {
  const { formatMessage } = useIntl();
  const uploader = useFileUpload();
@ -293,17 +319,7 @@ export function NoteCreator() {

  function getPreviewNote() {
    if (note.preview) {
-      return (
-        <Note
-          data={note.preview as TaggedNostrEvent}
-          options={{
-            showContextMenu: false,
-            showFooter: false,
-            canClick: false,
-            showTime: false,
-          }}
-        />
-      );
+      return <Note data={note.preview as TaggedNostrEvent} options={previewNoteOptions} />;
    }
  }

@ -600,18 +616,7 @@ export function NoteCreator() {
            <h4>
              <FormattedMessage defaultMessage="Reply To" id="8ED/4u" />
            </h4>
-            <Note
-              data={note.replyTo}
-              options={{
-                showFooter: false,
-                showContextMenu: false,
-                showProfileCard: false,
-                showTime: false,
-                canClick: false,
-                showMedia: false,
-                longFormPreview: true,
-              }}
-            />
+            <Note data={note.replyTo} options={replyToNoteOptions} />
          </>
        )}
        {note.quote && (
@ -619,17 +624,7 @@ export function NoteCreator() {
            <h4>
              <FormattedMessage defaultMessage="Quote Repost" id="C7642/" />
            </h4>
-            <Note
-              data={note.quote}
-              options={{
-                showFooter: false,
-                showContextMenu: false,
-                showTime: false,
-                canClick: false,
-                showMedia: false,
-                longFormPreview: true,
-              }}
-            />
+            <Note data={note.quote} options={quoteNoteOptions} />
          </>
        )}
        {note.preview && getPreviewNote()}
--- a/packages/app/src/Components/Event/Note/Note.tsx
+++ b/packages/app/src/Components/Event/Note/Note.tsx
@ -1,12 +1,13 @@
-import { EventKind, NostrLink, TaggedNostrEvent } from "@snort/system";
+import { EventKind, NostrLink } from "@snort/system";
 import classNames from "classnames";
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { useInView } from "react-intersection-observer";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";

 import NoteHeader from "@/Components/Event/Note/NoteHeader";
 import { NoteText } from "@/Components/Event/Note/NoteText";
+import { TranslationInfo } from "@/Components/Event/Note/TranslationInfo";
 import useModeration from "@/Hooks/useModeration";
 import { chainKey } from "@/Hooks/useThreadContext";
 import { findTag } from "@/Utils";
@ -19,128 +20,48 @@ import Poll from "../Poll";
 import { NoteTranslation } from "./NoteContextMenu";
 import NoteFooter from "./NoteFooter";

+const defaultOptions = {
+  showHeader: true,
+  showTime: true,
+  showFooter: true,
+  canUnpin: false,
+  canUnbookmark: false,
+  showContextMenu: true,
+};
+
+const canRenderAsTextNote = [EventKind.TextNote, EventKind.Polls];
+
 export function Note(props: NoteProps) {
  const { data: ev, highlight, options: opt, ignoreModeration = false, className, waitUntilInView } = props;
-
-  const baseClassName = classNames("note min-h-[110px] flex flex-col gap-4 card", className);
-  const navigate = useNavigate();
-
+  const baseClassName = classNames("note min-h-[110px] flex flex-col gap-4 card", className ?? "");
  const { isEventMuted } = useModeration();
  const { ref, inView } = useInView({ triggerOnce: true, rootMargin: "2000px" });
  const [showTranslation, setShowTranslation] = useState(true);
  const [translated, setTranslated] = useState<NoteTranslation>();

-  const options = {
-    showHeader: true,
-    showTime: true,
-    showFooter: true,
-    canUnpin: false,
-    canUnbookmark: false,
-    showContextMenu: true,
-    ...opt,
-  };
+  const optionsMerged = { ...defaultOptions, ...opt };
+  const goToEvent = useGoToEvent(props, optionsMerged);

-  function goToEvent(e: React.MouseEvent, eTarget: TaggedNostrEvent) {
-    if (opt?.canClick === false) {
-      return;
-    }
-
-    let target = e.target as HTMLElement | null;
-    while (target) {
-      if (
-        target.tagName === "A" ||
-        target.tagName === "BUTTON" ||
-        target.classList.contains("reaction-pill") ||
-        target.classList.contains("szh-menu-container")
-      ) {
-        return; // is there a better way to do this?
-      }
-      target = target.parentElement;
-    }
-
-    e.stopPropagation();
-    if (props.onClick) {
-      props.onClick(eTarget);
-      return;
-    }
-
-    const link = NostrLink.fromEvent(eTarget);
-    // detect cmd key and open in new tab
-    if (e.metaKey) {
-      window.open(`/${link.encode(CONFIG.eventLinkPrefix)}`, "_blank");
-    } else {
-      navigate(`/${link.encode(CONFIG.eventLinkPrefix)}`, {
-        state: eTarget,
-      });
-    }
-  }
-
-  const canRenderAsTextNote = [EventKind.TextNote, EventKind.Polls];
  if (!canRenderAsTextNote.includes(ev.kind)) {
-    const alt = findTag(ev, "alt");
-    if (alt) {
-      return (
-        <div className="note-quote">
-          <Text id={ev.id} content={alt} tags={[]} creator={ev.pubkey} />
-        </div>
-      );
-    } else {
-      return (
-        <>
-          <h4>
-            <FormattedMessage {...messages.UnknownEventKind} values={{ kind: ev.kind }} />
-          </h4>
-          <pre>{JSON.stringify(ev, undefined, "  ")}</pre>
-        </>
-      );
-    }
-  }
-
-  function translation() {
-    if (translated && translated.confidence > 0.5) {
-      return (
-        <>
-          <span
-            className="text-xs font-semibold text-gray-light select-none"
-            onClick={e => {
-              e.stopPropagation();
-              setShowTranslation(s => !s);
-            }}>
-            <FormattedMessage {...messages.TranslatedFrom} values={{ lang: translated.fromLanguage }} />
-          </span>
-        </>
-      );
-    } else if (translated) {
-      return (
-        <p className="text-xs font-semibold text-gray-light">
-          <FormattedMessage {...messages.TranslationFailed} />
-        </p>
-      );
-    }
-  }
-
-  function pollOptions() {
-    if (ev.kind !== EventKind.Polls) return;
-
-    return <Poll ev={ev} />;
+    return handleNonTextNote(ev);
  }

  function content() {
-    if (waitUntilInView && !inView) return undefined;
+    if (waitUntilInView && !inView) return null;
    return (
      <>
-        {options.showHeader && <NoteHeader ev={ev} options={options} setTranslated={setTranslated} />}
-        <div className="body" onClick={e => goToEvent(e, ev, true)}>
+        {optionsMerged.showHeader && <NoteHeader ev={ev} options={optionsMerged} setTranslated={setTranslated} />}
+        <div className="body" onClick={e => goToEvent(e, ev)}>
          <NoteText {...props} translated={translated} showTranslation={showTranslation} />
-          {translation()}
-          {pollOptions()}
+          {translated && <TranslationInfo translated={translated} setShowTranslation={setShowTranslation} />}
+          {ev.kind === EventKind.Polls && <Poll ev={ev} />}
        </div>
-        {options.showFooter && <NoteFooter ev={ev} replies={props.threadChains?.get(chainKey(ev))?.length} />}
+        {optionsMerged.showFooter && <NoteFooter ev={ev} replies={props.threadChains?.get(chainKey(ev))?.length} />}
      </>
    );
  }

-  const note = (
+  const noteElement = (
    <div
      className={classNames(baseClassName, {
        active: highlight,
@ -152,5 +73,63 @@ export function Note(props: NoteProps) {
    </div>
  );

-  return !ignoreModeration && isEventMuted(ev) ? <HiddenNote>{note}</HiddenNote> : note;
+  return !ignoreModeration && isEventMuted(ev) ? <HiddenNote>{noteElement}</HiddenNote> : noteElement;
+}
+
+function useGoToEvent(props, options) {
+  const navigate = useNavigate();
+  return useCallback(
+    (e, eTarget) => {
+      if (options?.canClick === false) {
+        return;
+      }
+
+      let target = e.target as HTMLElement | null;
+      while (target) {
+        if (
+          target.tagName === "A" ||
+          target.tagName === "BUTTON" ||
+          target.classList.contains("reaction-pill") ||
+          target.classList.contains("szh-menu-container")
+        ) {
+          return;
+        }
+        target = target.parentElement;
+      }
+
+      e.stopPropagation();
+      if (props.onClick) {
+        props.onClick(eTarget);
+        return;
+      }
+
+      const link = NostrLink.fromEvent(eTarget);
+      if (e.metaKey) {
+        window.open(`/${link.encode(CONFIG.eventLinkPrefix)}`, "_blank");
+      } else {
+        navigate(`/${link.encode(CONFIG.eventLinkPrefix)}`, { state: eTarget });
+      }
+    },
+    [navigate, props, options],
+  );
+}
+
+function handleNonTextNote(ev) {
+  const alt = findTag(ev, "alt");
+  if (alt) {
+    return (
+      <div className="note-quote">
+        <Text id={ev.id} content={alt} tags={[]} creator={ev.pubkey} />
+      </div>
+    );
+  } else {
+    return (
+      <>
+        <h4>
+          <FormattedMessage {...messages.UnknownEventKind} values={{ kind: ev.kind }} />
+        </h4>
+        <pre>{JSON.stringify(ev, undefined, "  ")}</pre>
+      </>
+    );
+  }
 }
--- a/packages/app/src/Components/Event/Note/NoteQuote.tsx
+++ b/packages/app/src/Components/Event/Note/NoteQuote.tsx
@ -4,6 +4,11 @@ import { useEventFeed } from "@snort/system-react";
 import Note from "@/Components/Event/EventComponent";
 import PageSpinner from "@/Components/PageSpinner";

+const options = {
+  showFooter: false,
+  truncate: true,
+};
+
 export default function NoteQuote({ link, depth }: { link: NostrLink; depth?: number }) {
  const ev = useEventFeed(link);
  if (!ev.data)
@ -12,15 +17,5 @@ export default function NoteQuote({ link, depth }: { link: NostrLink; depth?: nu
        <PageSpinner />
      </div>
    );
-  return (
-    <Note
-      data={ev.data}
-      className="note-quote"
-      depth={(depth ?? 0) + 1}
-      options={{
-        showFooter: false,
-        truncate: true,
-      }}
-    />
-  );
+  return <Note data={ev.data} className="note-quote" depth={(depth ?? 0) + 1} options={options} />;
 }
--- a/packages/app/src/Components/Event/Note/TranslationInfo.tsx
+++ b/packages/app/src/Components/Event/Note/TranslationInfo.tsx
@ -0,0 +1,34 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { NoteTranslation } from "@/Components/Event/Note/NoteContextMenu";
+import messages from "@/Components/messages";
+
+interface TranslationInfoProps {
+  translated: NoteTranslation;
+  setShowTranslation: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export function TranslationInfo({ translated, setShowTranslation }: TranslationInfoProps) {
+  if (translated && translated.confidence > 0.5) {
+    return (
+      <>
+        <span
+          className="text-xs font-semibold text-gray-light select-none"
+          onClick={e => {
+            e.stopPropagation();
+            setShowTranslation(show => !show);
+          }}>
+          <FormattedMessage {...messages.TranslatedFrom} values={{ lang: translated.fromLanguage }} />
+        </span>
+      </>
+    );
+  } else if (translated) {
+    return (
+      <p className="text-xs font-semibold text-gray-light">
+        <FormattedMessage {...messages.TranslationFailed} />
+      </p>
+    );
+  }
+  return null;
+}
--- a/packages/app/src/Components/Feed/Articles.tsx
+++ b/packages/app/src/Components/Feed/Articles.tsx
@ -6,6 +6,10 @@ import { orderDescending } from "@/Utils";

 import Note from "../Event/EventComponent";

+const options = {
+  longFormPreview: true,
+};
+
 export default function Articles() {
  const data = useArticles();
  const deck = useContext(DeckContext);
@ -16,9 +20,7 @@ export default function Articles() {
        <Note
          data={a}
          key={a.id}
-          options={{
-            longFormPreview: true,
-          }}
+          options={options}
          onClick={ev => {
            deck?.setArticle(ev);
          }}
--- a/packages/app/src/Components/Trending/TrendingPosts.tsx
+++ b/packages/app/src/Components/Trending/TrendingPosts.tsx
@ -1,7 +1,7 @@
 import { removeUndefined } from "@snort/shared";
 import { NostrEvent, NostrLink, TaggedNostrEvent } from "@snort/system";
 import classNames from "classnames";
-import { useState } from "react";
+import { useMemo, useState } from "react";

 import { ErrorOrOffline } from "@/Components/ErrorOrOffline";
 import Note from "@/Components/Event/EventComponent";
@ -41,6 +41,18 @@ export default function TrendingNotes({ count = Infinity, small = false }: { cou
    );
  });

+  const options = useMemo(
+    () => ({
+      showFooter: !small,
+      showReactionsLink: !small,
+      showMedia: !small,
+      longFormPreview: !small,
+      truncate: small,
+      showContextMenu: !small,
+    }),
+    [small],
+  );
+
  const login = useLogin();
  const displayAsInitial = small ? "list" : login.feedDisplayAs ?? "list";
  const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
@ -69,23 +81,11 @@ export default function TrendingNotes({ count = Infinity, small = false }: { cou
  };

  const renderList = () => {
-    return filteredAndLimitedPosts.map(e =>
+    return filteredAndLimitedPosts.map((e, index) =>
      small ? (
        <ShortNote key={e.id} event={e as TaggedNostrEvent} />
      ) : (
-        <Note
-          key={e.id}
-          data={e as TaggedNostrEvent}
-          depth={0}
-          options={{
-            showFooter: !small,
-            showReactionsLink: !small,
-            showMedia: !small,
-            longFormPreview: !small,
-            truncate: small,
-            showContextMenu: !small,
-          }}
-        />
+        <Note key={e.id} data={e as TaggedNostrEvent} depth={0} options={options} waitUntilInView={index > 5} />
      ),
    );
  };
--- a/packages/app/src/Components/User/Bookmarks.tsx
+++ b/packages/app/src/Components/User/Bookmarks.tsx
@ -19,6 +19,10 @@ const Bookmarks = ({ pubkey, bookmarks }: BookmarksProps) => {
  const ps = useMemo(() => {
    return [...new Set(bookmarks.map(ev => ev.pubkey))];
  }, [bookmarks]);
+  const options = useMemo(
+    () => ({ showTime: false, showBookmarked: true, canUnbookmark: publicKey === pubkey }),
+    [publicKey, pubkey],
+  );

  function renderOption(p: HexKey) {
    const profile = UserCache.getFromCache(p);
@ -41,13 +45,7 @@ const Bookmarks = ({ pubkey, bookmarks }: BookmarksProps) => {
      {bookmarks
        .filter(b => (onlyPubkey === "all" ? true : b.pubkey === onlyPubkey))
        .map(n => {
-          return (
-            <Note
-              key={n.id}
-              data={n}
-              options={{ showTime: false, showBookmarked: true, canUnbookmark: publicKey === pubkey }}
-            />
-          );
+          return <Note key={n.id} data={n} options={options} />;
        })}
    </>
  );
--- a/packages/app/src/lang.json
+++ b/packages/app/src/lang.json
@ -1033,6 +1033,9 @@
    "defaultMessage": "Redeem",
    "description": "Button: Redeem Cashu token"
  },
+  "Y7FG5M": {
+    "defaultMessage": "Image not available"
+  },
  "YDURw6": {
    "defaultMessage": "Service URL"
  },
--- a/packages/app/src/translations/en.json
+++ b/packages/app/src/translations/en.json
@ -340,6 +340,7 @@
  "Xnimz0": "Sending from <b>{wallet}</b>",
  "Xopqkl": "Your default zap amount is {number} sats, example values are calculated from this.",
  "XrSk2j": "Redeem",
+  "Y7FG5M": "Image not available",
  "YDURw6": "Service URL",
  "YR2I9M": "No keys, no {app}, There is no way to reset it if you don't back up. It only takes a minute.",
  "YXA3AH": "Enable reactions",