58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { PropsWithChildren, useEffect, useState } from 'react'
|
|
import { add, format } from 'date-fns'
|
|
import { getCookie } from 'cookies-next'
|
|
|
|
import { appState } from '~utils/appState'
|
|
|
|
import TopHeader from '~components/Header'
|
|
import UpdateToast from '~components/UpdateToast'
|
|
|
|
import './index.scss'
|
|
|
|
interface Props {}
|
|
|
|
const Layout = ({ children }: PropsWithChildren<Props>) => {
|
|
const [updateToastOpen, setUpdateToastOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const cookie = getToastCookie()
|
|
const now = new Date()
|
|
const updatedAt = new Date(appState.version.updated_at)
|
|
const validUntil = add(updatedAt, { days: 7 })
|
|
|
|
if (now < validUntil && !cookie.seen) setUpdateToastOpen(true)
|
|
}, [])
|
|
|
|
function getToastCookie() {
|
|
const updatedAt = new Date(appState.version.updated_at)
|
|
const cookieValues = getCookie(`update-${format(updatedAt, 'yyyy-MM-dd')}`)
|
|
return cookieValues
|
|
? (JSON.parse(cookieValues as string) as { seen: true })
|
|
: { seen: false }
|
|
}
|
|
|
|
function handleToastActionClicked() {
|
|
setUpdateToastOpen(false)
|
|
}
|
|
|
|
function handleToastOpenChanged(open: boolean) {
|
|
setUpdateToastOpen(false)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<TopHeader />
|
|
{/* TODO: Don't show toast on about pages */}
|
|
<UpdateToast
|
|
open={updateToastOpen}
|
|
updateType="feature"
|
|
onActionClicked={handleToastActionClicked}
|
|
onOpenChange={handleToastOpenChanged}
|
|
lastUpdated={appState.version.updated_at}
|
|
/>
|
|
<main>{children}</main>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Layout
|