split notefooter into smaller components, CONFIG.showPowIcon

2024-01-11 23:04:36 +02:00
parent edca8a9636
commit 649bab228b
10 changed files with 218 additions and 164 deletions
--- a/packages/app/src/Components/Event/Note/NoteFooter/RepostButton.tsx
+++ b/packages/app/src/Components/Event/Note/NoteFooter/RepostButton.tsx
@ -0,0 +1,75 @@
+import { TaggedNostrEvent } from "@snort/system";
+import { Menu, MenuItem } from "@szhsin/react-menu";
+import classNames from "classnames";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { AsyncFooterIcon } from "@/Components/Event/Note/NoteFooter/AsyncFooterIcon";
+import Icon from "@/Components/Icons/Icon";
+import messages from "@/Components/messages";
+import useEventPublisher from "@/Hooks/useEventPublisher";
+import { useInteractionCache } from "@/Hooks/useInteractionCache";
+import useLogin from "@/Hooks/useLogin";
+import { useNoteCreator } from "@/State/NoteCreator";
+
+export const RepostButton = ({ ev, reposts }: { ev: TaggedNostrEvent; reposts: TaggedNostrEvent[] }) => {
+  const { formatMessage } = useIntl();
+  const { publisher, system } = useEventPublisher();
+  const { publicKey, preferences: prefs } = useLogin(s => ({
+    preferences: s.appData.item.preferences,
+    publicKey: s.publicKey,
+  }));
+  const interactionCache = useInteractionCache(publicKey, ev.id);
+  const note = useNoteCreator(n => ({ show: n.show, replyTo: n.replyTo, update: n.update, quote: n.quote }));
+
+  const hasReposted = () => {
+    return interactionCache.data.reposted || reposts.some(a => a.pubkey === publicKey);
+  };
+
+  const repost = async () => {
+    if (!hasReposted() && publisher) {
+      if (!prefs.confirmReposts || window.confirm(formatMessage(messages.ConfirmRepost, { id: ev.id }))) {
+        const evRepost = await publisher.repost(ev);
+        system.BroadcastEvent(evRepost);
+        await interactionCache.repost();
+      }
+    }
+  };
+
+  return (
+    <Menu
+      menuButton={
+        <AsyncFooterIcon
+          className={classNames(
+            "flex-none min-w-[50px] md:min-w-[80px]",
+            hasReposted() ? "reacted text-nostr-blue" : "hover:text-nostr-blue",
+          )}
+          iconName="repeat"
+          title={formatMessage({ defaultMessage: "Repost", id: "JeoS4y" })}
+          value={reposts.length}
+        />
+      }
+      menuClassName="ctx-menu"
+      align="start">
+      <div className="close-menu-container">
+        <MenuItem>
+          <div className="close-menu" />
+        </MenuItem>
+      </div>
+      <MenuItem onClick={repost} disabled={hasReposted()}>
+        <Icon name="repeat" />
+        <FormattedMessage defaultMessage="Repost" id="JeoS4y" />
+      </MenuItem>
+      <MenuItem
+        onClick={() =>
+          note.update(n => {
+            n.reset();
+            n.quote = ev;
+            n.show = true;
+          })
+        }>
+        <Icon name="edit" />
+        <FormattedMessage defaultMessage="Quote Repost" id="C7642/" />
+      </MenuItem>
+    </Menu>
+  );
+};