fix: remove removed messages from reply bar

fixes #71
fixes #143
This commit is contained in:
Paul 2021-11-14 19:30:41 +00:00
parent 74e786053e
commit fb1de01edd

View file

@ -81,10 +81,11 @@ const Base = styled.div`
`; `;
// ! FIXME: Move to global config // ! FIXME: Move to global config
const MAX_REPLIES = 4; const MAX_REPLIES = 5;
export default observer(({ channel, replies, setReplies }: Props) => { export default observer(({ channel, replies, setReplies }: Props) => {
const client = useClient(); const client = channel.client;
// Event listener for adding new messages to reply bar.
useEffect(() => { useEffect(() => {
return internalSubscribe("ReplyBar", "add", (_message) => { return internalSubscribe("ReplyBar", "add", (_message) => {
const message = _message as Message; const message = _message as Message;
@ -107,26 +108,24 @@ export default observer(({ channel, replies, setReplies }: Props) => {
}); });
}, [replies, setReplies, client.user]); }, [replies, setReplies, client.user]);
const renderer = getRenderer(channel); // Map all the replies to messages we are aware of.
if (renderer.state !== "RENDER") return null; const messages = replies.map((x) => client.messages.get(x.id));
const ids = replies.map((x) => x.id); // Remove any replies which don't resolve to valid messages.
const messages = renderer.messages.filter((x) => ids.includes(x._id)); useEffect(() => {
if (messages.includes(undefined)) {
setReplies(
replies.filter((_, i) => typeof messages[i] !== "undefined"),
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [messages, replies, setReplies]);
return ( return (
<div> <div>
{replies.map((reply, index) => { {replies.map((reply, index) => {
const message = messages.find((x) => reply.id === x._id); const message = messages[index];
// ! FIXME: better solution would be to if (!message) return null;
// ! have a hook for resolving messages from
// ! render state along with relevant users
// -> which then fetches any unknown messages
if (!message)
return (
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
);
return ( return (
<Base key={reply.id}> <Base key={reply.id}>