89 lines
2.3 KiB
JavaScript
89 lines
2.3 KiB
JavaScript
import { Fragment, useContext, useEffect, useRef, useState } from "react"
|
|
import { useRouter } from "next/router"
|
|
import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
|
|
import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
|
|
import "focus-visible/dist/focus-visible"
|
|
import { Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Text } from "@chakra-ui/react"
|
|
import { getEventURL } from "/utils/state.js"
|
|
import Error from "next/error"
|
|
import { useClientSideRouting } from "/utils/client_side_routing"
|
|
import NextHead from "next/head"
|
|
|
|
|
|
|
|
export default function Component() {
|
|
const state = useContext(StateContext)
|
|
const router = useRouter()
|
|
const [ colorMode, toggleColorMode ] = useContext(ColorModeContext)
|
|
const focusRef = useRef();
|
|
|
|
// Main event loop.
|
|
const [addEvents, connectError] = useContext(EventLoopContext)
|
|
|
|
// Set focus to the specified element.
|
|
useEffect(() => {
|
|
if (focusRef.current) {
|
|
focusRef.current.focus();
|
|
}
|
|
})
|
|
|
|
// Route after the initial page hydration.
|
|
useEffect(() => {
|
|
const change_complete = () => addEvents(initialEvents())
|
|
router.events.on('routeChangeComplete', change_complete)
|
|
return () => {
|
|
router.events.off('routeChangeComplete', change_complete)
|
|
}
|
|
}, [router])
|
|
|
|
const routeNotFound = useClientSideRouting()
|
|
|
|
return (
|
|
<Fragment>
|
|
<Fragment>
|
|
{isTrue(connectError !== null) ? (
|
|
<Fragment>
|
|
<Modal isOpen={connectError !== null}>
|
|
<ModalOverlay>
|
|
<ModalContent>
|
|
<ModalHeader>
|
|
{`Connection Error`}
|
|
</ModalHeader>
|
|
<ModalBody>
|
|
<Text>
|
|
{`Cannot connect to server: `}
|
|
{(connectError !== null) ? connectError.message : ''}
|
|
{`. Check if server is reachable at `}
|
|
{getEventURL().href}
|
|
</Text>
|
|
</ModalBody>
|
|
</ModalContent>
|
|
</ModalOverlay>
|
|
</Modal>
|
|
</Fragment>
|
|
) : (
|
|
<Fragment/>
|
|
)}
|
|
</Fragment>
|
|
<Fragment>
|
|
{isTrue(routeNotFound) ? (
|
|
<Fragment>
|
|
<Error statusCode={404}/>
|
|
</Fragment>
|
|
) : (
|
|
<Fragment>
|
|
|
|
</Fragment>
|
|
)}
|
|
</Fragment>
|
|
<NextHead>
|
|
<title>
|
|
{`404 - Not Found`}
|
|
</title>
|
|
<meta content={`The page was not found`} name={`description`}/>
|
|
<meta content={`favicon.ico`} property={`og:image`}/>
|
|
</NextHead>
|
|
</Fragment>
|
|
)
|
|
}
|