refactor: rewrite useAutomatischInfo with RQ and REST API

packages/web/src/components/DefaultLogo/index.jsx

@@ -3,14 +3,17 @@ import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import MationLogo from 'components/MationLogo';
 import useAutomatischInfo from 'hooks/useAutomatischInfo';
-const DefaultLogo = () => {
-  const { isMation, loading } = useAutomatischInfo();
-  if (loading) return <React.Fragment />;
+
+export default function DefaultLogo() {
+  const { data: automatischInfo, isPending } = useAutomatischInfo();
+  const isMation = automatischInfo?.data.isMation;
+
+  if (isPending) return <React.Fragment />;
   if (isMation) return <MationLogo />;
+
   return (
     <Typography variant="h6" component="h1" data-test="typography-logo" noWrap>
       <FormattedMessage id="brandText" />
     </Typography>
   );
-};
-export default DefaultLogo;
+}

packages/web/src/components/QueryClientProvider/index.jsx

@@ -9,6 +9,7 @@ import useAuthentication from 'hooks/useAuthentication.js';
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
+      staleTime: 1000,
       refetchOnWindowFocus: false,
       // provides a convenient default while it should be overridden for other HTTP methods
       queryFn: async ({ queryKey, signal }) => {

packages/web/src/components/SettingsLayout/index.jsx

@@ -29,7 +29,8 @@ function createDrawerLinks({ isCloud }) {
   return items;
 }
 export default function SettingsLayout({ children }) {
-  const { isCloud } = useAutomatischInfo();
+  const { data: automatischInfo } = useAutomatischInfo();
+  const isCloud = automatischInfo?.data.isCloud;
   const theme = useTheme();
   const formatMessage = useFormatMessage();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));

packages/web/src/components/ThemeProvider/index.jsx

@@ -4,32 +4,45 @@ import clone from 'lodash/clone';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import * as React from 'react';
-import useConfig from 'hooks/useConfig';
+
 import useAutomatischInfo from 'hooks/useAutomatischInfo';
+import useConfig from 'hooks/useConfig';
 import { defaultTheme, mationTheme } from 'styles/theme';
+
 const customizeTheme = (theme, config) => {
   // `clone` is needed so that the new theme reference triggers re-render
   const shallowDefaultTheme = clone(theme);
+
   for (const key in config) {
     const value = config[key];
     const exists = get(theme, key);
+
     if (exists) {
       set(shallowDefaultTheme, key, value);
     }
   }
+
   return shallowDefaultTheme;
 };
 const ThemeProvider = ({ children, ...props }) => {
-  const { isMation, loading: automatischInfoLoading } = useAutomatischInfo();
+  const { data: automatischInfo, isPending: isAutomatischInfoPending } =
+    useAutomatischInfo();
+  const isMation = automatischInfo?.data.isMation;
   const { config, loading: configLoading } = useConfig();
+
   const customTheme = React.useMemo(() => {
     const installationTheme = isMation ? mationTheme : defaultTheme;
-    if (configLoading || automatischInfoLoading) return installationTheme;
+
+    if (configLoading || isAutomatischInfoPending) return installationTheme;
+
     const customTheme = customizeTheme(installationTheme, config || {});
+
     return customTheme;
-  }, [configLoading, config, isMation, automatischInfoLoading]);
+  }, [configLoading, config, isMation, isAutomatischInfoPending]);
+
   // TODO: maybe a global loading state for the custom theme?
-  if (automatischInfoLoading || configLoading) return <></>;
+  if (isAutomatischInfoPending || configLoading) return <></>;
+
   return (
     <BaseThemeProvider theme={customTheme} {...props}>
       <CssBaseline />