for-legacy-web/src/components/navigation/items/ConnectionStatus.tsx

46 lines
1.2 KiB
TypeScript

import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { Banner } from "@revoltchat/ui";
import {
ClientStatus,
StatusContext,
useClient,
} from "../../../context/revoltjs/RevoltClient";
export default function ConnectionStatus() {
const status = useContext(StatusContext);
const client = useClient();
if (status === ClientStatus.OFFLINE) {
return (
<Banner>
<Text id="app.special.status.offline" />
</Banner>
);
} else if (status === ClientStatus.DISCONNECTED) {
return (
<Banner>
<Text id="app.special.status.disconnected" /> <br />
<a onClick={() => client.websocket.connect()}>
<Text id="app.special.status.reconnect" />
</a>
</Banner>
);
} else if (status === ClientStatus.CONNECTING) {
return (
<Banner>
<Text id="app.special.status.connecting" />
</Banner>
);
} else if (status === ClientStatus.RECONNECTING) {
return (
<Banner>
<Text id="app.special.status.reconnecting" />
</Banner>
);
}
return null;
}