kopia lustrzana https://github.com/Tldraw/Tldraw
109 wiersze
2.7 KiB
TypeScript
109 wiersze
2.7 KiB
TypeScript
import { ReactNode, useEffect, useRef, useState } from 'react'
|
|
import { light, styled } from '~styles'
|
|
|
|
const CONTROL_SERVER = process.env.NEXT_PUBLIC_CONTROL_SERVER
|
|
? process.env.NEXT_PUBLIC_CONTROL_SERVER
|
|
: process.env.NEXT_PUBLIC_ENABLE_DEV_CONTROL_SERVER
|
|
? 'http://localhost:3001'
|
|
: null
|
|
|
|
type MaintenanceModeConfig =
|
|
| {
|
|
enabled: false
|
|
ttlSeconds: number
|
|
}
|
|
| {
|
|
enabled: true
|
|
ttlSeconds: number
|
|
titleMessage: string
|
|
bodyMessageHtml: string
|
|
}
|
|
|
|
type ControlResponse = {
|
|
maintenance: MaintenanceModeConfig
|
|
}
|
|
|
|
export function MaintenanceMode({ children }: { children: ReactNode }) {
|
|
const [maintenanceMode, setMaintenanceMode] = useState<MaintenanceModeConfig | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (!CONTROL_SERVER) return
|
|
let isCancelled = false
|
|
const updateMaintenanceMode = async () => {
|
|
try {
|
|
const response = await fetch(`${CONTROL_SERVER}/control.json`)
|
|
const data: ControlResponse = await response.json()
|
|
if (isCancelled) return
|
|
setMaintenanceMode(data.maintenance)
|
|
} catch {
|
|
setMaintenanceMode({
|
|
enabled: false,
|
|
ttlSeconds: 60,
|
|
})
|
|
}
|
|
}
|
|
|
|
if (maintenanceMode) {
|
|
const refreshTimeout = setTimeout(updateMaintenanceMode, maintenanceMode.ttlSeconds * 1000)
|
|
return () => {
|
|
isCancelled = true
|
|
clearTimeout(refreshTimeout)
|
|
}
|
|
} else {
|
|
updateMaintenanceMode()
|
|
return () => {
|
|
isCancelled = true
|
|
}
|
|
}
|
|
}, [maintenanceMode])
|
|
|
|
const isMaintenanceModeEnabled = maintenanceMode?.enabled ?? false
|
|
const wasInMaintenanceModeRef = useRef(isMaintenanceModeEnabled)
|
|
useEffect(() => {
|
|
// If we were in maintenance mode and now we're not, reload the page
|
|
if (wasInMaintenanceModeRef.current && !isMaintenanceModeEnabled) {
|
|
window.location.reload()
|
|
}
|
|
wasInMaintenanceModeRef.current = isMaintenanceModeEnabled
|
|
}, [isMaintenanceModeEnabled])
|
|
|
|
if (maintenanceMode?.enabled) {
|
|
return (
|
|
<div className={`tldraw ${light}`}>
|
|
<Container>
|
|
<Modal>
|
|
<Heading>{maintenanceMode.titleMessage}</Heading>
|
|
<div dangerouslySetInnerHTML={{ __html: maintenanceMode.bodyMessageHtml }} />
|
|
</Modal>
|
|
</Container>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return <>{children}</>
|
|
}
|
|
|
|
const Container = styled('div', {
|
|
backgroundColor: '$canvas',
|
|
position: 'absolute',
|
|
inset: 0,
|
|
padding: '1rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
})
|
|
|
|
const Modal = styled('div', {
|
|
backgroundColor: '$panel',
|
|
padding: '1rem 1.5rem',
|
|
borderRadius: '$2',
|
|
boxShadow: '$8',
|
|
maxWidth: '400px',
|
|
width: '100%',
|
|
})
|
|
|
|
const Heading = styled('h2', {
|
|
margin: 0,
|
|
marginTop: '1rem',
|
|
})
|