mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-02-15 10:00:06 +00:00
add sync connection status bar
This commit is contained in:
parent
4ddd07f276
commit
d0caaffbbc
src
|
@ -7,7 +7,7 @@ type ClientLayoutProps = {
|
||||||
};
|
};
|
||||||
export function ClientLayout({ nav, children }: ClientLayoutProps) {
|
export function ClientLayout({ nav, children }: ClientLayoutProps) {
|
||||||
return (
|
return (
|
||||||
<Box style={{ height: '100%' }}>
|
<Box grow="Yes">
|
||||||
<Box shrink="No">{nav}</Box>
|
<Box shrink="No">{nav}</Box>
|
||||||
<Box grow="Yes">{children}</Box>
|
<Box grow="Yes">{children}</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
@ -37,6 +37,7 @@ import { settingsAtom } from '../../state/settings';
|
||||||
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
|
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
|
||||||
import { useSyncState } from '../../hooks/useSyncState';
|
import { useSyncState } from '../../hooks/useSyncState';
|
||||||
import { stopPropagation } from '../../utils/keyboard';
|
import { stopPropagation } from '../../utils/keyboard';
|
||||||
|
import { SyncStatus } from './SyncStatus';
|
||||||
|
|
||||||
function SystemEmojiFeature() {
|
function SystemEmojiFeature() {
|
||||||
const [twitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
|
const [twitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
|
||||||
|
@ -184,6 +185,7 @@ export function ClientRoot({ children }: ClientRootProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SpecVersions baseUrl={baseUrl!}>
|
<SpecVersions baseUrl={baseUrl!}>
|
||||||
|
{mx && <SyncStatus mx={mx} />}
|
||||||
{loading && mx && <ClientRootOptions mx={mx} />}
|
{loading && mx && <ClientRootOptions mx={mx} />}
|
||||||
{(loadState.status === AsyncStatus.Error || startState.status === AsyncStatus.Error) && (
|
{(loadState.status === AsyncStatus.Error || startState.status === AsyncStatus.Error) && (
|
||||||
<SplashScreen>
|
<SplashScreen>
|
||||||
|
|
87
src/app/pages/client/SyncStatus.tsx
Normal file
87
src/app/pages/client/SyncStatus.tsx
Normal file
|
@ -0,0 +1,87 @@
|
||||||
|
import { MatrixClient, SyncState } from 'matrix-js-sdk';
|
||||||
|
import React, { useCallback, useState } from 'react';
|
||||||
|
import { Box, config, Line, Text } from 'folds';
|
||||||
|
import { useSyncState } from '../../hooks/useSyncState';
|
||||||
|
import { ContainerColor } from '../../styles/ContainerColor.css';
|
||||||
|
|
||||||
|
type StateData = {
|
||||||
|
current: SyncState | null;
|
||||||
|
previous: SyncState | null | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
type SyncStatusProps = {
|
||||||
|
mx: MatrixClient;
|
||||||
|
};
|
||||||
|
export function SyncStatus({ mx }: SyncStatusProps) {
|
||||||
|
const [stateData, setStateData] = useState<StateData>({
|
||||||
|
current: null,
|
||||||
|
previous: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
useSyncState(
|
||||||
|
mx,
|
||||||
|
useCallback((current, previous) => {
|
||||||
|
setStateData((s) => {
|
||||||
|
if (s.current === current && s.previous === previous) {
|
||||||
|
return s;
|
||||||
|
}
|
||||||
|
return { current, previous };
|
||||||
|
});
|
||||||
|
}, [])
|
||||||
|
);
|
||||||
|
|
||||||
|
if (
|
||||||
|
(stateData.current === SyncState.Prepared ||
|
||||||
|
stateData.current === SyncState.Syncing ||
|
||||||
|
stateData.current === SyncState.Catchup) &&
|
||||||
|
stateData.previous !== SyncState.Syncing
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<Box direction="Column" shrink="No">
|
||||||
|
<Box
|
||||||
|
className={ContainerColor({ variant: 'Success' })}
|
||||||
|
style={{ padding: `${config.space.S100} 0` }}
|
||||||
|
alignItems="Center"
|
||||||
|
justifyContent="Center"
|
||||||
|
>
|
||||||
|
<Text size="L400">Connecting...</Text>
|
||||||
|
</Box>
|
||||||
|
<Line variant="Success" size="300" />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (stateData.current === SyncState.Reconnecting) {
|
||||||
|
return (
|
||||||
|
<Box direction="Column" shrink="No">
|
||||||
|
<Box
|
||||||
|
className={ContainerColor({ variant: 'Warning' })}
|
||||||
|
style={{ padding: `${config.space.S100} 0` }}
|
||||||
|
alignItems="Center"
|
||||||
|
justifyContent="Center"
|
||||||
|
>
|
||||||
|
<Text size="L400">Connection Lost! Reconnecting...</Text>
|
||||||
|
</Box>
|
||||||
|
<Line variant="Warning" size="300" />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (stateData.current === SyncState.Error) {
|
||||||
|
return (
|
||||||
|
<Box direction="Column" shrink="No">
|
||||||
|
<Box
|
||||||
|
className={ContainerColor({ variant: 'Critical' })}
|
||||||
|
style={{ padding: `${config.space.S100} 0` }}
|
||||||
|
alignItems="Center"
|
||||||
|
justifyContent="Center"
|
||||||
|
>
|
||||||
|
<Text size="L400">Connection Lost!</Text>
|
||||||
|
</Box>
|
||||||
|
<Line variant="Critical" size="300" />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
|
@ -18,7 +18,7 @@ export function WelcomePage() {
|
||||||
title="Welcome to Cinny"
|
title="Welcome to Cinny"
|
||||||
subTitle={
|
subTitle={
|
||||||
<span>
|
<span>
|
||||||
Yet anothor matrix client.{' '}
|
Yet another matrix client.{' '}
|
||||||
<a
|
<a
|
||||||
href="https://github.com/cinnyapp/cinny/releases"
|
href="https://github.com/cinnyapp/cinny/releases"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
|
|
@ -409,6 +409,8 @@ body {
|
||||||
#root {
|
#root {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
|
|
Loading…
Reference in a new issue