alex/snort3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: note broadcaster bug / createPortal for modal

Browse Source
This commit is contained in:
Kieran 2023-10-21 21:45:50 +01:00
parent c1ea68b296
commit 0e3661afc6
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
5 changed files with 37 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/app/src/Element/Event/NoteCreator.tsx
View File

@ -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 (
<Modal id="note-creator" className="note-creator-modal" onClose={() => note.update(v => (v.show = false))}>
<Modal id="note-creator" className="note-creator-modal" onClose={reset}>
{note.sending && (
<NoteBroadcaster
evs={note.sending}
onClose={() => {
note.update(n => {
n.reset();
n.show = false;
});
}}
onClose={reset}
customRelays={note.selectedCustomRelays}
/>
)}

13
packages/app/src/Element/Event/NoteCreatorButton.tsx
View File

@ -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<HTMLButtonElement>(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 (
<>
<button
{!shouldHideNoteCreator && <button
ref={buttonRef}
className={classNames("primary circle", className)}
onClick={() =>
@ -45,7 +44,7 @@ export const NoteCreatorButton = ({ className }: { className?: string }) => {
})
}>
<Icon name="plus" size={16} />
</button>
</button>}
<NoteCreator key="global-note-creator" />
</>
);

9
packages/app/src/Element/Event/NoteFooter.tsx
View File

@ -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()}
</div>
{willRenderNoteCreator && <NoteCreator key={`note-creator-${ev.id}`} />}
<SendSats targets={getZapTarget()} onClose={() => setTip(false)} show={tip} note={ev.id} allocatePool={true} />
</div>
<ZapsSummary zaps={zaps} />
@ -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 && <div className="reaction-pill-number">{formatShort(props.value)}</div>}
</AsyncIcon>
);
}
});

6
packages/app/src/Element/Modal.tsx
View File

@ -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(
<div className={`modal${props.className ? ` ${props.className}` : ""}`} onClick={props.onClose}>
<div className="modal-body" onClick={props.onClose}>
<div
@ -37,6 +38,5 @@ export default function Modal(props: ModalProps) {
{props.children}
</div>
</div>
</div>
);
</div>, document.body);
}

6
packages/app/src/Toaster.tsx
View File

@ -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(
<div className="toaster">
{toast.map(a => (
<div className="card flex" key={a.id}>
@ -50,6 +51,5 @@ export default function Toaster() {
{a.element}
</div>
))}
</div>
);
</div>, document.body);
}