From 31ecfd0b96ab8590012b645cc752d863ef50f2cf Mon Sep 17 00:00:00 2001 From: Darcy Ye Date: Thu, 15 Sep 2022 14:28:19 +0800 Subject: [PATCH] chore: check connector related types and eliminate redundancy (#1925) --- .../SocialSignIn/SocialSignInDropdown/index.test.tsx | 4 ++-- .../SocialSignIn/SocialSignInDropdown/index.tsx | 4 ++-- .../SocialSignIn/SocialSignInIconList/index.tsx | 4 ++-- .../SocialSignIn/SocialSignInList/index.tsx | 4 ++-- .../SocialSignIn/SocialSignInPopUp/index.tsx | 5 +++-- packages/ui/src/hooks/use-social.ts | 6 +++--- packages/ui/src/pages/SignIn/registry.tsx | 8 ++++---- packages/ui/src/types/index.ts | 4 +--- packages/ui/src/utils/social-connectors.test.ts | 6 +++--- packages/ui/src/utils/social-connectors.ts | 12 ++++++------ 10 files changed, 28 insertions(+), 29 deletions(-) diff --git a/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown/index.test.tsx b/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown/index.test.tsx index 8b3bc7951..11505627b 100644 --- a/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown/index.test.tsx +++ b/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown/index.test.tsx @@ -1,10 +1,10 @@ +import { ConnectorMetadata } from '@logto/schemas'; import { fireEvent } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import renderWithPageContext from '@/__mocks__/RenderWithPageContext'; import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider'; import { socialConnectors } from '@/__mocks__/logto'; -import { ConnectorData } from '@/types'; import SocialSignInDropdown from '.'; @@ -12,7 +12,7 @@ const mockInvokeSocialSignIn = jest.fn(); // eslint-disable-next-line unicorn/consistent-function-scoping jest.mock('@/hooks/use-social', () => () => ({ - invokeSocialSignIn: (connector: ConnectorData) => { + invokeSocialSignIn: (connector: ConnectorMetadata) => { mockInvokeSocialSignIn(connector); }, })); diff --git a/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown/index.tsx b/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown/index.tsx index e3effc860..92dfefd8c 100644 --- a/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown/index.tsx +++ b/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown/index.tsx @@ -1,10 +1,10 @@ +import { ConnectorMetadata } from '@logto/schemas'; import { getDefaultLanguage } from '@logto/shared'; import { useState, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import Dropdown, { DropdownItem } from '@/components/Dropdown'; import useSocial from '@/hooks/use-social'; -import { ConnectorData } from '@/types'; import * as styles from './index.module.scss'; @@ -12,7 +12,7 @@ type Props = { anchorRef?: React.RefObject; isOpen: boolean; onClose: () => void; - connectors: ConnectorData[]; + connectors: ConnectorMetadata[]; }; const SocialSignInDropdown = ({ isOpen, onClose, connectors, anchorRef }: Props) => { diff --git a/packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.tsx b/packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.tsx index 14d84f279..2cb09de56 100644 --- a/packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.tsx +++ b/packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.tsx @@ -1,17 +1,17 @@ +import { ConnectorMetadata } from '@logto/schemas'; import classNames from 'classnames'; import MoreSocialIcon from '@/assets/icons/more-social-icon.svg'; import IconButton from '@/components/Button/IconButton'; import SocialIconButton from '@/components/Button/SocialIconButton'; import useSocial from '@/hooks/use-social'; -import { ConnectorData } from '@/types'; import { isAppleConnector } from '@/utils/social-connectors'; import * as styles from './index.module.scss'; type Props = { className?: string; - connectors?: ConnectorData[]; + connectors?: ConnectorMetadata[]; hasMore?: boolean; moreButtonRef: React.RefObject; onMoreButtonClick?: () => void; diff --git a/packages/ui/src/containers/SocialSignIn/SocialSignInList/index.tsx b/packages/ui/src/containers/SocialSignIn/SocialSignInList/index.tsx index 2862c5748..29d302117 100644 --- a/packages/ui/src/containers/SocialSignIn/SocialSignInList/index.tsx +++ b/packages/ui/src/containers/SocialSignIn/SocialSignInList/index.tsx @@ -1,3 +1,4 @@ +import { ConnectorMetadata } from '@logto/schemas'; import classNames from 'classnames'; import { useState, useMemo } from 'react'; @@ -5,7 +6,6 @@ import ExpandIcon from '@/assets/icons/expand-icon.svg'; import IconButton from '@/components/Button/IconButton'; import SocialLinkButton from '@/components/Button/SocialLinkButton'; import useSocial from '@/hooks/use-social'; -import { ConnectorData } from '@/types'; import * as styles from './index.module.scss'; @@ -13,7 +13,7 @@ export const defaultSize = 4; type Props = { className?: string; - socialConnectors?: ConnectorData[]; + socialConnectors?: ConnectorMetadata[]; isCollapseEnabled?: boolean; onSocialSignInCallback?: () => void; }; diff --git a/packages/ui/src/containers/SocialSignIn/SocialSignInPopUp/index.tsx b/packages/ui/src/containers/SocialSignIn/SocialSignInPopUp/index.tsx index 9edd19b8e..8ccf27c58 100644 --- a/packages/ui/src/containers/SocialSignIn/SocialSignInPopUp/index.tsx +++ b/packages/ui/src/containers/SocialSignIn/SocialSignInPopUp/index.tsx @@ -1,10 +1,11 @@ +import { ConnectorMetadata } from '@logto/schemas'; + import Drawer from '@/components/Drawer'; -import { ConnectorData } from '@/types'; import SocialSignInList from '../SocialSignInList'; type Props = { - connectors?: ConnectorData[]; + connectors?: ConnectorMetadata[]; className?: string; isOpen?: boolean; onClose: () => void; diff --git a/packages/ui/src/hooks/use-social.ts b/packages/ui/src/hooks/use-social.ts index 466a532e1..712bd129d 100644 --- a/packages/ui/src/hooks/use-social.ts +++ b/packages/ui/src/hooks/use-social.ts @@ -1,7 +1,7 @@ +import { ConnectorMetadata } from '@logto/schemas'; import { useCallback, useContext } from 'react'; import { invokeSocialSignIn } from '@/apis/social'; -import { ConnectorData } from '@/types'; import { getLogtoNativeSdk, isNativeWebview } from '@/utils/native-sdk'; import { generateState, storeState, buildSocialLandingUri } from '@/utils/social-connectors'; @@ -15,7 +15,7 @@ const useSocial = () => { const { run: asyncInvokeSocialSignIn } = useApi(invokeSocialSignIn); - const nativeSignInHandler = useCallback((redirectTo: string, connector: ConnectorData) => { + const nativeSignInHandler = useCallback((redirectTo: string, connector: ConnectorMetadata) => { const { id: connectorId, platform } = connector; const redirectUri = @@ -30,7 +30,7 @@ const useSocial = () => { }, []); const invokeSocialSignInHandler = useCallback( - async (connector: ConnectorData) => { + async (connector: ConnectorMetadata) => { if (!(await termsValidation())) { return; } diff --git a/packages/ui/src/pages/SignIn/registry.tsx b/packages/ui/src/pages/SignIn/registry.tsx index 275abd838..864667cdf 100644 --- a/packages/ui/src/pages/SignIn/registry.tsx +++ b/packages/ui/src/pages/SignIn/registry.tsx @@ -1,4 +1,4 @@ -import { SignInMode } from '@logto/schemas'; +import { SignInMode, ConnectorMetadata } from '@logto/schemas'; import Divider from '@/components/Divider'; import TextLink from '@/components/TextLink'; @@ -8,7 +8,7 @@ import SignInMethodsLink from '@/containers/SignInMethodsLink'; import { PrimarySocialSignIn, SecondarySocialSignIn } from '@/containers/SocialSignIn'; import TermsOfUse from '@/containers/TermsOfUse'; import UsernameSignin from '@/containers/UsernameSignin'; -import { SignInMethod, LocalSignInMethod, ConnectorData } from '@/types'; +import { SignInMethod, LocalSignInMethod } from '@/types'; import * as styles from './index.module.scss'; @@ -18,7 +18,7 @@ export const PrimarySection = ({ signInMode, }: { signInMethod?: SignInMethod; - socialConnectors?: ConnectorData[]; + socialConnectors?: ConnectorMetadata[]; signInMode?: SignInMode; }) => { switch (signInMethod) { @@ -61,7 +61,7 @@ export const SecondarySection = ({ }: { primarySignInMethod?: SignInMethod; secondarySignInMethods?: SignInMethod[]; - socialConnectors?: ConnectorData[]; + socialConnectors?: ConnectorMetadata[]; }) => { if (!primarySignInMethod || !secondarySignInMethods?.length) { return null; diff --git a/packages/ui/src/types/index.ts b/packages/ui/src/types/index.ts index 103824d7a..dfa3fc036 100644 --- a/packages/ui/src/types/index.ts +++ b/packages/ui/src/types/index.ts @@ -15,10 +15,8 @@ export type Platform = 'web' | 'mobile'; export type Theme = 'dark' | 'light'; -export type ConnectorData = ConnectorMetadata & { id: string }; - export type SignInExperienceSettingsResponse = SignInExperience & { - socialConnectors: ConnectorData[]; + socialConnectors: ConnectorMetadata[]; notification?: string; }; diff --git a/packages/ui/src/utils/social-connectors.test.ts b/packages/ui/src/utils/social-connectors.test.ts index 9837e9e0f..de75319de 100644 --- a/packages/ui/src/utils/social-connectors.test.ts +++ b/packages/ui/src/utils/social-connectors.test.ts @@ -1,6 +1,6 @@ -import { ConnectorPlatform } from '@logto/schemas'; +import { ConnectorPlatform, ConnectorMetadata } from '@logto/schemas'; -import { ConnectorData, SearchParameters } from '@/types'; +import { SearchParameters } from '@/types'; import { getLogtoNativeSdk, isNativeWebview } from '@/utils/native-sdk'; import { @@ -16,7 +16,7 @@ const mockConnectors = [ { platform: 'Universal', target: 'wechat' }, { platform: 'Native', target: 'wechat' }, { platform: 'Native', target: 'alipay' }, -] as ConnectorData[]; +] as ConnectorMetadata[]; jest.mock('@/utils/native-sdk', () => ({ isNativeWebview: jest.fn(), diff --git a/packages/ui/src/utils/social-connectors.ts b/packages/ui/src/utils/social-connectors.ts index 66565b17c..89fd40e6a 100644 --- a/packages/ui/src/utils/social-connectors.ts +++ b/packages/ui/src/utils/social-connectors.ts @@ -1,6 +1,6 @@ -import { ConnectorPlatform } from '@logto/schemas'; +import { ConnectorMetadata, ConnectorPlatform } from '@logto/schemas'; -import { ConnectorData, SearchParameters } from '@/types'; +import { SearchParameters } from '@/types'; import { generateRandomString } from '@/utils'; import { getLogtoNativeSdk, isNativeWebview } from '@/utils/native-sdk'; @@ -56,12 +56,12 @@ export const getCallbackLinkFromStorage = (connectorId: string) => { /** * Social Connectors Filter Utility Methods */ -export const filterSocialConnectors = (socialConnectors?: ConnectorData[]) => { +export const filterSocialConnectors = (socialConnectors?: ConnectorMetadata[]) => { if (!socialConnectors) { return []; } - const connectorMap = new Map(); + const connectorMap = new Map(); /** * Browser Environment @@ -142,13 +142,13 @@ export const filterSocialConnectors = (socialConnectors?: ConnectorData[]) => { */ export const filterPreviewSocialConnectors = ( platform: ConnectorPlatform.Native | ConnectorPlatform.Web, - socialConnectors?: ConnectorData[] + socialConnectors?: ConnectorMetadata[] ) => { if (!socialConnectors) { return []; } - const connectorMap = new Map(); + const connectorMap = new Map(); /** * Browser Environment