mirror/checktheroads-hyperglass
1
0
Fork 0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Code Releases Activity

fix browser caching

Browse Source
This commit is contained in:
checktheroads
2020-04-19 09:50:31 -07:00
parent 4cd1edd599
commit 7e87cff7fc
3 changed files with 133 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
hyperglass/ui/components/HyperglassProvider.js
View File

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

150
hyperglass/ui/components/Layout.js
View File

@@ -17,79 +17,87 @@ const bg = { light: "white", dark: "black" };
const color = { light: "black", dark: "white" }; const color = { light: "black", dark: "white" };
const Layout = () => { const Layout = () => {
const config = useConfig(); const config = useConfig();
const { colorMode } = useColorMode(); const { colorMode } = useColorMode();
const [isSubmitting, setSubmitting] = useState(false); const [isSubmitting, setSubmitting] = useState(false);
const [formData, setFormData] = useState({}); const [formData, setFormData] = useState({});
const [greetingAck, setGreetingAck] = useSessionStorage("hyperglass-greeting-ack", false); const [greetingAck, setGreetingAck] = useSessionStorage(
const containerRef = useRef(null); "hyperglass-greeting-ack",
false
);
const containerRef = useRef(null);
const handleFormReset = () => { const handleFormReset = () => {
containerRef.current.scrollIntoView({ behavior: "smooth", block: "start" }); containerRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
setSubmitting(false); setSubmitting(false);
}; setFormData({});
return ( };
<>
<Meta /> return (
<Flex <>
w="100%" <Meta />
ref={containerRef} <Flex
minHeight="100vh" w="100%"
bg={bg[colorMode]} ref={containerRef}
flexDirection="column" minHeight="100vh"
color={color[colorMode]} bg={bg[colorMode]}
> flexDirection="column"
<Flex px={2} flex="0 1 auto" flexDirection="column"> color={color[colorMode]}
<Header isSubmitting={isSubmitting} handleFormReset={handleFormReset} /> >
</Flex> <Flex px={2} flex="0 1 auto" flexDirection="column">
<Flex <Header
px={2} isSubmitting={isSubmitting}
py={0} handleFormReset={handleFormReset}
w="100%" />
as="main" </Flex>
flex="1 1 auto" <Flex
textAlign="center" px={2}
alignItems="center" py={0}
justifyContent="start" w="100%"
flexDirection="column" as="main"
> flex="1 1 auto"
{isSubmitting && formData && ( textAlign="center"
<Results alignItems="center"
queryLocation={formData.query_location} justifyContent="start"
queryType={formData.query_type} flexDirection="column"
queryVrf={formData.query_vrf} >
queryTarget={formData.query_target} {isSubmitting && formData && (
setSubmitting={setSubmitting} <Results
/> queryLocation={formData.query_location}
)} queryType={formData.query_type}
<AnimatePresence> queryVrf={formData.query_vrf}
{!isSubmitting && ( queryTarget={formData.query_target}
<AnimatedForm setSubmitting={setSubmitting}
initial={{ opacity: 0, y: 300 }} />
animate={{ opacity: 1, y: 0 }} )}
transition={{ duration: 0.3 }} <AnimatePresence>
exit={{ opacity: 0, x: -300 }} {!isSubmitting && (
isSubmitting={isSubmitting} <AnimatedForm
setSubmitting={setSubmitting} initial={{ opacity: 0, y: 300 }}
setFormData={setFormData} animate={{ opacity: 1, y: 0 }}
greetingAck={greetingAck} transition={{ duration: 0.3 }}
setGreetingAck={setGreetingAck} exit={{ opacity: 0, x: -300 }}
/> isSubmitting={isSubmitting}
)} setSubmitting={setSubmitting}
</AnimatePresence> setFormData={setFormData}
</Flex> greetingAck={greetingAck}
<Footer /> setGreetingAck={setGreetingAck}
{config.developer_mode && <Debugger />} />
</Flex>
{config.web.greeting.enable && !greetingAck && (
<Greeting
greetingConfig={config.web.greeting}
content={config.content.greeting}
onClickThrough={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"; Layout.displayName = "HyperglassLayout";

92
hyperglass/ui/components/Result.js
View File

@@ -1,4 +1,5 @@
import React, { useEffect, useState } from "react"; import * as React from "react";
import { useEffect, useState } from "react";
import { import {
AccordionItem, AccordionItem,
AccordionHeader, AccordionHeader,
@@ -82,7 +83,7 @@ const Result = React.forwardRef(
const config = useConfig(); const config = useConfig();
const { isSm } = useMedia(); const { isSm } = useMedia();
const { colorMode } = useColorMode(); const { colorMode } = useColorMode();
const [{ data, loading, error }, refetch] = useAxios({ let [{ data, loading, error }, refetch] = useAxios({
url: "/api/query/", url: "/api/query/",
method: "post", method: "post",
data: { data: {
@@ -102,7 +103,7 @@ const Result = React.forwardRef(
setOpen(!isOpen); setOpen(!isOpen);
setOverride(true); setOverride(true);
}; };
const cleanOutput = let cleanOutput =
data && data &&
data.output data.output
.split("\\n") .split("\\n")
@@ -124,54 +125,13 @@ const Result = React.forwardRef(
errorMsg = config.messages.general; errorMsg = config.messages.general;
} }
error && console.dir(error); error && console.error(error);
const errorLevel = const errorLevel =
(error?.response?.data?.level && (error?.response?.data?.level &&
statusMap[error.response?.data?.level]) ?? statusMap[error.response?.data?.level]) ??
"error"; "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(() => { useEffect(() => {
!loading && resultsComplete === null && setComplete(index); !loading && resultsComplete === null && setComplete(index);
}, [loading, resultsComplete]); }, [loading, resultsComplete]);
@@ -179,9 +139,7 @@ const Result = React.forwardRef(
useEffect(() => { useEffect(() => {
resultsComplete === index && !hasOverride && setOpen(true); resultsComplete === index && !hasOverride && setOpen(true);
}, [resultsComplete, index]); }, [resultsComplete, index]);
useEffect(() => {
data && console.log(data);
});
return ( return (
<AccordionItem <AccordionItem
isOpen={isOpen} isOpen={isOpen}
@@ -278,7 +236,35 @@ const Result = React.forwardRef(
]} ]}
flex="1 0 auto" 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 <Tooltip
display={data?.cached ? null : "none"} display={data?.cached ? null : "none"}
@@ -288,7 +274,7 @@ const Result = React.forwardRef(
})} })}
placement="top" placement="top"
> >
<Box mr={1} display={data?.cached ? null : "none"}> <Box mr={1} display={data?.cached ? "block" : "none"}>
<LightningBolt color={color[colorMode]} /> <LightningBolt color={color[colorMode]} />
</Box> </Box>
</Tooltip> </Tooltip>
@@ -297,7 +283,7 @@ const Result = React.forwardRef(
text={config.web.text.cache_prefix} text={config.web.text.cache_prefix}
/> />
</> </>
) : data && !error && config.cache.show_text ? ( ) : config.cache.show_text && data && !error ? (
<> <>
<CacheTimeout <CacheTimeout
timeout={config.cache.timeout} timeout={config.cache.timeout}
@@ -311,12 +297,12 @@ const Result = React.forwardRef(
})} })}
placement="top" placement="top"
> >
<Box ml={1} display={data?.cached ? null : "none"}> <Box ml={1} display={data?.cached ? "block" : "none"}>
<LightningBolt color={color[colorMode]} /> <LightningBolt color={color[colorMode]} />
</Box> </Box>
</Tooltip> </Tooltip>
</> </>
) : null} ) : null} */}
</Flex> </Flex>
</Flex> </Flex>
</AccordionPanel> </AccordionPanel>