diff --git a/packages/client/src/components/Context.tsx b/packages/client/src/components/Context.tsx index c6a38483..fe685d9b 100644 --- a/packages/client/src/components/Context.tsx +++ b/packages/client/src/components/Context.tsx @@ -5,11 +5,11 @@ import { VerdantContext } from '../verdant.js'; import { ClientDescriptor } from '@verdant-web/store'; import { AppPreviewNotice, - Essentials, PrereleaseWarning, TopLoader, VerdantProfile, } from '../index.js'; +import { Essentials } from './Essentials.js'; import { graphqlClient as defaultClient } from '../index.js'; import { GlobalSyncingIndicator } from './GlobalSyncingIndicator.js'; diff --git a/packages/client/src/components/Essentials.tsx b/packages/client/src/components/Essentials.tsx index 00485177..c84a62ef 100644 --- a/packages/client/src/components/Essentials.tsx +++ b/packages/client/src/components/Essentials.tsx @@ -1,4 +1,5 @@ import { LogoutNotice } from './LogoutNotice.js'; +import { ResetNotifier } from './ResetNotifier.js'; import { SubscriptionExpiredDialog } from './SubscriptionExpiredDialog.js'; import { TosPrompt } from './TosPrompt.js'; @@ -8,6 +9,7 @@ export function Essentials() { + > ); } diff --git a/packages/client/src/components/ResetNotifier.tsx b/packages/client/src/components/ResetNotifier.tsx new file mode 100644 index 00000000..21576f47 --- /dev/null +++ b/packages/client/src/components/ResetNotifier.tsx @@ -0,0 +1,54 @@ +import { useContext, useEffect, useState } from 'react'; +import { VerdantContext } from '../verdant.js'; +import { + Dialog, + DialogActions, + DialogClose, + DialogContent, + DialogTitle, +} from '@a-type/ui/components/dialog'; +import { P } from '@a-type/ui/components/typography'; +import { Button } from '@a-type/ui/components/button'; + +export interface ResetNotifierProps {} + +export function ResetNotifier({}: ResetNotifierProps) { + const [shown, setShown] = useState(false); + const clientDesc = useContext(VerdantContext); + useEffect(() => { + if (!clientDesc?.current) return; + const client = clientDesc.current; + return client.subscribe('resetToServer', () => { + setShown(true); + }); + }, [clientDesc]); + + const [waiting, setWaiting] = useState(false); + useEffect(() => { + if (shown) { + setWaiting(true); + const timeout = setTimeout(() => { + setWaiting(false); + setShown(false); + }, 5000); + return () => clearTimeout(timeout); + } + }, [shown]); + + return ( + + + Catching up... + + It's been a while since you've used this app. Fetching the latest data + from the server! + + + + Ok + + + + + ); +}
+ It's been a while since you've used this app. Fetching the latest data + from the server! +