add custom error & loading pages

ui/pages/_app.js

@@ -0,0 +1,26 @@
+import React from "react";
+import useAxios from "axios-hooks";
+import { HyperglassProvider } from "~/components/HyperglassProvider";
+import PreConfig from "~/components/PreConfig";
+
+const Hyperglass = ({ Component, pageProps }) => {
+    const [{ data, loading, error }, refetch] = useAxios({
+        url: "/config",
+        method: "get"
+    });
+    return (
+        <>
+            {!data ? (
+                <PreConfig loading={loading} error={error} refresh={refetch} />
+            ) : (
+                <HyperglassProvider config={data}>
+                    <Component {...pageProps} />
+                </HyperglassProvider>
+            )}
+        </>
+    );
+};
+
+Hyperglass.displayName = "Hyperglass";
+
+export default Hyperglass;

ui/pages/_error.js

@@ -0,0 +1,98 @@
+import React from "react";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/router";
+import {
+    Button,
+    CSSReset,
+    Flex,
+    Heading,
+    Text,
+    ThemeProvider,
+    useColorMode
+} from "@chakra-ui/core";
+import { inRange } from "lodash";
+import { defaultTheme } from "~/theme";
+
+const ColorModeProvider = dynamic(
+    () => import("@chakra-ui/core").then(mod => mod.ColorModeProvider),
+    { ssr: false }
+);
+
+const ErrorContent = ({ msg, statusCode }) => {
+    const { colorMode } = useColorMode();
+    const bg = { light: "white", dark: "black" };
+    const baseCode = inRange(statusCode, 400, 500)
+        ? 400
+        : inRange(statusCode, 500, 600)
+        ? 500
+        : 400;
+    const errorColor = {
+        400: { light: "error.500", dark: "error.300" },
+        500: { light: "danger.500", dark: "danger.300" }
+    };
+    const variantColor = {
+        400: "error",
+        500: "danger"
+    };
+    const color = { light: "black", dark: "white" };
+    const { push } = useRouter();
+    const handleClick = () => push("/");
+    return (
+        <Flex
+            w="100%"
+            minHeight="100vh"
+            bg={bg[colorMode]}
+            flexDirection="column"
+            color={color[colorMode]}
+        >
+            <Flex
+                px={2}
+                py={0}
+                w="100%"
+                as="main"
+                flexGrow={1}
+                flexShrink={1}
+                flexBasis="auto"
+                textAlign="center"
+                alignItems="center"
+                flexDirection="column"
+                justifyContent="start"
+                mt={["50%", "50%", "50%", "25%"]}
+            >
+                <Heading mb={4} as="h1" fontSize="2xl">
+                    <Text as="span" color={errorColor[baseCode][colorMode]}>
+                        {msg}
+                    </Text>
+                    {statusCode === 404 && <Text as="span"> isn't a thing...</Text>}
+                </Heading>
+
+                <Button
+                    variant="outline"
+                    onClick={handleClick}
+                    variantColor={variantColor[baseCode]}
+                >
+                    Home
+                </Button>
+            </Flex>
+        </Flex>
+    );
+};
+
+const ErrorPage = ({ msg, statusCode }) => {
+    return (
+        <ThemeProvider theme={defaultTheme}>
+            <ColorModeProvider>
+                <CSSReset />
+                <ErrorContent msg={msg} statusCode={statusCode} />
+            </ColorModeProvider>
+        </ThemeProvider>
+    );
+};
+
+ErrorPage.getInitialProps = ({ res, err }) => {
+    const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+    const msg = err ? err.message : res.req.url;
+    return { msg, statusCode };
+};
+
+export default ErrorPage;