feat(AppConfig): iterate how apps are managed

- auth clients are always shared, cannot be disabled
- custom connections are enabled by default, can be disabled
- any existing connections can be reconnected regardless of its AppConfig or AppAuthClient states

packages/web/src/hooks/useAuthenticateApp.ee.js

@@ -13,6 +13,7 @@ import useCreateConnectionAuthUrl from './useCreateConnectionAuthUrl';
 import useUpdateConnection from './useUpdateConnection';
 import useResetConnection from './useResetConnection';
 import useVerifyConnection from './useVerifyConnection';
+import { useWhatChanged } from '@simbathesailor/use-what-changed';
 
 function getSteps(auth, hasConnection, useShared) {
   if (hasConnection) {
@@ -37,11 +38,13 @@ export default function useAuthenticateApp(payload) {
   const { mutateAsync: createConnectionAuthUrl } = useCreateConnectionAuthUrl();
   const { mutateAsync: updateConnection } = useUpdateConnection();
   const { mutateAsync: resetConnection } = useResetConnection();
+  const { mutateAsync: verifyConnection } = useVerifyConnection();
   const [authenticationInProgress, setAuthenticationInProgress] =
     React.useState(false);
   const formatMessage = useFormatMessage();
-  const steps = getSteps(auth?.data, !!connectionId, useShared);
-  const { mutateAsync: verifyConnection } = useVerifyConnection();
+  const steps = React.useMemo(() => {
+    return getSteps(auth?.data, !!connectionId, useShared);
+  }, [auth, connectionId, useShared]);
 
   const authenticate = React.useMemo(() => {
     if (!steps?.length) return;
@@ -57,7 +60,6 @@ export default function useAuthenticateApp(payload) {
         fields,
       };
       let stepIndex = 0;
-
       while (stepIndex < steps?.length) {
         const step = steps[stepIndex];
         const variables = computeAuthStepVariables(step.arguments, response);
@@ -105,10 +107,10 @@ export default function useAuthenticateApp(payload) {
             response[step.name] = stepResponse;
           }
         } catch (err) {
-          console.log(err);
+          console.error(err);
           setAuthenticationInProgress(false);
 
-          queryClient.invalidateQueries({
+          await queryClient.invalidateQueries({
             queryKey: ['apps', appKey, 'connections'],
           });
 
@@ -126,13 +128,14 @@ export default function useAuthenticateApp(payload) {
 
       return response;
     };
+    // keep formatMessage out of it as it causes infinite loop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     steps,
     appKey,
     appAuthClientId,
     connectionId,
     queryClient,
-    formatMessage,
     createConnection,
     createConnectionAuthUrl,
     updateConnection,
@@ -140,6 +143,24 @@ export default function useAuthenticateApp(payload) {
     verifyConnection,
   ]);
 
+  useWhatChanged(
+    [
+      steps,
+      appKey,
+      appAuthClientId,
+      connectionId,
+      queryClient,
+      createConnection,
+      createConnectionAuthUrl,
+      updateConnection,
+      resetConnection,
+      verifyConnection,
+    ],
+    'steps, appKey, appAuthClientId, connectionId, queryClient, createConnection, createConnectionAuthUrl, updateConnection, resetConnection, verifyConnection',
+    '',
+    'useAuthenticate',
+  );
+
   return {
     authenticate,
     inProgress: authenticationInProgress,

packages/web/src/hooks/useAutomatischInfo.js

@@ -9,7 +9,7 @@ export default function useAutomatischInfo() {
      **/
     staleTime: Infinity,
     queryKey: ['automatisch', 'info'],
-    queryFn: async (payload, signal) => {
+    queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/automatisch/info', { signal });
 
       return data;

packages/web/src/hooks/useCreateConnection.js

@@ -3,7 +3,7 @@ import { useMutation } from '@tanstack/react-query';
 import api from 'helpers/api';
 
 export default function useCreateConnection(appKey) {
-  const query = useMutation({
+  const mutation = useMutation({
     mutationFn: async ({ appAuthClientId, formattedData }) => {
       const { data } = await api.post(`/v1/apps/${appKey}/connections`, {
         appAuthClientId,
@@ -14,5 +14,5 @@ export default function useCreateConnection(appKey) {
     },
   });
 
-  return query;
+  return mutation;
 }

packages/web/src/hooks/useLicense.js

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useLicense() {
+  const query = useQuery({
+    queryKey: ['automatisch', 'license'],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get('/v1/automatisch/license', { signal });
+
+      return data;
+    },
+  });
+
+  return query;
+}