64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import { UpArrowAlt } from "@styled-icons/boxicons-regular";
|
|
import { observer } from "mobx-react-lite";
|
|
import { useHistory } from "react-router-dom";
|
|
import { Channel } from "revolt.js/dist/maps/Channels";
|
|
import { decodeTime } from "ulid";
|
|
|
|
import { Text } from "preact-i18n";
|
|
import { useEffect, useState } from "preact/hooks";
|
|
|
|
import { internalSubscribe } from "../../../../lib/eventEmitter";
|
|
import { getRenderer } from "../../../../lib/renderer/Singleton";
|
|
|
|
import { dayjs } from "../../../../context/Locale";
|
|
|
|
import { Bar } from "./JumpToBottom";
|
|
|
|
export default observer(
|
|
({ channel, last_id }: { channel: Channel; last_id?: string }) => {
|
|
const [hidden, setHidden] = useState(false);
|
|
const hide = () => setHidden(true);
|
|
|
|
useEffect(() => setHidden(false), [last_id]);
|
|
useEffect(() => internalSubscribe("NewMessages", "hide", hide), []);
|
|
useEffect(() => {
|
|
const onKeyDown = (e: KeyboardEvent) =>
|
|
e.key === "Escape" && hide();
|
|
|
|
document.addEventListener("keydown", onKeyDown);
|
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
}, []);
|
|
|
|
const renderer = getRenderer(channel);
|
|
const history = useHistory();
|
|
if (renderer.state !== "RENDER") return null;
|
|
if (!last_id) return null;
|
|
if (hidden) return null;
|
|
|
|
return (
|
|
<Bar position="top" accent>
|
|
<div
|
|
onClick={() => {
|
|
setHidden(true);
|
|
if (channel.channel_type === "TextChannel") {
|
|
history.push(
|
|
`/server/${channel.server_id}/channel/${channel._id}/${last_id}`,
|
|
);
|
|
} else {
|
|
history.push(`/channel/${channel._id}/${last_id}`);
|
|
}
|
|
}}>
|
|
<div>
|
|
<Text id="app.main.channel.misc.new_messages" />{" "}
|
|
{dayjs(decodeTime(last_id)).fromNow()}
|
|
</div>
|
|
<div>
|
|
<Text id="app.main.channel.misc.jump_beginning" />
|
|
<UpArrowAlt size={20} />
|
|
</div>
|
|
</div>
|
|
</Bar>
|
|
);
|
|
},
|
|
);
|