mirror/checktheroads-hyperglass
1
0
Fork 0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Code Releases Activity

remove custom error page, closes #109

Browse Source
This commit is contained in:
checktheroads
2021-01-25 22:47:13 -07:00
parent ca7f5c808d
commit 08b2760721
1 changed files with 0 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
hyperglass/ui/pages/_error.tsx
View File

@@ -1,89 +0,0 @@
import { useMemo } from 'react';
import { useRouter } from 'next/router';
import {
Flex,
Text,
theme,
Button,
Heading,
ThemeProvider,
ChakraProvider,
useColorModeValue,
} from '@chakra-ui/react';
import { inRange } from 'lodash';
import type { NextPage, NextPageContext } from 'next';
interface TError {
status: string;
code: number;
}
const ErrorContent: React.FC<TError> = (props: TError) => {
const { status, code } = props;
const router = useRouter();
const bg = useColorModeValue('white', 'black');
const color = useColorModeValue('black', 'white');
const error400 = useColorModeValue('error.500', 'error.300');
const error500 = useColorModeValue('danger.500', 'danger.300');
const errorColor = { 400: error400, 500: error500 };
const colorScheme = { 400: 'error', 500: 'danger' };
const baseCode = useMemo(() => {
return inRange(code, 400, 500) ? 400 : inRange(code, 500, 600) ? 500 : 400;
}, [code]);
function handleClick(): void {
router.push('/');
}
return (
<Flex w="100%" minHeight="100vh" bg={bg} flexDirection="column" color={color}>
<Flex
px={2}
py={0}
w="100%"
as="main"
flexGrow={1}
flexShrink={1}
flexBasis="auto"
textAlign="center"
alignItems="center"
flexDirection="column"
justifyContent="start"
mt={{ base: '50%', xl: '25%' }}
>
<Heading mb={4} as="h1" fontSize="2xl">
<Text as="span" color={errorColor[baseCode]}>
{status}
</Text>
{code === 404 && <Text as="span">{` isn't a thing...`}</Text>}
</Heading>
<Button variant="outline" onClick={handleClick} colorScheme={colorScheme[baseCode]}>
Home
</Button>
</Flex>
</Flex>
);
};
const ErrorPage: NextPage<TError> = (props: TError) => {
const { status, code } = props;
return (
<ThemeProvider theme={theme}>
<ChakraProvider>
<ErrorContent status={status} code={code} />
</ChakraProvider>
</ThemeProvider>
);
};
ErrorPage.getInitialProps = (ctx: NextPageContext): TError => {
const { res, err } = ctx;
const code = res ? res.statusCode : err ? err.statusCode ?? 500 : 404;
const status = err ? err.message : 'Error';
return { status, code };
};
export default ErrorPage;