Skip to content

Commit 562f301

Browse files
alexcarpenteralexcarpenter
authored
feat(ui): Extract some logic into reusable hooks (clerk#3614)
1 parent 19ecfb6 commit 562f301

6 files changed

Lines changed: 52 additions & 25 deletions

File tree

‎.changeset/twelve-tips-heal.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/ui/src/components/sign-in/sign-in.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { useClerk } from '@clerk/clerk-react';
22
import * as Common from '@clerk/elements/common';
33
import * as SignIn from '@clerk/elements/sign-in';
4-
import { enUS } from '@clerk/localizations';
5-
import type { ClerkOptions, EnvironmentResource } from '@clerk/types';
4+
import type { EnvironmentResource } from '@clerk/types';
65

76
import { Connections } from '~/common/connections';
87
import { EmailField } from '~/common/email-field';
@@ -14,6 +13,9 @@ import { PasswordField } from '~/common/password-field';
1413
import { PhoneNumberField } from '~/common/phone-number-field';
1514
import { PhoneNumberOrUsernameField } from '~/common/phone-number-or-username-field';
1615
import { UsernameField } from '~/common/username-field';
16+
import { useAttributes } from '~/hooks/use-attributes';
17+
import { useDisplayConfig } from '~/hooks/use-display-config';
18+
import { useLocalizations } from '~/hooks/use-localizations';
1719
import { Alert } from '~/primitives/alert';
1820
import { Button } from '~/primitives/button';
1921
import * as Card from '~/primitives/card';
@@ -22,7 +24,6 @@ import { LinkButton } from '~/primitives/link-button';
2224
import { SecondaryButton } from '~/primitives/secondary-button';
2325
import { Seperator } from '~/primitives/seperator';
2426
import { getEnabledSocialConnectionsFromEnvironment } from '~/utils/getEnabledSocialConnectionsFromEnvironment';
25-
import { makeLocalizeable } from '~/utils/makeLocalizable';
2627

2728
export function SignInComponent() {
2829
return (
@@ -34,19 +35,16 @@ export function SignInComponent() {
3435

3536
export function SignInComponentLoaded() {
3637
const clerk = useClerk();
37-
// TODO: Replace `any` with proper types
38-
const { t, translateError } = makeLocalizeable(((clerk as any)?.options as ClerkOptions)?.localization || enUS);
3938
const enabledConnections = getEnabledSocialConnectionsFromEnvironment(
4039
(clerk as any)?.__unstable__environment as EnvironmentResource,
4140
);
4241
const locationBasedCountryIso = (clerk as any)?.__internal_country;
43-
const attributes = ((clerk as any)?.__unstable__environment as EnvironmentResource)?.userSettings.attributes;
44-
const displayConfig = ((clerk as any)?.__unstable__environment as EnvironmentResource)?.displayConfig;
45-
const { enabled: usernameEnabled } = attributes['username'];
46-
const { enabled: phoneNumberEnabled } = attributes['phone_number'];
47-
const { enabled: emailAddressEnabled } = attributes['email_address'];
48-
const { enabled: passkeyEnabled } = attributes['passkey'];
49-
const { applicationName, logoImageUrl, homeUrl } = displayConfig;
42+
const { t, translateError } = useLocalizations();
43+
const { enabled: usernameEnabled } = useAttributes('username');
44+
const { enabled: phoneNumberEnabled } = useAttributes('phone_number');
45+
const { enabled: emailAddressEnabled } = useAttributes('email_address');
46+
const { enabled: passkeyEnabled } = useAttributes('passkey');
47+
const { applicationName, logoImageUrl, homeUrl } = useDisplayConfig();
5048

5149
const hasConnection = enabledConnections.length > 0;
5250
const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;

‎packages/ui/src/components/sign-up/sign-up.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { useClerk } from '@clerk/clerk-react';
22
import * as Common from '@clerk/elements/common';
33
import * as SignUp from '@clerk/elements/sign-up';
4-
import { enUS } from '@clerk/localizations';
5-
import type { ClerkOptions, EnvironmentResource } from '@clerk/types';
4+
import type { EnvironmentResource } from '@clerk/types';
65

76
import { Connections } from '~/common/connections';
87
import { EmailField } from '~/common/email-field';
@@ -12,14 +11,16 @@ import { OTPField } from '~/common/otp-field';
1211
import { PasswordField } from '~/common/password-field';
1312
import { PhoneNumberField } from '~/common/phone-number-field';
1413
import { UsernameField } from '~/common/username-field';
14+
import { useAttributes } from '~/hooks/use-attributes';
15+
import { useDisplayConfig } from '~/hooks/use-display-config';
16+
import { useLocalizations } from '~/hooks/use-localizations';
1517
import { Alert } from '~/primitives/alert';
1618
import { Button } from '~/primitives/button';
1719
import * as Card from '~/primitives/card';
1820
import * as Icon from '~/primitives/icon';
1921
import { LinkButton } from '~/primitives/link-button';
2022
import { Seperator } from '~/primitives/seperator';
2123
import { getEnabledSocialConnectionsFromEnvironment } from '~/utils/getEnabledSocialConnectionsFromEnvironment';
22-
import { makeLocalizeable } from '~/utils/makeLocalizable';
2324

2425
export function SignUpComponent() {
2526
return (
@@ -32,20 +33,18 @@ export function SignUpComponent() {
3233
function SignUpComponentLoaded() {
3334
const clerk = useClerk();
3435
// TODO: Replace `any` with proper types
35-
const { t, translateError } = makeLocalizeable(((clerk as any)?.options as ClerkOptions)?.localization || enUS);
3636
const enabledConnections = getEnabledSocialConnectionsFromEnvironment(
3737
(clerk as any)?.__unstable__environment as EnvironmentResource,
3838
);
3939
const locationBasedCountryIso = (clerk as any)?.__internal_country;
40-
const attributes = ((clerk as any)?.__unstable__environment as EnvironmentResource)?.userSettings.attributes;
41-
const displayConfig = ((clerk as any)?.__unstable__environment as EnvironmentResource)?.displayConfig;
42-
const { enabled: firstNameEnabled, required: firstNameRequired } = attributes['first_name'];
43-
const { enabled: lastNameEnabled, required: lastNameRequired } = attributes['last_name'];
44-
const { enabled: usernameEnabled, required: usernameRequired } = attributes['username'];
45-
const { enabled: phoneNumberEnabled, required: phoneNumberRequired } = attributes['phone_number'];
46-
const { enabled: emailAddressEnabled, required: emailAddressRequired } = attributes['email_address'];
47-
const { enabled: passwordEnabled, required: passwordRequired } = attributes['password'];
48-
const { applicationName, homeUrl, logoImageUrl } = displayConfig;
40+
const { t, translateError } = useLocalizations();
41+
const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
42+
const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
43+
const { enabled: usernameEnabled, required: usernameRequired } = useAttributes('username');
44+
const { enabled: phoneNumberEnabled, required: phoneNumberRequired } = useAttributes('phone_number');
45+
const { enabled: emailAddressEnabled, required: emailAddressRequired } = useAttributes('email_address');
46+
const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password');
47+
const { applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
4948

5049
const hasConnection = enabledConnections.length > 0;
5150
const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;

‎packages/ui/src/hooks/use-attributes.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { useClerk } from '@clerk/clerk-react';
2+
import type { Attribute, AttributeData, EnvironmentResource } from '@clerk/types';
3+
4+
export function useAttributes(attribute: Attribute): AttributeData {
5+
const clerk = useClerk();
6+
const userSettingsAttributes = ((clerk as any)?.__unstable__environment as EnvironmentResource)?.userSettings
7+
.attributes;
8+
return userSettingsAttributes[attribute];
9+
}

‎packages/ui/src/hooks/use-display-config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { useClerk } from '@clerk/clerk-react';
2+
import type { EnvironmentResource } from '@clerk/types';
3+
4+
export function useDisplayConfig() {
5+
const clerk = useClerk();
6+
const displayConfig = ((clerk as any)?.__unstable__environment as EnvironmentResource)?.displayConfig;
7+
return displayConfig;
8+
}

‎packages/ui/src/hooks/use-localizations.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { useClerk } from '@clerk/clerk-react';
2+
import { enUS } from '@clerk/localizations';
3+
import type { ClerkOptions } from '@clerk/types';
4+
5+
import { makeLocalizeable } from '~/utils/makeLocalizable';
6+
7+
export function useLocalizations() {
8+
const clerk = useClerk();
9+
const { t, translateError } = makeLocalizeable(((clerk as any)?.options as ClerkOptions)?.localization || enUS);
10+
return { t, translateError };
11+
}

0 commit comments

Comments
 (0)