refactor: rewrite useAutomatischInfo with RQ and REST API

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 />