mirrors/thatmattlove-hyperglass
1
0
Fork 1
mirror of https://github.com/thatmattlove/hyperglass.git synced 2026-01-17 08:48:05 +00:00
Code Issues Activity

add dynamic imports

Browse source
This commit is contained in:
checktheroads 2020-01-21 20:02:50 -07:00
parent 14d503108f
commit ed9c9e4700
4 changed files with 45 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
ui/components/Loading.js Normal file
View file

@ -0,0 +1,37 @@
import React from "react";
import { Flex, Spinner, useColorMode } from "@chakra-ui/core";
const Loading = () => {
const { colorMode } = useColorMode();
const bg = { light: "white", dark: "black" };
const color = { light: "black", dark: "white" };
return (
<Flex
flexDirection="column"
minHeight="100vh"
w="100%"
bg={bg[colorMode]}
color={color[colorMode]}
>
<Flex
as="main"
w="100%"
flexGrow={1}
flexShrink={1}
flexBasis="auto"
alignItems="center"
justifyContent="start"
textAlign="center"
flexDirection="column"
px={2}
py={0}
mt={["50%", "50%", "50%", "25%"]}
>
<Spinner color="primary.500" w="6rem" h="6rem" />
</Flex>
</Flex>
);
};
Loading.displayName = "Loading";
export default Loading;

6
ui/components/MarkDown.js
View file

@ -1,4 +1,5 @@
import React from "react";
import dynamic from "next/dynamic";
import {
Checkbox as ChakraCheckbox,
Divider,
@ -7,12 +8,15 @@ import {
Link as ChakraLink,
List as ChakraList,
ListItem as ChakraListItem,
Spinner,
Text as ChakraText
} from "@chakra-ui/core";
import ReactMarkdown from "react-markdown";
import CustomCodeBlock from "~/components/CodeBlock";
import { TableCell, TableHeader, Table } from "~/components/Table";
// Dynaimc Imports
const ReactMarkdown = dynamic(() => import("react-markdown"), { loading: Spinner });
const Checkbox = ({ checked, children }) => (
<ChakraCheckbox isChecked={checked}>{children}</ChakraCheckbox>
);

67
ui/components/PreConfig.js
View file

@ -1,67 +0,0 @@
import React from "react";
import {
Button,
ColorModeProvider,
CSSReset,
Flex,
Heading,
Spinner,
ThemeProvider,
useTheme,
useColorMode
} from "@chakra-ui/core";
import { defaultTheme } from "~/theme";
const PreConfig = ({ loading, error, refresh }) => {
const theme = useTheme();
const { colorMode } = useColorMode();
const bg = { light: theme.colors.white, dark: theme.colors.dark };
const color = { light: theme.colors.dark, dark: theme.colors.white };
return (
<Flex
flexDirection="column"
minHeight="100vh"
w="100%"
bg={bg[colorMode]}
color={color[colorMode]}
>
<Flex
as="main"
w="100%"
flexGrow={1}
flexShrink={1}
flexBasis="auto"
alignItems="center"
justifyContent="start"
textAlign="center"
flexDirection="column"
px={2}
py={0}
mt={["50%", "50%", "50%", "25%"]}
>
{loading && <Spinner color="primary.500" w="6rem" h="6rem" />}
{!loading && error && (
<>
<Heading mb={4} color="danger.500" as="h1" fontSize="2xl">
{error.response?.data?.output || error.message || "An Error Occurred"}
</Heading>
<Button variant="outline" variantColor="danger" onClick={refresh}>
Retry
</Button>
</>
)}
</Flex>
</Flex>
);
};
export default ({ loading, error, refresh }) => {
return (
<ThemeProvider theme={defaultTheme}>
<ColorModeProvider>
<CSSReset />
<PreConfig loading={loading} error={error} refresh={refresh} />
</ColorModeProvider>
</ThemeProvider>
);
};

32
ui/pages/index.js
View file

@ -1,33 +1,7 @@
import React from "react";
import Layout from "~/components/Layout";
// const Index = () => {
// // const [{ data, loading, error }, refetch] = useAxios({
// // url: "/config",
// // method: "get"
// // });
// // const data = undefined;
// // const loading = false;
// // const error = { message: "Shit broke" };
// // const refetch = () => alert("refetched");
// const userTheme = data && makeTheme(data.branding);
// const theme = data ? userTheme : defaultTheme;
// const Component = data ? <Layout /> : <PreConfig />;
// return (
// <ThemeProvider theme={theme}>
// <ColorModeProvider>
// <CSSReset />
// <MediaProvider theme={theme}>
// <ConfigProvider>
// <Component />
// </ConfigProvider>
// </MediaProvider>
// </ColorModeProvider>
// </ThemeProvider>
// );
// };
// Index.displayName = "Hyperglass";
import dynamic from "next/dynamic";
import Loading from "~/components/Loading";
const Layout = dynamic(() => import("~/components/Layout"), { loading: Loading });
const Index = () => <Layout />;