refactor: rewrite useAutomatischInfo with RQ and REST API

packages/web/src/hooks/useAuthentication.js

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { AuthenticationContext } from 'contexts/Authentication';
+
 export default function useAuthentication() {
   const authenticationContext = React.useContext(AuthenticationContext);
+
   return {
     token: authenticationContext.token,
     updateToken: authenticationContext.updateToken,

packages/web/src/hooks/useAutomatischInfo.js

@@ -1,10 +1,20 @@
-import * as React from 'react';
-import { AutomatischInfoContext } from 'contexts/AutomatischInfo';
+import { useQuery } from '@tanstack/react-query';
+import api from 'helpers/api';
+
 export default function useAutomatischInfo() {
-  const automatischInfoContext = React.useContext(AutomatischInfoContext);
-  return {
-    isCloud: automatischInfoContext.isCloud,
-    isMation: automatischInfoContext.isMation,
-    loading: automatischInfoContext.loading,
-  };
+  const query = useQuery({
+    /**
+     * The data doesn't change by user actions, but only by server deployments.
+     * So we can set the `staleTime` to Infinity
+     **/
+    staleTime: Infinity,
+    queryKey: ['automatischInfo'],
+    queryFn: async (payload, signal) => {
+      const { data } = await api.get('/v1/automatisch/info', null, { signal });
+
+      return data;
+    },
+  });
+
+  return query;
 }

packages/web/src/hooks/useCloud.js

@@ -1,11 +1,17 @@
 import { useNavigate } from 'react-router-dom';
+
 import useAutomatischInfo from './useAutomatischInfo';
+
 export default function useCloud(options) {
   const redirect = options?.redirect || false;
-  const { isCloud } = useAutomatischInfo();
   const navigate = useNavigate();
+  const { data: automatischInfo } = useAutomatischInfo();
+
+  const isCloud = automatischInfo?.data.isCloud;
+
   if (isCloud === false && redirect) {
     navigate('/');
   }
+
   return isCloud;
 }