From 0e3661afc6fe4f57b291b985088004b8a576851c Mon Sep 17 00:00:00 2001 From: Kieran Date: Sat, 21 Oct 2023 21:45:50 +0100 Subject: [PATCH] fix: note broadcaster bug / createPortal for modal --- .../app/src/Element/Event/NoteCreator.tsx | 42 ++++++++++--------- .../src/Element/Event/NoteCreatorButton.tsx | 13 +++--- packages/app/src/Element/Event/NoteFooter.tsx | 9 ++-- packages/app/src/Element/Modal.tsx | 6 +-- packages/app/src/Toaster.tsx | 6 +-- 5 files changed, 37 insertions(+), 39 deletions(-) diff --git a/packages/app/src/Element/Event/NoteCreator.tsx b/packages/app/src/Element/Event/NoteCreator.tsx index 7616bd66..cc1a71d3 100644 --- a/packages/app/src/Element/Event/NoteCreator.tsx +++ b/packages/app/src/Element/Event/NoteCreator.tsx @@ -307,18 +307,18 @@ export function NoteCreator() { onChange={e => { note.update( v => - (v.selectedCustomRelays = - // set false if all relays selected - e.target.checked && + (v.selectedCustomRelays = + // set false if all relays selected + e.target.checked && note.selectedCustomRelays && note.selectedCustomRelays.length == a.length - 1 - ? undefined - : // otherwise return selectedCustomRelays with target relay added / removed - a.filter(el => - el === r - ? e.target.checked - : !note.selectedCustomRelays || note.selectedCustomRelays.includes(el), - )), + ? undefined + : // otherwise return selectedCustomRelays with target relay added / removed + a.filter(el => + el === r + ? e.target.checked + : !note.selectedCustomRelays || note.selectedCustomRelays.includes(el), + )), ); }} /> @@ -387,9 +387,9 @@ export function NoteCreator() { onChange={e => note.update( v => - (v.zapSplits = arr.map((vv, ii) => - ii === i ? { ...vv, weight: Number(e.target.value) } : vv, - )), + (v.zapSplits = arr.map((vv, ii) => + ii === i ? { ...vv, weight: Number(e.target.value) } : vv, + )), ) } /> @@ -570,18 +570,20 @@ export function NoteCreator() { ); } + function reset() { + note.update(v => { + v.reset(); + v.show = false; + }); + } + if (!note.show) return null; return ( - note.update(v => (v.show = false))}> + {note.sending && ( { - note.update(n => { - n.reset(); - n.show = false; - }); - }} + onClose={reset} customRelays={note.selectedCustomRelays} /> )} diff --git a/packages/app/src/Element/Event/NoteCreatorButton.tsx b/packages/app/src/Element/Event/NoteCreatorButton.tsx index 9ac30a64..2d249b0d 100644 --- a/packages/app/src/Element/Event/NoteCreatorButton.tsx +++ b/packages/app/src/Element/Event/NoteCreatorButton.tsx @@ -1,6 +1,7 @@ import "./NoteCreatorButton.css"; import { useRef, useMemo } from "react"; import { useLocation } from "react-router-dom"; +import classNames from "classnames"; import { isFormElement } from "SnortUtils"; import useKeyboardShortcut from "Hooks/useKeyboardShortcut"; @@ -8,7 +9,6 @@ import useLogin from "Hooks/useLogin"; import Icon from "Icons/Icon"; import { useNoteCreator } from "State/NoteCreator"; import { NoteCreator } from "./NoteCreator"; -import classNames from "classnames"; export const NoteCreatorButton = ({ className }: { className?: string }) => { const buttonRef = useRef(null); @@ -27,15 +27,14 @@ export const NoteCreatorButton = ({ className }: { className?: string }) => { }); const shouldHideNoteCreator = useMemo(() => { - const isReplyNoteCreatorShowing = replyTo && show; - const hideOn = ["/settings", "/messages", "/new", "/login", "/donate", "/e", "/subscribe"]; - return readonly || isReplyNoteCreatorShowing || hideOn.some(a => location.pathname.startsWith(a)); + const isReply = replyTo && show; + const hideOn = ["/settings", "/messages", "/new", "/login", "/donate", "/e", "/nevent", "/note1", "/naddr", "/subscribe"]; + return (readonly || hideOn.some(a => location.pathname.startsWith(a))) && !isReply; }, [location, readonly]); - if (shouldHideNoteCreator) return null; return ( <> - + } ); diff --git a/packages/app/src/Element/Event/NoteFooter.tsx b/packages/app/src/Element/Event/NoteFooter.tsx index 4a218cac..523297c7 100644 --- a/packages/app/src/Element/Event/NoteFooter.tsx +++ b/packages/app/src/Element/Event/NoteFooter.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { forwardRef, useEffect, useState } from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { useLongPress } from "use-long-press"; import { TaggedNostrEvent, ParsedZap, countLeadingZeros, NostrLink } from "@snort/system"; @@ -10,7 +10,6 @@ import classNames from "classnames"; import { formatShort } from "Number"; import useEventPublisher from "Hooks/useEventPublisher"; import { delay, findTag, getDisplayName } from "SnortUtils"; -import { NoteCreator } from "Element/Event/NoteCreator"; import SendSats from "Element/SendSats"; import { ZapsSummary } from "Element/Event/Zap"; import { AsyncIcon, AsyncIconProps } from "Element/AsyncIcon"; @@ -58,7 +57,6 @@ export default function NoteFooter(props: NoteFooterProps) { const interactionCache = useInteractionCache(publicKey, ev.id); const { publisher, system } = useEventPublisher(); const note = useNoteCreator(n => ({ show: n.show, replyTo: n.replyTo, update: n.update, quote: n.quote })); - const willRenderNoteCreator = note.show && (note.replyTo?.id === ev.id || note.quote); const [tip, setTip] = useState(false); const [zapping, setZapping] = useState(false); const walletState = useWallet(); @@ -303,7 +301,6 @@ export default function NoteFooter(props: NoteFooterProps) { {tipButton()} {powIcon()} - {willRenderNoteCreator && } setTip(false)} show={tip} note={ev.id} allocatePool={true} /> @@ -311,7 +308,7 @@ export default function NoteFooter(props: NoteFooterProps) { ); } -function AsyncFooterIcon(props: AsyncIconProps & { value: number }) { +const AsyncFooterIcon = forwardRef((props: AsyncIconProps & { value: number }) => { const mergedProps = { ...props, iconSize: 18, @@ -322,4 +319,4 @@ function AsyncFooterIcon(props: AsyncIconProps & { value: number }) { {props.value > 0 &&
{formatShort(props.value)}
} ); -} +}); diff --git a/packages/app/src/Element/Modal.tsx b/packages/app/src/Element/Modal.tsx index f0c6c57f..073d9f90 100644 --- a/packages/app/src/Element/Modal.tsx +++ b/packages/app/src/Element/Modal.tsx @@ -1,3 +1,4 @@ +import { createPortal } from "react-dom"; import "./Modal.css"; import { ReactNode, useEffect } from "react"; @@ -26,7 +27,7 @@ export default function Modal(props: ModalProps) { }; }, []); - return ( + return createPortal(
-
- ); +
, document.body); } diff --git a/packages/app/src/Toaster.tsx b/packages/app/src/Toaster.tsx index 1d45a177..7e1ffe05 100644 --- a/packages/app/src/Toaster.tsx +++ b/packages/app/src/Toaster.tsx @@ -1,4 +1,5 @@ import { ReactNode, useSyncExternalStore } from "react"; +import { createPortal } from "react-dom"; import { v4 as uuid } from "uuid"; import { ExternalStore, unixNow } from "@snort/shared"; @@ -42,7 +43,7 @@ export default function Toaster() { () => Toastore.snapshot(), ); - return ( + return createPortal(
{toast.map(a => (
@@ -50,6 +51,5 @@ export default function Toaster() { {a.element}
))} -
- ); + , document.body); }