Remember whether reply was a mention or not.

Fix input modals refreshing page.
This commit is contained in:
Paul 2021-08-14 21:37:43 +01:00
parent 8609a1f016
commit f59d0efbcb
2 changed files with 41 additions and 23 deletions

View file

@ -11,6 +11,7 @@ import { StateUpdater, useEffect } from "preact/hooks";
import { internalSubscribe } from "../../../../lib/eventEmitter"; import { internalSubscribe } from "../../../../lib/eventEmitter";
import { getRenderer } from "../../../../lib/renderer/Singleton"; import { getRenderer } from "../../../../lib/renderer/Singleton";
import { dispatch, getState } from "../../../../redux";
import { Reply } from "../../../../redux/reducers/queue"; import { Reply } from "../../../../redux/reducers/queue";
import IconButton from "../../../ui/IconButton"; import IconButton from "../../../ui/IconButton";
@ -75,7 +76,7 @@ const Base = styled.div`
`; `;
// ! FIXME: Move to global config // ! FIXME: Move to global config
const MAX_REPLIES = 5; const MAX_REPLIES = 4;
export default observer(({ channel, replies, setReplies }: Props) => { export default observer(({ channel, replies, setReplies }: Props) => {
useEffect(() => { useEffect(() => {
return internalSubscribe( return internalSubscribe(
@ -84,7 +85,13 @@ export default observer(({ channel, replies, setReplies }: Props) => {
(id) => (id) =>
replies.length < MAX_REPLIES && replies.length < MAX_REPLIES &&
!replies.find((x) => x.id === id) && !replies.find((x) => x.id === id) &&
setReplies([...replies, { id: id as string, mention: false }]), setReplies([
...replies,
{
id: id as string,
mention: getState().sectionToggle.mention ?? false,
},
]),
); );
}, [replies, setReplies]); }, [replies, setReplies]);
@ -147,15 +154,28 @@ export default observer(({ channel, replies, setReplies }: Props) => {
</ReplyBase> </ReplyBase>
<span class="actions"> <span class="actions">
<IconButton <IconButton
onClick={() => onClick={() => {
let state = false;
setReplies( setReplies(
replies.map((_, i) => replies.map((_, i) => {
i === index if (i === index) {
? { ..._, mention: !_.mention } state = !_.mention;
: _, return {
), ..._,
) mention: !_.mention,
}> };
}
return _;
}),
);
dispatch({
type: "SECTION_TOGGLE_SET",
id: "mention",
state,
});
}}>
<span class="toggle"> <span class="toggle">
<At size={16} />{" "} <At size={16} />{" "}
{reply.mention ? "ON" : "OFF"} {reply.mention ? "ON" : "OFF"}

View file

@ -57,19 +57,17 @@ export function InputModal({
}, },
]} ]}
onClose={onClose}> onClose={onClose}>
<form> {field ? (
{field ? ( <Overline error={error} block>
<Overline error={error} block> {field}
{field} </Overline>
</Overline> ) : (
) : ( error && <Overline error={error} type="error" block />
error && <Overline error={error} type="error" block /> )}
)} <InputBox
<InputBox value={value}
value={value} onChange={(e) => setValue(e.currentTarget.value)}
onChange={(e) => setValue(e.currentTarget.value)} />
/>
</form>
</Modal> </Modal>
); );
} }