wrap all context providers

ui/components/HyperglassProvider.js

@@ -0,0 +1,31 @@
+import React, { createContext, useContext, useMemo } from "react";
+import dynamic from "next/dynamic";
+import { CSSReset, ThemeProvider } from "@chakra-ui/core";
+import { MediaProvider } from "~/components/MediaProvider";
+import { makeTheme, defaultTheme } from "~/theme";
+
+// Disable SSR for ColorModeProvider
+const ColorModeProvider = dynamic(
+    () => import("@chakra-ui/core").then(mod => mod.ColorModeProvider),
+    { ssr: false }
+);
+
+const HyperglassContext = createContext(null);
+
+export const HyperglassProvider = ({ config, children }) => {
+    const value = useMemo(() => config, [config]);
+    const userTheme = value && makeTheme(value.branding);
+    const theme = value ? userTheme : defaultTheme;
+    return (
+        <HyperglassContext.Provider value={value}>
+            <ThemeProvider theme={theme}>
+                <ColorModeProvider>
+                    <CSSReset />
+                    <MediaProvider theme={theme}>{children}</MediaProvider>
+                </ColorModeProvider>
+            </ThemeProvider>
+        </HyperglassContext.Provider>
+    );
+};
+
+export default () => useContext(HyperglassContext);

ui/components/MediaProvider.js

@@ -0,0 +1,34 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { useMediaLayout } from "use-media";
+
+const MediaContext = createContext(null);
+
+export const MediaProvider = ({ theme, children }) => {
+    const { sm, md, lg, xl } = theme.breakpoints;
+    const isSm = useMediaLayout({ maxWidth: md });
+    const isMd = useMediaLayout({ minWidth: md, maxWidth: lg });
+    const isLg = useMediaLayout({ minWidth: lg, maxWidth: xl });
+    const isXl = useMediaLayout({ minWidth: xl });
+    let mediaSize = false;
+    switch (true) {
+        case isSm:
+            mediaSize = "sm";
+            break;
+        case isMd:
+            mediaSize = "md";
+            break;
+        case isLg:
+            mediaSize = "lg";
+            break;
+        case isXl:
+            mediaSize = "xl";
+            break;
+    }
+    const value = useMemo(
+        () => ({ isSm: isSm, isMd: isMd, isLg: isLg, isXl: isXl, mediaSize: mediaSize }),
+        [isSm, isMd, isLg, isXl, mediaSize]
+    );
+    return <MediaContext.Provider value={value}>{children}</MediaContext.Provider>;
+};
+
+export default () => useContext(MediaContext);

ui/pages/index.js

@@ -1,39 +1,34 @@
 import React from "react";
-import dynamic from "next/dynamic";
-import useAxios from "axios-hooks";
-import { CSSReset, ThemeProvider } from "@chakra-ui/core";
 import Layout from "~/components/Layout";
-import PreConfig from "~/components/PreConfig";
-import { makeTheme, defaultTheme } from "~/theme";
 
-// Disable SSR for ColorModeProvider
-const ColorModeProvider = dynamic(
-    () => import("@chakra-ui/core").then(mod => mod.ColorModeProvider),
-    { ssr: false }
-);
+// 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>
+//     );
+// };
 
-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);
-    return (
-        <ThemeProvider theme={data ? userTheme : defaultTheme}>
-            <ColorModeProvider>
-                <CSSReset />
-                {!data ? (
-                    <PreConfig loading={loading} error={error} refresh={refetch} />
-                ) : (
-                    <Layout config={data} />
-                )}
-            </ColorModeProvider>
-        </ThemeProvider>
-    );
-};
+// Index.displayName = "Hyperglass";
+
+const Index = () => <Layout />;
 
 export default Index;