refactor: rewrite useConfig with RQ

packages/web/src/components/CustomLogo/index.ee.jsx

@@ -1,10 +1,14 @@
-import useConfig from 'hooks/useConfig';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
 import { LogoImage } from './style.ee';
 
 const CustomLogo = () => {
-  const { config, loading } = useConfig(['logo.svgData']);
-  if (loading || !config?.['logo.svgData']) return null;
+  const { data: configData, isLoading } = useAutomatischConfig();
+  const config = configData?.data;
+
+  if (isLoading || !config?.['logo.svgData']) return null;
+
   const logoSvgData = config['logo.svgData'];
+
   return (
     <LogoImage
       data-test="custom-logo"

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

@@ -15,7 +15,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import useVersion from 'hooks/useVersion';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
-import useConfig from 'hooks/useConfig';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
 
 const drawerLinks = [
   {
@@ -77,11 +77,9 @@ const generateDrawerBottomLinks = async ({
 
 export default function PublicLayout({ children }) {
   const version = useVersion();
-  const { config, loading } = useConfig([
-    'disableNotificationsPage',
-    'additionalDrawerLink',
-    'additionalDrawerLinkText',
-  ]);
+  const { data: configData, isLoading } = useAutomatischConfig();
+  const config = configData?.data;
+
   const theme = useTheme();
   const formatMessage = useFormatMessage();
   const [bottomLinks, setBottomLinks] = React.useState([]);
@@ -102,10 +100,10 @@ export default function PublicLayout({ children }) {
       setBottomLinks(newBottomLinks);
     }
 
-    if (loading) return;
+    if (isLoading) return;
 
     perform();
-  }, [config, loading, version.newVersionCount]);
+  }, [config, isLoading, version.newVersionCount]);
 
   return (
     <>

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

@@ -1,12 +1,19 @@
 import * as React from 'react';
+
 import CustomLogo from 'components/CustomLogo/index.ee';
 import DefaultLogo from 'components/DefaultLogo';
-import useConfig from 'hooks/useConfig';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
+
 const Logo = () => {
-  const { config, loading } = useConfig(['logo.svgData']);
+  const { data: configData, isLoading } = useAutomatischConfig();
+  const config = configData?.data;
   const logoSvgData = config?.['logo.svgData'];
-  if (loading && !logoSvgData) return <React.Fragment />;
+
+  if (isLoading && !logoSvgData) return <React.Fragment />;
+
   if (logoSvgData) return <CustomLogo />;
+
   return <DefaultLogo />;
 };
+
 export default Logo;

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

@@ -1,15 +1,22 @@
 import * as React from 'react';
-import useConfig from 'hooks/useConfig';
+
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
+
 const MetadataProvider = ({ children }) => {
-  const { config } = useConfig();
+  const { data: configData } = useAutomatischConfig();
+  const config = configData?.data;
+
   React.useEffect(() => {
     document.title = config?.title || 'Automatisch';
   }, [config?.title]);
+
   React.useEffect(() => {
     const existingFaviconElement = document.querySelector("link[rel~='icon']");
+
     if (config?.disableFavicon === true) {
       existingFaviconElement?.remove();
     }
+
     if (config?.disableFavicon === false) {
       if (existingFaviconElement) {
         existingFaviconElement.href = '/browser-tab.ico';
@@ -20,7 +27,10 @@ const MetadataProvider = ({ children }) => {
         newFaviconElement.href = '/browser-tab.ico';
       }
     }
+    
   }, [config?.disableFavicon]);
+
   return <>{children}</>;
 };
+
 export default MetadataProvider;

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

@@ -6,7 +6,7 @@ import set from 'lodash/set';
 import * as React from 'react';
 
 import useAutomatischInfo from 'hooks/useAutomatischInfo';
-import useConfig from 'hooks/useConfig';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
 import { defaultTheme, mationTheme } from 'styles/theme';
 
 const customizeTheme = (theme, config) => {
@@ -28,7 +28,8 @@ const ThemeProvider = ({ children, ...props }) => {
   const { data: automatischInfo, isPending: isAutomatischInfoPending } =
     useAutomatischInfo();
   const isMation = automatischInfo?.data.isMation;
-  const { config, loading: configLoading } = useConfig();
+  const { data: configData, isLoading: configLoading } = useAutomatischConfig();
+  const config = configData?.data;
 
   const customTheme = React.useMemo(() => {
     const installationTheme = isMation ? mationTheme : defaultTheme;
@@ -51,4 +52,5 @@ const ThemeProvider = ({ children, ...props }) => {
     </BaseThemeProvider>
   );
 };
+
 export default ThemeProvider;