open reactions modal from note footer zappers list

packages/app/src/Components/Event/Note/NoteFooter/FooterZapButton.tsx

@@ -20,9 +20,10 @@ import { useWallet } from "@/Wallet";
 export interface ZapIconProps {
   ev: TaggedNostrEvent;
   zaps: Array<ParsedZap>;
+  onClickZappers?: () => void;
 }
 
-export const FooterZapButton = ({ ev, zaps }: ZapIconProps) => {
+export const FooterZapButton = ({ ev, zaps, onClickZappers }: ZapIconProps) => {
   const {
     publicKey,
     readonly,
@@ -142,7 +143,7 @@ export const FooterZapButton = ({ ev, zaps }: ZapIconProps) => {
               value={zapTotal}
               onClick={fastZap}
             />
-            <ZapsSummary zaps={zaps} />
+            <ZapsSummary zaps={zaps} onClick={onClickZappers} />
           </div>
           {showZapModal && (
             <ZapModal

packages/app/src/Components/Event/Note/NoteFooter/NoteFooter.tsx

@@ -1,12 +1,13 @@
 import { NostrLink, TaggedNostrEvent } from "@snort/system";
 import { useEventReactions, useReactions } from "@snort/system-react";
-import { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 
 import { FooterZapButton } from "@/Components/Event/Note/NoteFooter/FooterZapButton";
 import { LikeButton } from "@/Components/Event/Note/NoteFooter/LikeButton";
 import { PowIcon } from "@/Components/Event/Note/NoteFooter/PowIcon";
 import { ReplyButton } from "@/Components/Event/Note/NoteFooter/ReplyButton";
 import { RepostButton } from "@/Components/Event/Note/NoteFooter/RepostButton";
+import ReactionsModal from "@/Components/Event/Note/ReactionsModal";
 import useLogin from "@/Hooks/useLogin";
 
 export interface NoteFooterProps {
@@ -18,6 +19,7 @@ export default function NoteFooter(props: NoteFooterProps) {
   const { ev } = props;
   const link = useMemo(() => NostrLink.fromEvent(ev), [ev.id]);
   const ids = useMemo(() => [link], [link]);
+  const [showReactions, setShowReactions] = useState(false);
 
   const related = useReactions("note:reactions", ids, undefined, false);
   const { reactions, zaps, reposts } = useEventReactions(link, related);
@@ -35,7 +37,8 @@ export default function NoteFooter(props: NoteFooterProps) {
       {!readonly && <RepostButton ev={ev} reposts={reposts} />}
       {prefs.enableReactions && <LikeButton ev={ev} positiveReactions={positive} />}
       {CONFIG.showPowIcon && <PowIcon ev={ev} />}
-      <FooterZapButton ev={ev} zaps={zaps} />
+      <FooterZapButton ev={ev} zaps={zaps} onClickZappers={() => setShowReactions(true)} />
+      {showReactions && <ReactionsModal onClose={() => setShowReactions(false)} event={ev} />}
     </div>
   );
 }

packages/app/src/Components/Event/Note/NoteHeader.tsx

@@ -84,7 +84,7 @@ export default function NoteHeader(props: {
           />
         )}
       </div>
-      <ReactionsModal show={showReactions} setShow={setShowReactions} event={ev} />
+      {showReactions && <ReactionsModal onClose={() => setShowReactions(false)} event={ev} />}
     </div>
   );
 }

packages/app/src/Components/Event/Note/ReactionsModal.tsx

@@ -2,7 +2,7 @@ import "./ReactionsModal.css";
 
 import { NostrLink, socialGraphInstance, TaggedNostrEvent } from "@snort/system";
 import { useEventReactions, useReactions } from "@snort/system-react";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CloseButton from "@/Components/Button/CloseButton";
@@ -15,14 +15,12 @@ import { formatShort } from "@/Utils/Number";
 import messages from "../../messages";
 
 interface ReactionsModalProps {
-  show: boolean;
-  setShow(b: boolean): void;
+  onClose(): void;
   event: TaggedNostrEvent;
 }
 
-const ReactionsModal = ({ show, setShow, event }: ReactionsModalProps) => {
+const ReactionsModal = ({ onClose, event }: ReactionsModalProps) => {
   const { formatMessage } = useIntl();
-  const onClose = () => setShow(false);
 
   const link = NostrLink.fromEvent(event);
 
@@ -59,12 +57,6 @@ const ReactionsModal = ({ show, setShow, event }: ReactionsModalProps) => {
 
   const [tab, setTab] = useState(tabs[0]);
 
-  useEffect(() => {
-    if (!show) {
-      setTab(tabs[0]);
-    }
-  }, [show, tabs]);
-
   const renderReactionItem = (ev, icon, size) => (
     <div key={ev.id} className="reactions-item">
       <div className="reaction-icon">
@@ -74,7 +66,7 @@ const ReactionsModal = ({ show, setShow, event }: ReactionsModalProps) => {
     </div>
   );
 
-  return show ? (
+  return (
     <Modal id="reactions" className="reactions-modal" onClose={onClose}>
       <CloseButton onClick={onClose} className="absolute right-4 top-3" />
       <div className="reactions-header">
@@ -110,7 +102,7 @@ const ReactionsModal = ({ show, setShow, event }: ReactionsModalProps) => {
         {tab.value === 3 && dislikes.map(ev => renderReactionItem(ev, "dislike"))}
       </div>
     </Modal>
-  ) : null;
+  );
 };
 
 export default ReactionsModal;