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 (