From 7e87cff7fc74be11c8c851b82179d7dfb4387707 Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Sun, 19 Apr 2020 09:50:31 -0700
Subject: [PATCH] fix browser caching

---
 .../ui/components/HyperglassProvider.js       |  30 ++--
 hyperglass/ui/components/Layout.js            | 150 +++++++++---------
 hyperglass/ui/components/Result.js            |  92 +++++------
 3 files changed, 133 insertions(+), 139 deletions(-)

diff --git a/hyperglass/ui/components/HyperglassProvider.js b/hyperglass/ui/components/HyperglassProvider.js
index 5441c45..98a352b 100644
--- a/hyperglass/ui/components/HyperglassProvider.js
+++ b/hyperglass/ui/components/HyperglassProvider.js
@@ -6,26 +6,26 @@ import { makeTheme, defaultTheme } from "~/theme";
 
 // Disable SSR for ColorModeProvider
 const ColorModeProvider = dynamic(
-    () => import("@chakra-ui/core").then(mod => mod.ColorModeProvider),
-    { ssr: false }
+  () => 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.web.theme);
-    const theme = value ? userTheme : defaultTheme;
-    return (
-        <HyperglassContext.Provider value={value}>
-            <ThemeProvider theme={theme}>
-                <ColorModeProvider value={config.web.theme.default_color_mode ?? null}>
-                    <CSSReset />
-                    <MediaProvider theme={theme}>{children}</MediaProvider>
-                </ColorModeProvider>
-            </ThemeProvider>
-        </HyperglassContext.Provider>
-    );
+  const value = useMemo(() => config, [config]);
+  const userTheme = value && makeTheme(value.web.theme);
+  const theme = value ? userTheme : defaultTheme;
+  return (
+    <HyperglassContext.Provider value={value}>
+      <ThemeProvider theme={theme}>
+        <ColorModeProvider value={config.web.theme.default_color_mode ?? null}>
+          <CSSReset />
+          <MediaProvider theme={theme}>{children}</MediaProvider>
+        </ColorModeProvider>
+      </ThemeProvider>
+    </HyperglassContext.Provider>
+  );
 };
 
 export default () => useContext(HyperglassContext);
diff --git a/hyperglass/ui/components/Layout.js b/hyperglass/ui/components/Layout.js
index 4ce89b7..04144fc 100644
--- a/hyperglass/ui/components/Layout.js
+++ b/hyperglass/ui/components/Layout.js
@@ -17,79 +17,87 @@ const bg = { light: "white", dark: "black" };
 const color = { light: "black", dark: "white" };
 
 const Layout = () => {
-    const config = useConfig();
-    const { colorMode } = useColorMode();
-    const [isSubmitting, setSubmitting] = useState(false);
-    const [formData, setFormData] = useState({});
-    const [greetingAck, setGreetingAck] = useSessionStorage("hyperglass-greeting-ack", false);
-    const containerRef = useRef(null);
+  const config = useConfig();
+  const { colorMode } = useColorMode();
+  const [isSubmitting, setSubmitting] = useState(false);
+  const [formData, setFormData] = useState({});
+  const [greetingAck, setGreetingAck] = useSessionStorage(
+    "hyperglass-greeting-ack",
+    false
+  );
+  const containerRef = useRef(null);
 
-    const handleFormReset = () => {
-        containerRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
-        setSubmitting(false);
-    };
-    return (
-        <>
-            <Meta />
-            <Flex
-                w="100%"
-                ref={containerRef}
-                minHeight="100vh"
-                bg={bg[colorMode]}
-                flexDirection="column"
-                color={color[colorMode]}
-            >
-                <Flex px={2} flex="0 1 auto" flexDirection="column">
-                    <Header isSubmitting={isSubmitting} handleFormReset={handleFormReset} />
-                </Flex>
-                <Flex
-                    px={2}
-                    py={0}
-                    w="100%"
-                    as="main"
-                    flex="1 1 auto"
-                    textAlign="center"
-                    alignItems="center"
-                    justifyContent="start"
-                    flexDirection="column"
-                >
-                    {isSubmitting && formData && (
-                        <Results
-                            queryLocation={formData.query_location}
-                            queryType={formData.query_type}
-                            queryVrf={formData.query_vrf}
-                            queryTarget={formData.query_target}
-                            setSubmitting={setSubmitting}
-                        />
-                    )}
-                    <AnimatePresence>
-                        {!isSubmitting && (
-                            <AnimatedForm
-                                initial={{ opacity: 0, y: 300 }}
-                                animate={{ opacity: 1, y: 0 }}
-                                transition={{ duration: 0.3 }}
-                                exit={{ opacity: 0, x: -300 }}
-                                isSubmitting={isSubmitting}
-                                setSubmitting={setSubmitting}
-                                setFormData={setFormData}
-                                greetingAck={greetingAck}
-                                setGreetingAck={setGreetingAck}
-                            />
-                        )}
-                    </AnimatePresence>
-                </Flex>
-                <Footer />
-                {config.developer_mode && <Debugger />}
-            </Flex>
-            {config.web.greeting.enable && !greetingAck && (
-                <Greeting
-                    greetingConfig={config.web.greeting}
-                    content={config.content.greeting}
-                    onClickThrough={setGreetingAck}
-                />
+  const handleFormReset = () => {
+    containerRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
+    setSubmitting(false);
+    setFormData({});
+  };
+
+  return (
+    <>
+      <Meta />
+      <Flex
+        w="100%"
+        ref={containerRef}
+        minHeight="100vh"
+        bg={bg[colorMode]}
+        flexDirection="column"
+        color={color[colorMode]}
+      >
+        <Flex px={2} flex="0 1 auto" flexDirection="column">
+          <Header
+            isSubmitting={isSubmitting}
+            handleFormReset={handleFormReset}
+          />
+        </Flex>
+        <Flex
+          px={2}
+          py={0}
+          w="100%"
+          as="main"
+          flex="1 1 auto"
+          textAlign="center"
+          alignItems="center"
+          justifyContent="start"
+          flexDirection="column"
+        >
+          {isSubmitting && formData && (
+            <Results
+              queryLocation={formData.query_location}
+              queryType={formData.query_type}
+              queryVrf={formData.query_vrf}
+              queryTarget={formData.query_target}
+              setSubmitting={setSubmitting}
+            />
+          )}
+          <AnimatePresence>
+            {!isSubmitting && (
+              <AnimatedForm
+                initial={{ opacity: 0, y: 300 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.3 }}
+                exit={{ opacity: 0, x: -300 }}
+                isSubmitting={isSubmitting}
+                setSubmitting={setSubmitting}
+                setFormData={setFormData}
+                greetingAck={greetingAck}
+                setGreetingAck={setGreetingAck}
+              />
             )}
-        </>
-    );
+          </AnimatePresence>
+        </Flex>
+        <Footer />
+        {config.developer_mode && <Debugger />}
+      </Flex>
+      {config.web.greeting.enable && !greetingAck && (
+        <Greeting
+          greetingConfig={config.web.greeting}
+          content={config.content.greeting}
+          onClickThrough={setGreetingAck}
+        />
+      )}
+    </>
+  );
 };
 
 Layout.displayName = "HyperglassLayout";
diff --git a/hyperglass/ui/components/Result.js b/hyperglass/ui/components/Result.js
index 4907e7f..8b5da1a 100644
--- a/hyperglass/ui/components/Result.js
+++ b/hyperglass/ui/components/Result.js
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import * as React from "react";
+import { useEffect, useState } from "react";
 import {
   AccordionItem,
   AccordionHeader,
@@ -82,7 +83,7 @@ const Result = React.forwardRef(
     const config = useConfig();
     const { isSm } = useMedia();
     const { colorMode } = useColorMode();
-    const [{ data, loading, error }, refetch] = useAxios({
+    let [{ data, loading, error }, refetch] = useAxios({
       url: "/api/query/",
       method: "post",
       data: {
@@ -102,7 +103,7 @@ const Result = React.forwardRef(
       setOpen(!isOpen);
       setOverride(true);
     };
-    const cleanOutput =
+    let cleanOutput =
       data &&
       data.output
         .split("\\n")
@@ -124,54 +125,13 @@ const Result = React.forwardRef(
       errorMsg = config.messages.general;
     }
 
-    error && console.dir(error);
+    error && console.error(error);
 
     const errorLevel =
       (error?.response?.data?.level &&
         statusMap[error.response?.data?.level]) ??
       "error";
 
-    const cacheLg = (
-      <>
-        <CacheTimeout
-          timeout={config.cache.timeout}
-          text={config.web.text.cache_prefix}
-        />
-        {data?.cached && (
-          <Tooltip
-            hasArrow
-            label={config.web.text.cache_icon.format({ time: data?.timestamp })}
-            placement="top"
-          >
-            <Box ml={1}>
-              <LightningBolt color={color[colorMode]} />
-            </Box>
-          </Tooltip>
-        )}
-      </>
-    );
-    const cacheSm = (
-      <>
-        {data?.cached && (
-          <Tooltip
-            hasArrow
-            label={config.web.text.cache_icon.format({ time: data?.timestamp })}
-            placement="top"
-          >
-            <Box mr={1}>
-              <LightningBolt color={color[colorMode]} />
-            </Box>
-          </Tooltip>
-        )}
-        <CacheTimeout
-          timeout={config.cache.timeout}
-          text={config.web.text.cache_prefix}
-        />
-      </>
-    );
-
-    const cacheData = isSm ? cacheSm : cacheLg;
-
     useEffect(() => {
       !loading && resultsComplete === null && setComplete(index);
     }, [loading, resultsComplete]);
@@ -179,9 +139,7 @@ const Result = React.forwardRef(
     useEffect(() => {
       resultsComplete === index && !hasOverride && setOpen(true);
     }, [resultsComplete, index]);
-    useEffect(() => {
-      data && console.log(data);
-    });
+
     return (
       <AccordionItem
         isOpen={isOpen}
@@ -278,7 +236,35 @@ const Result = React.forwardRef(
               ]}
               flex="1 0 auto"
             >
-              {data && !error && config.cache.show_text && isSm ? (
+              {config.cache.show_text && data && !error && (
+                <>
+                  {!isSm && (
+                    <CacheTimeout
+                      timeout={config.cache.timeout}
+                      text={config.web.text.cache_prefix}
+                    />
+                  )}
+                  <Tooltip
+                    display={data?.cached ? null : "none"}
+                    hasArrow
+                    label={config.web.text.cache_icon.format({
+                      time: data?.timestamp
+                    })}
+                    placement="top"
+                  >
+                    <Box ml={1} display={data?.cached ? "block" : "none"}>
+                      <LightningBolt color={color[colorMode]} />
+                    </Box>
+                  </Tooltip>
+                  {isSm && (
+                    <CacheTimeout
+                      timeout={config.cache.timeout}
+                      text={config.web.text.cache_prefix}
+                    />
+                  )}
+                </>
+              )}
+              {/* {config.cache.show_text && data && !error && isSm ? (
                 <>
                   <Tooltip
                     display={data?.cached ? null : "none"}
@@ -288,7 +274,7 @@ const Result = React.forwardRef(
                     })}
                     placement="top"
                   >
-                    <Box mr={1} display={data?.cached ? null : "none"}>
+                    <Box mr={1} display={data?.cached ? "block" : "none"}>
                       <LightningBolt color={color[colorMode]} />
                     </Box>
                   </Tooltip>
@@ -297,7 +283,7 @@ const Result = React.forwardRef(
                     text={config.web.text.cache_prefix}
                   />
                 </>
-              ) : data && !error && config.cache.show_text ? (
+              ) : config.cache.show_text && data && !error ? (
                 <>
                   <CacheTimeout
                     timeout={config.cache.timeout}
@@ -311,12 +297,12 @@ const Result = React.forwardRef(
                     })}
                     placement="top"
                   >
-                    <Box ml={1} display={data?.cached ? null : "none"}>
+                    <Box ml={1} display={data?.cached ? "block" : "none"}>
                       <LightningBolt color={color[colorMode]} />
                     </Box>
                   </Tooltip>
                 </>
-              ) : null}
+              ) : null} */}
             </Flex>
           </Flex>
         </AccordionPanel>