From fb9c9673896f1f86b517c318fbfe30e9e66d90c1 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Tue, 3 Jan 2023 18:53:43 +0800
Subject: [PATCH] refactor(console): `useConnectorInUse` hook (#2812)

---
 .../console/src/hooks/use-connector-in-use.ts | 56 +++++++++----------
 .../src/pages/ConnectorDetails/index.tsx      | 15 +++--
 .../components/ConnectorRow/index.tsx         | 20 ++++---
 3 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/packages/console/src/hooks/use-connector-in-use.ts b/packages/console/src/hooks/use-connector-in-use.ts
index 85ec63740..b330a31de 100644
--- a/packages/console/src/hooks/use-connector-in-use.ts
+++ b/packages/console/src/hooks/use-connector-in-use.ts
@@ -1,41 +1,41 @@
-import type { SignInExperience } from '@logto/schemas';
+import type { ConnectorResponse, SignInExperience } from '@logto/schemas';
 import { SignInIdentifier, ConnectorType } from '@logto/schemas';
+import { useCallback } from 'react';
 import useSWR from 'swr';
 
 import type { RequestError } from './use-api';
 
-const useConnectorInUse = (type?: ConnectorType, target?: string): boolean | undefined => {
-  const { data } = useSWR<SignInExperience, RequestError>(target && type && '/api/sign-in-exp');
+const useConnectorInUse = () => {
+  const { data } = useSWR<SignInExperience, RequestError>('/api/sign-in-exp');
 
-  if (!data) {
-    return;
-  }
+  const isConnectorInUse = useCallback(
+    (connector?: ConnectorResponse) => {
+      if (!connector || !data) {
+        return false;
+      }
 
-  if (type === ConnectorType.Email) {
-    return (
-      data.signIn.methods.some(
-        ({ identifier, verificationCode }) =>
-          verificationCode && identifier === SignInIdentifier.Email
-      ) ||
-      (data.signUp.identifiers.includes(SignInIdentifier.Email) && data.signUp.verify)
-    );
-  }
+      const { type, target } = connector;
 
-  if (type === ConnectorType.Sms) {
-    return (
-      data.signIn.methods.some(
-        ({ identifier, verificationCode }) =>
-          verificationCode && identifier === SignInIdentifier.Sms
-      ) ||
-      (data.signUp.identifiers.includes(SignInIdentifier.Sms) && data.signUp.verify)
-    );
-  }
+      if (type === ConnectorType.Social) {
+        return data.socialSignInConnectorTargets.includes(target);
+      }
 
-  if (!target) {
-    return;
-  }
+      const relatedIdentifier =
+        type === ConnectorType.Email ? SignInIdentifier.Email : SignInIdentifier.Sms;
 
-  return data.socialSignInConnectorTargets.includes(target);
+      return (
+        data.signIn.methods.some(
+          ({ identifier, verificationCode }) => verificationCode && identifier === relatedIdentifier
+        ) ||
+        (data.signUp.identifiers.includes(relatedIdentifier) && data.signUp.verify)
+      );
+    },
+    [data]
+  );
+
+  return {
+    isConnectorInUse,
+  };
 };
 
 export default useConnectorInUse;
diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx
index 12e301ae7..cfb4b1191 100644
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@@ -52,7 +52,8 @@ const ConnectorDetails = () => {
   const { data: connectorFactory } = useSWR<ConnectorFactoryResponse>(
     data?.isStandard && `/api/connector-factories/${data.connectorId}`
   );
-  const inUse = useConnectorInUse(data?.type, data?.target);
+  const { isConnectorInUse } = useConnectorInUse();
+  const inUse = isConnectorInUse(data);
   const isLoading = !data && !error;
   const api = useApi();
   const navigate = useNavigate();
@@ -124,13 +125,11 @@ const ConnectorDetails = () => {
                   <div className={styles.verticalBar} />
                 </>
               )}
-              {inUse !== undefined && (
-                <Status status={inUse ? 'enabled' : 'disabled'} variant="outlined">
-                  {t('connectors.connector_status', {
-                    context: inUse ? 'in_use' : 'not_in_use',
-                  })}
-                </Status>
-              )}
+              <Status status={inUse ? 'enabled' : 'disabled'} variant="outlined">
+                {t('connectors.connector_status', {
+                  context: inUse ? 'in_use' : 'not_in_use',
+                })}
+              </Status>
               <div className={styles.verticalBar} />
               <div className={styles.text}>ID</div>
               <CopyToClipboard value={data.id} />
diff --git a/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx
index e0df898c5..af54bcc4b 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx
@@ -24,7 +24,8 @@ type Props = {
 const ConnectorRow = ({ type, connectors, onClickSetup }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const firstConnector = connectors[0];
-  const inUse = useConnectorInUse(type, firstConnector?.target);
+  const { isConnectorInUse } = useConnectorInUse();
+  const inUse = isConnectorInUse(firstConnector);
   const navigate = useNavigate();
   const showSetupButton = type !== ConnectorType.Social && !firstConnector;
 
@@ -67,14 +68,15 @@ const ConnectorRow = ({ type, connectors, onClickSetup }: Props) => {
       </td>
       <td>{connectorTypeColumn}</td>
       <td>
-        {inUse !== undefined && (
-          <Status status={inUse ? 'enabled' : 'disabled'}>
-            {t('connectors.connector_status', {
-              context: inUse ? 'in_use' : 'not_in_use',
-            })}
-          </Status>
-        )}
-        {inUse === undefined && !connectors[0] && '-'}
+        {conditional(
+          firstConnector && (
+            <Status status={inUse ? 'enabled' : 'disabled'}>
+              {t('connectors.connector_status', {
+                context: inUse ? 'in_use' : 'not_in_use',
+              })}
+            </Status>
+          )
+        ) ?? '-'}
       </td>
     </tr>
   );