From 4b8bedc66d47dca5c6192148f4b31ae6d49ff733 Mon Sep 17 00:00:00 2001 From: Lennart Date: Tue, 28 Nov 2023 22:33:42 +0100 Subject: [PATCH] fix(clerk-js): Remove internal useCore hooks (#2111) * chore(clerk-js,shared,clerk-react): Migrate useCoreSession, useCoreUser -> useSession, useUser * chore(clerk-js,clerk-react): Replace useCoreOrganization with useOrganization (#2113) this also include useOrganizationList * chore(clerk-js,clerk-react,shared): Replace useCoreClerk with useClerk * chore(clerk-js): Migrate usage of useCoreClerk to useClerk * fix(repo): Resolve conflicts * chore(clerk-js): Sync changes to `ui` directory * chore(clerk-react): Remove empty file * fix(clerk-js): Check against undefined, not falsy --------- Co-authored-by: panteliselef --- .changeset/blue-grapes-marry.md | 6 ++++ .../src/ui.retheme/common/EmailLinkVerify.tsx | 5 ++-- .../clerk-js/src/ui.retheme/common/Gate.tsx | 6 ++-- .../src/ui.retheme/common/SSOCallback.tsx | 4 +-- .../ui.retheme/common/withRedirectToHome.tsx | 5 ++-- .../CreateOrganizationForm.tsx | 6 ++-- .../CreateOrganizationPage.tsx | 6 ++-- .../ImpersonationFab/ImpersonationFab.tsx | 12 ++++---- .../OrganizationList/OrganizationListPage.tsx | 11 +++---- .../OrganizationList/UserInvitationList.tsx | 6 ++-- .../OrganizationList/UserMembershipList.tsx | 13 +++++--- .../OrganizationList/UserSuggestionList.tsx | 4 +-- .../components/OrganizationList/utils.ts | 4 +-- .../ActionConfirmationPage.tsx | 12 ++++---- .../OrganizationProfile/ActiveMembersList.tsx | 8 ++--- .../OrganizationProfile/AddDomainPage.tsx | 5 ++-- .../OrganizationProfile/DomainList.tsx | 4 +-- .../OrganizationProfile/InviteMembersForm.tsx | 4 +-- .../OrganizationProfile/InviteMembersPage.tsx | 6 ++-- .../InvitedMembersList.tsx | 4 +-- .../OrganizationProfile/MembershipWidget.tsx | 6 ++-- .../OrganizationMembers.tsx | 6 ++-- .../OrganizationProfile.tsx | 6 ++-- .../OrganizationProfileNavbar.tsx | 5 ++-- .../OrganizationSettings.tsx | 10 ++++--- .../ProfileSettingsPage.tsx | 4 +-- .../OrganizationProfile/RemoveDomainPage.tsx | 7 +++-- .../OrganizationProfile/RequestToJoinList.tsx | 6 ++-- .../VerifiedDomainPage.tsx | 5 ++-- .../OrganizationProfile/VerifyDomainPage.tsx | 5 ++-- .../OrganizationSwitcherPopover.tsx | 24 +++++++-------- .../OrganizationSwitcherTrigger.tsx | 23 +++++++------- .../OtherOrganizationActions.tsx | 6 ++-- .../UserInvitationSuggestionList.tsx | 8 ++--- .../UserMembershipList.tsx | 18 +++++------ .../components/OrganizationSwitcher/utils.ts | 5 ++-- .../ui.retheme/components/SignIn/SignIn.tsx | 5 ++-- .../SignIn/SignInFactorOneCodeForm.tsx | 7 +++-- .../SignIn/SignInFactorOneEmailLinkCard.tsx | 7 +++-- .../SignIn/SignInFactorOnePasswordCard.tsx | 7 +++-- .../SignIn/SignInFactorTwoBackupCodeCard.tsx | 7 +++-- .../SignIn/SignInFactorTwoCodeForm.tsx | 7 +++-- .../components/SignIn/SignInSocialButtons.tsx | 5 ++-- .../components/SignIn/SignInStart.tsx | 5 ++-- .../ui.retheme/components/SignUp/SignUp.tsx | 5 ++-- .../components/SignUp/SignUpContinue.tsx | 5 ++-- .../components/SignUp/SignUpEmailLinkCard.tsx | 5 ++-- .../components/SignUp/SignUpSocialButtons.tsx | 5 ++-- .../components/SignUp/SignUpStart.tsx | 7 +++-- .../SignUp/SignUpVerificationCodeForm.tsx | 5 ++-- .../components/UserButton/UserButton.tsx | 9 ++++-- .../UserButton/UserButtonPopover.tsx | 7 +++-- .../UserButton/UserButtonTrigger.tsx | 4 +-- .../UserButton/useMultisessionActions.tsx | 10 +++---- .../UserProfile/ActiveDevicesSection.tsx | 16 +++++----- .../UserProfile/AddAuthenticatorApp.tsx | 6 ++-- .../UserProfile/ConnectedAccountsPage.tsx | 13 ++++---- .../UserProfile/ConnectedAccountsSection.tsx | 14 +++++++-- .../components/UserProfile/DeletePage.tsx | 12 ++++++-- .../components/UserProfile/EmailPage.tsx | 11 +++---- .../components/UserProfile/EmailSection.tsx | 12 ++++---- .../UserProfile/EnterpriseAccountsSection.tsx | 6 ++-- .../UserProfile/MfaBackupCodeCreatePage.tsx | 6 ++-- .../UserProfile/MfaBackupCodeList.tsx | 11 +++++-- .../components/UserProfile/MfaPage.tsx | 10 +++++-- .../UserProfile/MfaPhoneCodePage.tsx | 9 ++++-- .../components/UserProfile/MfaSection.tsx | 10 +++++-- .../components/UserProfile/PasswordPage.tsx | 14 ++++++--- .../UserProfile/PasswordSection.tsx | 11 +++++-- .../components/UserProfile/PhonePage.tsx | 12 ++++---- .../components/UserProfile/PhoneSection.tsx | 13 +++++--- .../components/UserProfile/ProfilePage.tsx | 10 +++++-- .../UserProfile/RemoveResourcePage.tsx | 26 ++++++++-------- .../components/UserProfile/RootPage.tsx | 10 ++++--- .../UserProfile/UserProfileSection.tsx | 11 +++++-- .../components/UserProfile/UsernamePage.tsx | 11 +++++-- .../UserProfile/UsernameSection.tsx | 9 ++++-- .../components/UserProfile/VerifyTOTP.tsx | 6 ++-- .../components/UserProfile/Web3Page.tsx | 17 +++++++---- .../components/UserProfile/Web3Section.tsx | 6 ++-- .../contexts/ClerkUIComponentsContext.tsx | 11 +++---- .../ui.retheme/contexts/CoreClerkContext.tsx | 3 -- .../contexts/CoreClerkContextWrapper.tsx | 30 ++++++++++--------- .../ui.retheme/contexts/CoreClientContext.tsx | 14 ++------- .../contexts/CoreOrganizationContext.tsx | 5 ---- .../contexts/CoreSessionContext.tsx | 25 +++++----------- .../ui.retheme/contexts/CoreUserContext.tsx | 23 ++++---------- .../clerk-js/src/ui.retheme/contexts/index.ts | 2 -- .../elements/PhoneInput/PhoneInput.tsx | 4 +-- .../__tests__/useCoreOrganization.test.tsx | 10 +++---- .../useCoreOrganizationList.test.tsx | 13 ++++---- .../hooks/__tests__/useSupportEmail.test.tsx | 10 +++---- .../src/ui.retheme/hooks/useFetchRoles.ts | 5 ++-- .../hooks/useSetSessionWithTimeout.ts | 5 ++-- .../src/ui.retheme/hooks/useSupportEmail.ts | 5 ++-- .../localization/applyTokensToString.ts | 6 ++-- .../src/ui.retheme/router/BaseRouter.tsx | 4 +-- .../src/ui.retheme/router/PathRouter.tsx | 4 +-- .../clerk-js/src/ui.retheme/router/Route.tsx | 4 +-- .../router/__tests__/HashRouter.test.tsx | 4 +-- .../router/__tests__/PathRouter.test.tsx | 4 +-- .../router/__tests__/Switch.test.tsx | 4 +-- .../router/__tests__/VirtualRouter.test.tsx | 4 +-- .../src/ui/common/EmailLinkVerify.tsx | 5 ++-- packages/clerk-js/src/ui/common/Gate.tsx | 6 ++-- .../clerk-js/src/ui/common/SSOCallback.tsx | 4 +-- .../src/ui/common/withRedirectToHome.tsx | 7 +++-- .../CreateOrganizationForm.tsx | 6 ++-- .../CreateOrganizationPage.tsx | 6 ++-- .../ImpersonationFab/ImpersonationFab.tsx | 12 ++++---- .../OrganizationList/OrganizationListPage.tsx | 11 +++---- .../OrganizationList/UserInvitationList.tsx | 6 ++-- .../OrganizationList/UserMembershipList.tsx | 13 +++++--- .../OrganizationList/UserSuggestionList.tsx | 4 +-- .../ui/components/OrganizationList/utils.ts | 4 +-- .../ActionConfirmationPage.tsx | 12 ++++---- .../OrganizationProfile/ActiveMembersList.tsx | 8 ++--- .../OrganizationProfile/AddDomainPage.tsx | 5 ++-- .../OrganizationProfile/DomainList.tsx | 4 +-- .../OrganizationProfile/InviteMembersForm.tsx | 4 +-- .../OrganizationProfile/InviteMembersPage.tsx | 6 ++-- .../InvitedMembersList.tsx | 4 +-- .../OrganizationProfile/MembershipWidget.tsx | 10 ++++--- .../OrganizationMembers.tsx | 6 ++-- .../OrganizationProfile.tsx | 6 ++-- .../OrganizationProfileNavbar.tsx | 9 +++--- .../OrganizationSettings.tsx | 10 ++++--- .../ProfileSettingsPage.tsx | 4 +-- .../OrganizationProfile/RemoveDomainPage.tsx | 7 +++-- .../OrganizationProfile/RequestToJoinList.tsx | 6 ++-- .../VerifiedDomainPage.tsx | 5 ++-- .../OrganizationProfile/VerifyDomainPage.tsx | 5 ++-- .../OrganizationSwitcherPopover.tsx | 24 +++++++-------- .../OrganizationSwitcherTrigger.tsx | 23 +++++++------- .../OtherOrganizationActions.tsx | 8 ++--- .../UserInvitationSuggestionList.tsx | 8 ++--- .../UserMembershipList.tsx | 18 +++++------ .../components/OrganizationSwitcher/utils.ts | 5 ++-- .../src/ui/components/SignIn/SignIn.tsx | 5 ++-- .../SignIn/SignInFactorOneCodeForm.tsx | 7 +++-- .../SignIn/SignInFactorOneEmailLinkCard.tsx | 7 +++-- .../SignIn/SignInFactorOnePasswordCard.tsx | 7 +++-- .../SignIn/SignInFactorTwoBackupCodeCard.tsx | 7 +++-- .../SignIn/SignInFactorTwoCodeForm.tsx | 7 +++-- .../components/SignIn/SignInSocialButtons.tsx | 5 ++-- .../src/ui/components/SignIn/SignInStart.tsx | 5 ++-- .../src/ui/components/SignUp/SignUp.tsx | 5 ++-- .../ui/components/SignUp/SignUpContinue.tsx | 5 ++-- .../components/SignUp/SignUpEmailLinkCard.tsx | 5 ++-- .../components/SignUp/SignUpSocialButtons.tsx | 5 ++-- .../src/ui/components/SignUp/SignUpStart.tsx | 7 +++-- .../SignUp/SignUpVerificationCodeForm.tsx | 5 ++-- .../ui/components/UserButton/UserButton.tsx | 9 ++++-- .../UserButton/UserButtonPopover.tsx | 7 +++-- .../UserButton/UserButtonTrigger.tsx | 4 +-- .../UserButton/useMultisessionActions.tsx | 10 +++---- .../UserProfile/ActiveDevicesSection.tsx | 16 +++++----- .../UserProfile/AddAuthenticatorApp.tsx | 6 ++-- .../UserProfile/ConnectedAccountsPage.tsx | 13 ++++---- .../UserProfile/ConnectedAccountsSection.tsx | 16 +++++++--- .../ui/components/UserProfile/DeletePage.tsx | 12 ++++++-- .../ui/components/UserProfile/EmailPage.tsx | 11 +++---- .../components/UserProfile/EmailSection.tsx | 12 ++++---- .../UserProfile/EnterpriseAccountsSection.tsx | 8 ++--- .../UserProfile/MfaBackupCodeCreatePage.tsx | 6 ++-- .../UserProfile/MfaBackupCodeList.tsx | 11 +++++-- .../src/ui/components/UserProfile/MfaPage.tsx | 10 +++++-- .../UserProfile/MfaPhoneCodePage.tsx | 9 ++++-- .../ui/components/UserProfile/MfaSection.tsx | 10 +++++-- .../components/UserProfile/PasswordPage.tsx | 14 ++++++--- .../UserProfile/PasswordSection.tsx | 11 +++++-- .../ui/components/UserProfile/PhonePage.tsx | 12 ++++---- .../components/UserProfile/PhoneSection.tsx | 13 +++++--- .../ui/components/UserProfile/ProfilePage.tsx | 10 +++++-- .../UserProfile/RemoveResourcePage.tsx | 26 ++++++++-------- .../ui/components/UserProfile/RootPage.tsx | 10 ++++--- .../UserProfile/UserProfileSection.tsx | 11 +++++-- .../components/UserProfile/UsernamePage.tsx | 11 +++++-- .../UserProfile/UsernameSection.tsx | 9 ++++-- .../ui/components/UserProfile/VerifyTOTP.tsx | 6 ++-- .../ui/components/UserProfile/Web3Page.tsx | 17 +++++++---- .../ui/components/UserProfile/Web3Section.tsx | 6 ++-- .../ui/contexts/ClerkUIComponentsContext.tsx | 11 +++---- .../src/ui/contexts/CoreClerkContext.tsx | 3 -- .../ui/contexts/CoreClerkContextWrapper.tsx | 30 ++++++++++--------- .../src/ui/contexts/CoreClientContext.tsx | 14 ++------- .../ui/contexts/CoreOrganizationContext.tsx | 5 ---- .../src/ui/contexts/CoreSessionContext.tsx | 25 +++++----------- .../src/ui/contexts/CoreUserContext.tsx | 23 ++++---------- packages/clerk-js/src/ui/contexts/index.ts | 2 -- .../src/ui/elements/PhoneInput/PhoneInput.tsx | 4 +-- .../__tests__/useCoreOrganization.test.tsx | 9 +++--- .../useCoreOrganizationList.test.tsx | 16 +++++----- .../hooks/__tests__/useSupportEmail.test.tsx | 10 +++---- .../clerk-js/src/ui/hooks/useFetchRoles.ts | 5 ++-- .../src/ui/hooks/useSetSessionWithTimeout.ts | 5 ++-- .../clerk-js/src/ui/hooks/useSupportEmail.ts | 5 ++-- .../ui/localization/applyTokensToString.ts | 6 ++-- .../clerk-js/src/ui/router/BaseRouter.tsx | 4 +-- .../clerk-js/src/ui/router/PathRouter.tsx | 4 +-- packages/clerk-js/src/ui/router/Route.tsx | 5 ++-- .../ui/router/__tests__/HashRouter.test.tsx | 4 +-- .../ui/router/__tests__/PathRouter.test.tsx | 4 +-- .../src/ui/router/__tests__/Switch.test.tsx | 4 +-- .../router/__tests__/VirtualRouter.test.tsx | 4 +-- .../src/contexts/ClerkContextProvider.tsx | 7 ++--- packages/react/src/contexts/ClientContext.tsx | 1 - .../src/contexts/IsomorphicClerkContext.tsx | 5 +++- packages/react/src/hooks/index.ts | 14 +++++---- packages/react/src/hooks/useAuth.ts | 3 +- packages/react/src/hooks/useClerk.ts | 10 ------- packages/react/src/hooks/useOrganization.ts | 1 - .../react/src/hooks/useOrganizationList.ts | 1 - packages/react/src/hooks/useSignIn.ts | 2 +- packages/react/src/hooks/useSignUp.ts | 2 +- packages/shared/src/react/hooks/index.ts | 4 +++ packages/shared/src/react/hooks/useClerk.ts | 5 ++++ .../src/react}/hooks/useSession.ts | 2 +- .../src/react}/hooks/useSessionList.ts | 5 ++-- .../src => shared/src/react}/hooks/useUser.ts | 2 +- 220 files changed, 1025 insertions(+), 808 deletions(-) create mode 100644 .changeset/blue-grapes-marry.md delete mode 100644 packages/clerk-js/src/ui.retheme/contexts/CoreClerkContext.tsx delete mode 100644 packages/clerk-js/src/ui.retheme/contexts/CoreOrganizationContext.tsx delete mode 100644 packages/clerk-js/src/ui/contexts/CoreClerkContext.tsx delete mode 100644 packages/clerk-js/src/ui/contexts/CoreOrganizationContext.tsx delete mode 100644 packages/react/src/contexts/ClientContext.tsx delete mode 100644 packages/react/src/hooks/useClerk.ts delete mode 100644 packages/react/src/hooks/useOrganization.ts delete mode 100644 packages/react/src/hooks/useOrganizationList.ts create mode 100644 packages/shared/src/react/hooks/useClerk.ts rename packages/{react/src => shared/src/react}/hooks/useSession.ts (95%) rename packages/{react/src => shared/src/react}/hooks/useSessionList.ts (76%) rename packages/{react/src => shared/src/react}/hooks/useUser.ts (95%) diff --git a/.changeset/blue-grapes-marry.md b/.changeset/blue-grapes-marry.md new file mode 100644 index 0000000000..e815dbac05 --- /dev/null +++ b/.changeset/blue-grapes-marry.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': minor +'@clerk/shared': minor +--- + +Move usage of internal useCoreX hooks to useX hooks diff --git a/packages/clerk-js/src/ui.retheme/common/EmailLinkVerify.tsx b/packages/clerk-js/src/ui.retheme/common/EmailLinkVerify.tsx index ecf1bb13dd..5aec89f70b 100644 --- a/packages/clerk-js/src/ui.retheme/common/EmailLinkVerify.tsx +++ b/packages/clerk-js/src/ui.retheme/common/EmailLinkVerify.tsx @@ -1,9 +1,10 @@ import { EmailLinkErrorCode, isEmailLinkError } from '@clerk/shared/error'; +import { useClerk } from '@clerk/shared/react'; import React from 'react'; import type { VerificationStatus } from '../../utils'; import { completeSignUpFlow } from '../../utils'; -import { useCoreClerk, useCoreSignUp } from '../contexts'; +import { useCoreSignUp } from '../contexts'; import type { LocalizationKey } from '../localization'; import { useRouter } from '../router'; import { sleep } from '../utils'; @@ -19,7 +20,7 @@ export type EmailLinkVerifyProps = { export const EmailLinkVerify = (props: EmailLinkVerifyProps) => { const { redirectUrl, redirectUrlComplete, verifyEmailPath, verifyPhonePath } = props; - const { handleEmailLinkVerification } = useCoreClerk(); + const { handleEmailLinkVerification } = useClerk(); const { navigate } = useRouter(); const signUp = useCoreSignUp(); const [verificationStatus, setVerificationStatus] = React.useState('loading'); diff --git a/packages/clerk-js/src/ui.retheme/common/Gate.tsx b/packages/clerk-js/src/ui.retheme/common/Gate.tsx index 0c1a016742..1644b6c7b0 100644 --- a/packages/clerk-js/src/ui.retheme/common/Gate.tsx +++ b/packages/clerk-js/src/ui.retheme/common/Gate.tsx @@ -1,8 +1,8 @@ +import { useSession } from '@clerk/shared/react'; import type { CheckAuthorization } from '@clerk/types'; import type { ComponentType, PropsWithChildren, ReactNode } from 'react'; import React, { useEffect } from 'react'; -import { useCoreSession } from '../contexts'; import { useRouter } from '../router'; type GateParams = Parameters[0]; @@ -14,10 +14,10 @@ type GateProps = PropsWithChildren< >; export const useGate = (params: GateParams) => { - const { experimental__checkAuthorization } = useCoreSession(); + const { session } = useSession(); return { - isAuthorizedUser: experimental__checkAuthorization(params), + isAuthorizedUser: session?.experimental__checkAuthorization(params), }; }; diff --git a/packages/clerk-js/src/ui.retheme/common/SSOCallback.tsx b/packages/clerk-js/src/ui.retheme/common/SSOCallback.tsx index 1284fed623..dfa75aeaa1 100644 --- a/packages/clerk-js/src/ui.retheme/common/SSOCallback.tsx +++ b/packages/clerk-js/src/ui.retheme/common/SSOCallback.tsx @@ -1,7 +1,7 @@ +import { useClerk } from '@clerk/shared/react'; import type { HandleOAuthCallbackParams, HandleSamlCallbackParams } from '@clerk/types'; import React from 'react'; -import { useCoreClerk } from '../contexts'; import { Flow } from '../customizables'; import { Card, CardAlert, LoadingCardContainer, useCardState, withCardStateProvider } from '../elements'; import { useRouter } from '../router'; @@ -16,7 +16,7 @@ export const SSOCallback = withCardStateProvider { - const { handleRedirectCallback } = useCoreClerk(); + const { handleRedirectCallback } = useClerk(); const { navigate } = useRouter(); const card = useCardState(); diff --git a/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx b/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx index ffaad55be7..9309dfe231 100644 --- a/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx +++ b/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx @@ -1,10 +1,11 @@ +import { useClerk } from '@clerk/shared/react'; import type { ComponentType } from 'react'; import React from 'react'; import { warnings } from '../../core/warnings'; import type { ComponentGuard } from '../../utils'; import { noOrganizationExists, noUserExists, sessionExistsAndSingleSessionModeEnabled } from '../../utils'; -import { useCoreClerk, useEnvironment, useOptions } from '../contexts'; +import { useEnvironment, useOptions } from '../contexts'; import { useRouter } from '../router'; import type { AvailableComponentProps } from '../types'; @@ -18,7 +19,7 @@ function withRedirectToHome

( const HOC = (props: P) => { const { navigate } = useRouter(); - const clerk = useCoreClerk(); + const clerk = useClerk(); const environment = useEnvironment(); const options = useOptions(); diff --git a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx index c5cbfceef8..6ad0557d02 100644 --- a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx +++ b/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx @@ -1,8 +1,8 @@ +import { useOrganization, useOrganizationList } from '@clerk/shared/react'; import type { OrganizationResource } from '@clerk/types'; import React from 'react'; import { useWizard, Wizard } from '../../common'; -import { useCoreOrganization, useCoreOrganizationList } from '../../contexts'; import { Icon } from '../../customizables'; import { ContentPage, Form, FormButtonContainer, IconButton, SuccessPage, useCardState } from '../../elements'; import { QuestionMark, Upload } from '../../icons'; @@ -30,8 +30,8 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => { const wizard = useWizard({ onNextStep: () => card.setError(undefined) }); const lastCreatedOrganizationRef = React.useRef(null); - const { createOrganization, isLoaded, setActive } = useCoreOrganizationList(); - const { organization } = useCoreOrganization(); + const { createOrganization, isLoaded, setActive } = useOrganizationList(); + const { organization } = useOrganization(); const [file, setFile] = React.useState(); const nameField = useFormControl('name', '', { diff --git a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationPage.tsx index 71f3f17cfc..6b4c335cc6 100644 --- a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationPage.tsx +++ b/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationPage.tsx @@ -1,11 +1,13 @@ -import { useCoreClerk, useCreateOrganizationContext } from '../../contexts'; +import { useClerk } from '@clerk/shared/react'; + +import { useCreateOrganizationContext } from '../../contexts'; import { localizationKeys } from '../../customizables'; import { withCardStateProvider } from '../../elements'; import { CreateOrganizationForm } from './CreateOrganizationForm'; export const CreateOrganizationPage = withCardStateProvider(() => { const title = localizationKeys('createOrganization.title'); - const { closeCreateOrganization } = useCoreClerk(); + const { closeCreateOrganization } = useClerk(); const { mode, navigateAfterCreateOrganization, skipInvitationScreen } = useCreateOrganizationContext(); diff --git a/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx b/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx index 1478bb9a74..d5e85e9464 100644 --- a/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx +++ b/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx @@ -1,8 +1,9 @@ +import { useClerk, useSession } from '@clerk/shared/react'; import type { PointerEventHandler } from 'react'; import React, { useEffect, useRef } from 'react'; import { getFullName, getIdentifier } from '../../../utils/user'; -import { useCoreClerk, useCoreSession, withCoreUserGuard } from '../../contexts'; +import { withCoreUserGuard } from '../../contexts'; import type { LocalizationKey } from '../../customizables'; import { Col, @@ -57,8 +58,8 @@ const EyeCircle = ({ width, height, ...props }: EyeCircleProps) => { type FabContentProps = { title: LocalizationKey; signOutText: LocalizationKey }; const FabContent = ({ title, signOutText }: FabContentProps) => { - const session = useCoreSession(); - const { signOut } = useCoreClerk(); + const { session } = useSession(); + const { signOut } = useClerk(); return ( { })} localizationKey={signOutText} onClick={async () => { - await signOut({ sessionId: session.id }); + // clerk-js has been loaded at this point so we can safely access session + await signOut({ sessionId: session!.id }); }} /> @@ -96,7 +98,7 @@ const FabContent = ({ title, signOutText }: FabContentProps) => { }; const _ImpersonationFab = () => { - const session = useCoreSession(); + const { session } = useSession(); const { t } = useLocalizations(); const { parsedInternalTheme } = useAppearance(); const containerRef = useRef(null); diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx index 87dcd8a807..ad55613662 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx @@ -1,6 +1,7 @@ +import { useOrganizationList } from '@clerk/shared/react'; import { useState } from 'react'; -import { useCoreOrganizationList, useEnvironment, useOrganizationListContext } from '../../contexts'; +import { useEnvironment, useOrganizationListContext } from '../../contexts'; import { Box, Button, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables'; import { Card, CardAlert, Divider, Header, useCardState, withCardStateProvider } from '../../elements'; import { useInView } from '../../hooks'; @@ -11,8 +12,8 @@ import { MembershipPreview, PersonalAccountPreview } from './UserMembershipList' import { SuggestionPreview } from './UserSuggestionList'; import { organizationListParams } from './utils'; -const useCoreOrganizationListInView = () => { - const { userMemberships, userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams); +const useOrganizationListInView = () => { + const { userMemberships, userInvitations, userSuggestions } = useOrganizationList(organizationListParams); const { ref } = useInView({ threshold: 0, @@ -40,7 +41,7 @@ const useCoreOrganizationListInView = () => { export const OrganizationListPage = withCardStateProvider(() => { const card = useCardState(); - const { userMemberships, userSuggestions, userInvitations } = useCoreOrganizationListInView(); + const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView(); const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading; const hasAnyData = !!(userMemberships?.count || userInvitations?.count || userSuggestions?.count); @@ -118,7 +119,7 @@ const OrganizationListFlows = ({ showListInitially }: { showListInitially: boole const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void }) => { const environment = useEnvironment(); - const { ref, userMemberships, userSuggestions, userInvitations } = useCoreOrganizationListInView(); + const { ref, userMemberships, userSuggestions, userInvitations } = useOrganizationListInView(); const { hidePersonal } = useOrganizationListContext(); const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading; diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx index 5fc91c5f52..8eddb100f8 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx @@ -1,7 +1,7 @@ +import { useClerk, useOrganizationList } from '@clerk/shared/react'; import type { OrganizationResource, UserOrganizationInvitationResource } from '@clerk/types'; import { useState } from 'react'; -import { useCoreClerk, useCoreOrganizationList } from '../../contexts'; import { localizationKeys } from '../../customizables'; import { useCardState, withCardStateProvider } from '../../elements'; import { handleError } from '../../utils'; @@ -24,9 +24,9 @@ export const AcceptRejectInvitationButtons = (props: { onAccept: () => void }) = export const InvitationPreview = withCardStateProvider((props: UserOrganizationInvitationResource) => { const card = useCardState(); - const { getOrganization } = useCoreClerk(); + const { getOrganization } = useClerk(); const [acceptedOrganization, setAcceptedOrganization] = useState(null); - const { userInvitations } = useCoreOrganizationList({ + const { userInvitations } = useOrganizationList({ userInvitations: organizationListParams.userInvitations, }); diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx index 612838c7db..b834713d39 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx @@ -1,6 +1,7 @@ +import { useOrganizationList, useUser } from '@clerk/shared/react'; import type { OrganizationResource } from '@clerk/types'; -import { useCoreOrganizationList, useCoreUser, useOrganizationListContext } from '../../contexts'; +import { useOrganizationListContext } from '../../contexts'; import { OrganizationPreview, PersonalWorkspacePreview, useCardState, withCardStateProvider } from '../../elements'; import { localizationKeys } from '../../localization'; import { OrganizationListPreviewButton, sharedMainIdentifierSx } from './shared'; @@ -8,7 +9,7 @@ import { OrganizationListPreviewButton, sharedMainIdentifierSx } from './shared' export const MembershipPreview = withCardStateProvider((props: { organization: OrganizationResource }) => { const card = useCardState(); const { navigateAfterSelectOrganization } = useOrganizationListContext(); - const { isLoaded, setActive } = useCoreOrganizationList(); + const { isLoaded, setActive } = useOrganizationList(); if (!isLoaded) { return null; @@ -35,8 +36,12 @@ export const MembershipPreview = withCardStateProvider((props: { organization: O export const PersonalAccountPreview = withCardStateProvider(() => { const card = useCardState(); const { hidePersonal, navigateAfterSelectPersonal } = useOrganizationListContext(); - const { isLoaded, setActive } = useCoreOrganizationList(); - const user = useCoreUser(); + const { isLoaded, setActive } = useOrganizationList(); + const { user } = useUser(); + + if (!user) { + return null; + } const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user; diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserSuggestionList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserSuggestionList.tsx index 3c8af375e7..6053803456 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserSuggestionList.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserSuggestionList.tsx @@ -1,6 +1,6 @@ +import { useOrganizationList } from '@clerk/shared/react'; import type { OrganizationSuggestionResource } from '@clerk/types'; -import { useCoreOrganizationList } from '../../contexts'; import { localizationKeys, Text } from '../../customizables'; import { useCardState, withCardStateProvider } from '../../elements'; import { handleError } from '../../utils'; @@ -10,7 +10,7 @@ import { organizationListParams } from './utils'; export const AcceptRejectInvitationButtons = (props: OrganizationSuggestionResource) => { const card = useCardState(); - const { userSuggestions } = useCoreOrganizationList({ + const { userSuggestions } = useOrganizationList({ userSuggestions: organizationListParams.userSuggestions, }); diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/utils.ts b/packages/clerk-js/src/ui.retheme/components/OrganizationList/utils.ts index 6382e00c60..0fd0d468fd 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/utils.ts +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationList/utils.ts @@ -1,4 +1,4 @@ -import type { useCoreOrganizationList } from '../../contexts'; +import type { useOrganizationList } from '@clerk/shared/react'; export const organizationListParams = { userMemberships: { @@ -11,4 +11,4 @@ export const organizationListParams = { infinite: true, status: ['pending', 'accepted'], }, -} satisfies Parameters[0]; +} satisfies Parameters[0]; diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx index c176b6ef5c..3742cdd418 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx @@ -1,5 +1,7 @@ +import { useOrganization, useUser } from '@clerk/shared/react'; + import { useWizard, Wizard } from '../../common'; -import { useCoreOrganization, useCoreUser, useOrganizationProfileContext } from '../../contexts'; +import { useOrganizationProfileContext } from '../../contexts'; import type { LocalizationKey } from '../../customizables'; import { localizationKeys, Text } from '../../customizables'; import { @@ -17,10 +19,10 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar'; export const LeaveOrganizationPage = () => { const card = useCardState(); const { navigateAfterLeaveOrganization } = useOrganizationProfileContext(); - const { organization } = useCoreOrganization(); - const user = useCoreUser(); + const { organization } = useOrganization(); + const { user } = useUser(); - if (!organization) { + if (!organization || !user) { return null; } @@ -50,7 +52,7 @@ export const LeaveOrganizationPage = () => { export const DeleteOrganizationPage = () => { const card = useCardState(); const { navigateAfterLeaveOrganization } = useOrganizationProfileContext(); - const { organization } = useCoreOrganization(); + const { organization } = useOrganization(); if (!organization) { return null; diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx index bae66d80d9..f12e836c0d 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx @@ -1,7 +1,7 @@ +import { useOrganization, useUser } from '@clerk/shared/react'; import type { OrganizationMembershipResource } from '@clerk/types'; import { Gate } from '../../common/Gate'; -import { useCoreOrganization, useCoreUser } from '../../contexts'; import { Badge, localizationKeys, Td, Text } from '../../customizables'; import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements'; import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles'; @@ -17,7 +17,7 @@ const membershipsParams = { export const ActiveMembersList = () => { const card = useCardState(); - const { organization, memberships } = useCoreOrganization(membershipsParams); + const { organization, memberships } = useOrganization(membershipsParams); const { options, isLoading: loadingRoles } = useFetchRoles(); @@ -76,9 +76,9 @@ const MemberRow = (props: { const { membership, onRemove, onRoleChange, options } = props; const { localizeCustomRole } = useLocalizeCustomRoles(); const card = useCardState(); - const user = useCoreUser(); + const { user } = useUser(); - const isCurrentUser = user.id === membership.publicUserData.userId; + const isCurrentUser = user?.id === membership.publicUserData.userId; const unlocalizedRoleLabel = options?.find(a => a.value === membership.role)?.label; return ( diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/AddDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/AddDomainPage.tsx index af8c2b502b..076d450893 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/AddDomainPage.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/AddDomainPage.tsx @@ -1,6 +1,7 @@ +import { useOrganization } from '@clerk/shared/react'; import React from 'react'; -import { useCoreOrganization, useEnvironment } from '../../contexts'; +import { useEnvironment } from '../../contexts'; import { localizationKeys } from '../../customizables'; import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements'; import { useRouter } from '../../router'; @@ -13,7 +14,7 @@ export const AddDomainPage = withCardStateProvider(() => { const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle'); const breadcrumbTitle = localizationKeys('organizationProfile.profilePage.domainSection.title'); const card = useCardState(); - const { organization } = useCoreOrganization(); + const { organization } = useOrganization(); const { navigate } = useRouter(); const nameField = useFormControl('name', '', { diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx index b1178894ba..8fc7e3bb50 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx @@ -1,3 +1,4 @@ +import { useOrganization } from '@clerk/shared/react'; import type { GetDomainsParams, OrganizationDomainResource, @@ -8,7 +9,6 @@ import React, { useMemo } from 'react'; import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils'; import { useGate, withGate } from '../../common'; -import { useCoreOrganization } from '../../contexts'; import type { LocalizationKey } from '../../customizables'; import { Box, Col, descriptors, localizationKeys, Spinner } from '../../customizables'; import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements'; @@ -81,7 +81,7 @@ const DomainListDotMenu = ({ export const DomainList = withGate( (props: DomainListProps) => { const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props; - const { organization, domains } = useCoreOrganization({ + const { organization, domains } = useOrganization({ domains: { infinite: true, ...rest, diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx index 938e377b26..275317b146 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx @@ -1,9 +1,9 @@ import { isClerkAPIResponseError } from '@clerk/shared/error'; +import { useOrganization } from '@clerk/shared/react'; import type { ClerkAPIError, MembershipRole } from '@clerk/types'; import type { FormEvent } from 'react'; import { useState } from 'react'; -import { useCoreOrganization } from '../../contexts'; import { Flex, Text } from '../../customizables'; import { Form, FormButtonContainer, TagInput, useCardState } from '../../elements'; import { useFetchRoles } from '../../hooks/useFetchRoles'; @@ -25,7 +25,7 @@ type InviteMembersFormProps = { export const InviteMembersForm = (props: InviteMembersFormProps) => { const { navigate } = useRouter(); const { onSuccess, onReset = () => navigate('..'), resetButtonLabel } = props; - const { organization, invitations } = useCoreOrganization({ + const { organization, invitations } = useOrganization({ invitations: { pageSize: 10, keepPreviousData: true, diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersPage.tsx index 4d442d65a9..7e42fd4543 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersPage.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersPage.tsx @@ -1,6 +1,8 @@ +import { useOrganization } from '@clerk/shared/react'; + import { runIfFunctionOrReturn } from '../../../utils'; import { useWizard, Wizard } from '../../common'; -import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts'; +import { useOrganizationProfileContext } from '../../contexts'; import { descriptors, Flex, localizationKeys, Text } from '../../customizables'; import { ContentPage, IconCircle, SuccessPage, useCardState, withCardStateProvider } from '../../elements'; import { Email } from '../../icons'; @@ -13,7 +15,7 @@ export const InviteMembersPage = withCardStateProvider(() => { const subtitle = localizationKeys('organizationProfile.invitePage.subtitle'); const card = useCardState(); const wizard = useWizard({ onNextStep: () => card.setError(undefined) }); - const { organization } = useCoreOrganization(); + const { organization } = useOrganization(); //@ts-expect-error const { __unstable_manageBillingUrl, __unstable_manageBillingMembersLimit } = useOrganizationProfileContext(); diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InvitedMembersList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InvitedMembersList.tsx index b3cac6fcb6..07f82f03d4 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InvitedMembersList.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InvitedMembersList.tsx @@ -1,6 +1,6 @@ +import { useOrganization } from '@clerk/shared/react'; import type { OrganizationInvitationResource } from '@clerk/types'; -import { useCoreOrganization } from '../../contexts'; import { localizationKeys, Td, Text } from '../../customizables'; import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements'; import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles'; @@ -16,7 +16,7 @@ const invitationsParams = { export const InvitedMembersList = () => { const card = useCardState(); - const { organization, invitations } = useCoreOrganization(invitationsParams); + const { organization, invitations } = useOrganization(invitationsParams); const { options, isLoading: loadingRoles } = useFetchRoles(); diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx index 2e9d77e063..b69bbe4261 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx @@ -1,10 +1,12 @@ +import { useOrganization } from '@clerk/shared/react'; + import { runIfFunctionOrReturn } from '../../../utils'; -import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts'; +import { useOrganizationProfileContext } from '../../contexts'; import { Col, Flex, Link, Text } from '../../customizables'; import { useRouter } from '../../router'; export const MembershipWidget = () => { - const { organization } = useCoreOrganization(); + const { organization } = useOrganization(); //@ts-expect-error const { __unstable_manageBillingUrl, __unstable_manageBillingLabel, __unstable_manageBillingMembersLimit } = useOrganizationProfileContext(); diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx index b8f7a62f16..3955c079d2 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx @@ -1,5 +1,7 @@ +import { useOrganization } from '@clerk/shared/react'; + import { NotificationCountBadge, useGate } from '../../common'; -import { useCoreOrganization, useEnvironment, useOrganizationProfileContext } from '../../contexts'; +import { useEnvironment, useOrganizationProfileContext } from '../../contexts'; import { Col, descriptors, Flex, localizationKeys } from '../../customizables'; import { CardAlert, @@ -24,7 +26,7 @@ export const OrganizationMembers = withCardStateProvider(() => { const { isAuthorizedUser: canManageMemberships } = useGate({ permission: 'org:sys_memberships:manage' }); const { isAuthorizedUser: canReadMemberships } = useGate({ permission: 'org:sys_memberships:read' }); const isDomainsEnabled = organizationSettings?.domains?.enabled; - const { membershipRequests } = useCoreOrganization({ + const { membershipRequests } = useOrganization({ membershipRequests: isDomainsEnabled || undefined, }); diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx index 6b85673052..a0ecc4ad25 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx @@ -1,8 +1,9 @@ +import { useOrganization } from '@clerk/shared/react'; import type { OrganizationProfileModalProps, OrganizationProfileProps } from '@clerk/types'; import React from 'react'; import { withOrganizationsEnabledGuard, withRedirectToHomeOrganizationGuard } from '../../common'; -import { ComponentContext, useCoreOrganization, withCoreUserGuard } from '../../contexts'; +import { ComponentContext, withCoreUserGuard } from '../../contexts'; import { Flow } from '../../customizables'; import { ProfileCard, withCardStateProvider } from '../../elements'; import { Route, Switch } from '../../router'; @@ -11,8 +12,7 @@ import { OrganizationProfileNavbar } from './OrganizationProfileNavbar'; import { OrganizationProfileRoutes } from './OrganizationProfileRoutes'; const _OrganizationProfile = (_: OrganizationProfileProps) => { - // TODO: Should this be a guard HOC? - const { organization } = useCoreOrganization(); + const { organization } = useOrganization(); if (!organization) { return null; diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx index ffc8dea5da..b8300940aa 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx @@ -1,15 +1,16 @@ +import { useOrganization } from '@clerk/shared/react'; import React from 'react'; import { useGate } from '../../common'; import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID } from '../../constants'; -import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts'; +import { useOrganizationProfileContext } from '../../contexts'; import { Breadcrumbs, NavBar, NavbarContextProvider, OrganizationPreview } from '../../elements'; import type { PropsOfComponent } from '../../styledSystem'; export const OrganizationProfileNavbar = ( props: React.PropsWithChildren, 'contentRef'>>, ) => { - const { organization } = useCoreOrganization(); + const { organization } = useOrganization(); const { pages } = useOrganizationProfileContext(); const { isAuthorizedUser: allowMembersRoute } = useGate({ diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx index faca9fa90c..4af1571768 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx @@ -1,5 +1,7 @@ +import { useOrganization } from '@clerk/shared/react'; + import { AddBlockButton, BlockButton, Gate, useGate } from '../../common'; -import { useCoreOrganization, useEnvironment } from '../../contexts'; +import { useEnvironment } from '../../contexts'; import { Col, descriptors, Flex, Icon, localizationKeys } from '../../customizables'; import { Header, IconButton, NavbarMenuButtonRow, OrganizationPreview, ProfileSection } from '../../elements'; import { Times } from '../../icons'; @@ -36,7 +38,7 @@ export const OrganizationSettings = () => { }; const OrganizationProfileSection = () => { - const { organization } = useCoreOrganization(); + const { organization } = useOrganization(); const { navigate } = useRouter(); if (!organization) { @@ -67,7 +69,7 @@ const OrganizationProfileSection = () => { const OrganizationDomainsSection = () => { const { organizationSettings } = useEnvironment(); - const { organization } = useCoreOrganization(); + const { organization } = useOrganization(); const { navigate } = useRouter(); @@ -97,7 +99,7 @@ const OrganizationDomainsSection = () => { }; const OrganizationDangerSection = () => { - const { organization } = useCoreOrganization(); + const { organization } = useOrganization(); const { navigate } = useRouter(); const { isAuthorizedUser: canDeleteOrganization } = useGate({ permission: 'org:sys_profile:delete' }); diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ProfileSettingsPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ProfileSettingsPage.tsx index 966ce440e1..d08e68572b 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ProfileSettingsPage.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ProfileSettingsPage.tsx @@ -1,8 +1,8 @@ +import { useOrganization } from '@clerk/shared/react'; import React from 'react'; import { isDefaultImage } from '../../../utils'; import { useWizard, Wizard } from '../../common'; -import { useCoreOrganization } from '../../contexts'; import { localizationKeys } from '../../customizables'; import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements'; import { handleError, useFormControl } from '../../utils'; @@ -14,7 +14,7 @@ export const ProfileSettingsPage = withCardStateProvider(() => { const subtitle = localizationKeys('organizationProfile.profilePage.subtitle'); const card = useCardState(); const [avatarChanged, setAvatarChanged] = React.useState(false); - const { organization } = useCoreOrganization(); + const { organization } = useOrganization(); const wizard = useWizard({ onNextStep: () => card.setError(undefined) }); diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RemoveDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RemoveDomainPage.tsx index 50f0aaec49..23b950749d 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RemoveDomainPage.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RemoveDomainPage.tsx @@ -1,8 +1,9 @@ +import { useOrganization } from '@clerk/shared/react'; import type { OrganizationDomainResource } from '@clerk/types'; import React from 'react'; import { RemoveResourcePage } from '../../common'; -import { useCoreOrganization, useEnvironment } from '../../contexts'; +import { useEnvironment } from '../../contexts'; import { descriptors, Flex, Spinner } from '../../customizables'; import { useFetch } from '../../hooks'; import { localizationKeys } from '../../localization'; @@ -11,7 +12,7 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar'; export const RemoveDomainPage = () => { const { organizationSettings } = useEnvironment(); - const { organization } = useCoreOrganization(); + const { organization } = useOrganization(); const { params } = useRouter(); const ref = React.useRef(); @@ -27,7 +28,7 @@ export const RemoveDomainPage = () => { }, ); - const { domains } = useCoreOrganization({ + const { domains } = useOrganization({ domains: { infinite: true, }, diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RequestToJoinList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RequestToJoinList.tsx index 709cbd7043..f24f7c7b7b 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RequestToJoinList.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RequestToJoinList.tsx @@ -1,6 +1,6 @@ +import { useOrganization } from '@clerk/shared/react'; import type { OrganizationMembershipRequestResource } from '@clerk/types'; -import { useCoreOrganization } from '../../contexts'; import { Button, Flex, localizationKeys, Td } from '../../customizables'; import { useCardState, UserPreview, withCardStateProvider } from '../../elements'; import { handleError } from '../../utils'; @@ -15,7 +15,7 @@ const membershipRequestsParams = { export const RequestToJoinList = () => { const card = useCardState(); - const { organization, membershipRequests } = useCoreOrganization(membershipRequestsParams); + const { organization, membershipRequests } = useOrganization(membershipRequestsParams); if (!organization) { return null; @@ -50,7 +50,7 @@ const RequestRow = withCardStateProvider( (props: { request: OrganizationMembershipRequestResource; onError: ReturnType['setError'] }) => { const { request, onError } = props; const card = useCardState(); - const { membership, membershipRequests } = useCoreOrganization(membershipRequestsParams); + const { membership, membershipRequests } = useOrganization(membershipRequestsParams); const onAccept = () => { if (!membership || !membershipRequests) { diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx index 84e7119544..96f29ef0cf 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx @@ -1,3 +1,4 @@ +import { useOrganization } from '@clerk/shared/react'; import type { OrganizationDomainResource, OrganizationEnrollmentMode, @@ -5,7 +6,7 @@ import type { } from '@clerk/types'; import { CalloutWithAction, useGate } from '../../common'; -import { useCoreOrganization, useEnvironment } from '../../contexts'; +import { useEnvironment } from '../../contexts'; import type { LocalizationKey } from '../../customizables'; import { Col, descriptors, Flex, localizationKeys, Spinner, Text } from '../../customizables'; import { @@ -99,7 +100,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => { const card = useCardState(); const { organizationSettings } = useEnvironment(); - const { membership, organization, domains } = useCoreOrganization({ + const { membership, organization, domains } = useOrganization({ domains: { infinite: true, }, diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx index c68fba57a4..07710ca8f5 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx @@ -1,7 +1,8 @@ +import { useOrganization } from '@clerk/shared/react'; import React, { useRef } from 'react'; import { useWizard, Wizard } from '../../common'; -import { useCoreOrganization, useEnvironment } from '../../contexts'; +import { useEnvironment } from '../../contexts'; import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables'; import type { VerificationCodeCardProps } from '../../elements'; import { @@ -21,7 +22,7 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar'; export const VerifyDomainPage = withCardStateProvider(() => { const card = useCardState(); const { organizationSettings } = useEnvironment(); - const { organization } = useCoreOrganization(); + const { organization } = useOrganization(); const { params, navigate } = useRouter(); const { data: domain, status: domainStatus } = useFetch(organization?.getDomain, { diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx index f584cc151b..302ad9ba7a 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx @@ -1,16 +1,10 @@ +import { useClerk, useOrganization, useOrganizationList, useUser } from '@clerk/shared/react'; import type { OrganizationResource } from '@clerk/types'; import React from 'react'; import { runIfFunctionOrReturn } from '../../../utils'; import { NotificationCountBadge, withGate } from '../../common'; -import { - useCoreClerk, - useCoreOrganization, - useCoreOrganizationList, - useCoreUser, - useEnvironment, - useOrganizationSwitcherContext, -} from '../../contexts'; +import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts'; import { descriptors, localizationKeys } from '../../customizables'; import { Action, @@ -32,9 +26,9 @@ export const OrganizationSwitcherPopover = React.forwardRef { const { close, ...rest } = props; const card = useCardState(); - const { openOrganizationProfile, openCreateOrganization } = useCoreClerk(); - const { organization: currentOrg } = useCoreOrganization(); - const { isLoaded, setActive } = useCoreOrganizationList(); + const { openOrganizationProfile, openCreateOrganization } = useClerk(); + const { organization: currentOrg } = useOrganization(); + const { isLoaded, setActive } = useOrganizationList(); const router = useRouter(); const { hidePersonal, @@ -55,7 +49,11 @@ export const OrganizationSwitcherPopover = React.forwardRef((props, ref) => { const { sx, ...rest } = props; - const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = useCoreUser(); - const { organization } = useCoreOrganization(); + const { user } = useUser(); + const { organization } = useOrganization(); const { hidePersonal } = useOrganizationSwitcherContext(); + if (!user) { + return null; + } + + const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user; + return (