move ui & assets to package directory

2024-05-11 05:55:08 +00:00 · 2020-02-24 09:06:07 -07:00
parent 6af79bda39
commit 65b1787ba7
64 changed files with 4 additions and 6 deletions
--- a/hyperglass/ui/pages/_app.js
+++ b/hyperglass/ui/pages/_app.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { HyperglassProvider } from "~/components/HyperglassProvider";
+
+const config = process.env._HYPERGLASS_CONFIG_;
+
+const Hyperglass = ({ Component, pageProps }) => {
+    return (
+        <HyperglassProvider config={config}>
+            <Component {...pageProps} />
+        </HyperglassProvider>
+    );
+};
+
+Hyperglass.displayName = "Hyperglass";
+
+export default Hyperglass;
--- a/hyperglass/ui/pages/_document.js
+++ b/hyperglass/ui/pages/_document.js
@@ -0,0 +1,24 @@
+import React from "react";
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+    static async getInitialProps(ctx) {
+        const initialProps = await Document.getInitialProps(ctx);
+        return { ...initialProps };
+    }
+
+    render() {
+        return (
+            <Html>
+                <Head />
+                <body>
+                    <script src="noflash.js" />
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    }
+}
+
+export default MyDocument;
--- a/hyperglass/ui/pages/_error.js
+++ b/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 || "Error";
+    return { msg, statusCode };
+};
+
+export default ErrorPage;
--- a/hyperglass/ui/pages/index.js
+++ b/hyperglass/ui/pages/index.js
@@ -0,0 +1,8 @@
+import React from "react";
+import dynamic from "next/dynamic";
+import Loading from "~/components/Loading";
+const Layout = dynamic(() => import("~/components/Layout"), { loading: Loading });
+
+const Index = () => <Layout />;
+
+export default Index;