diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/InPlaceAcceptedInvitations.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/InPlaceAcceptedInvitations.tsx deleted file mode 100644 index 9c8d5d06452..00000000000 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/InPlaceAcceptedInvitations.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import type { OrganizationResource, UserOrganizationInvitationResource } from '@clerk/types'; -import type { Dispatch, ReactNode, SetStateAction } from 'react'; -import { createContext, useContext, useState } from 'react'; - -type Value = { - acceptedInvitations: { - invitation: UserOrganizationInvitationResource; - organization: OrganizationResource; - }[]; - setAcceptedInvitations: Dispatch< - SetStateAction<{ invitation: UserOrganizationInvitationResource; organization: OrganizationResource }[]> - >; -}; -const InPlaceAcceptedInvitations = createContext({ - acceptedInvitations: [], - setAcceptedInvitations: () => {}, -}); - -interface InPlaceAcceptedInvitationsProps { - children: ReactNode; -} - -function InPlaceAcceptedInvitationsProvider({ children }: InPlaceAcceptedInvitationsProps): JSX.Element { - const [acceptedInvitations, setAcceptedInvitations] = useState< - { - invitation: UserOrganizationInvitationResource; - organization: OrganizationResource; - }[] - >([]); - return ( - - {children} - - ); -} - -function useInPlaceAcceptedInvitations(): Value { - const context = useContext(InPlaceAcceptedInvitations); - return context; -} - -export { InPlaceAcceptedInvitationsProvider, useInPlaceAcceptedInvitations }; diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx index ffcf27f33d0..50f73f20751 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx @@ -1,11 +1,10 @@ import { useId } from 'react'; import { withOrganizationsEnabledGuard } from '../../common'; -import { withCoreUserGuard } from '../../contexts'; +import { AcceptedInvitationsProvider, withCoreUserGuard } from '../../contexts'; import { Flow } from '../../customizables'; import { Popover, withCardStateProvider, withFloatingTree } from '../../elements'; import { usePopover } from '../../hooks'; -import { InPlaceAcceptedInvitationsProvider } from './InPlaceAcceptedInvitations'; import { OrganizationSwitcherPopover } from './OrganizationSwitcherPopover'; import { OrganizationSwitcherTrigger } from './OrganizationSwitcherTrigger'; @@ -19,7 +18,7 @@ const _OrganizationSwitcher = withFloatingTree(() => { return ( - + { style={{ ...styles }} /> - + ); }); diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx index 516104a9c07..c3937aacd82 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx @@ -7,6 +7,7 @@ import type { import type { PropsWithChildren } from 'react'; import { InfiniteListSpinner } from '../../common'; +import { useAcceptedInvitations } from '../../contexts'; import { Box, Button, descriptors, Flex, localizationKeys, Text } from '../../customizables'; import { Actions, OrganizationPreview, PreviewButton, useCardState, withCardStateProvider } from '../../elements'; import { useInView } from '../../hooks'; @@ -14,7 +15,6 @@ import { SwitchArrowRight } from '../../icons'; import type { PropsOfComponent } from '../../styledSystem'; import { common } from '../../styledSystem'; import { handleError } from '../../utils'; -import { useInPlaceAcceptedInvitations } from './InPlaceAcceptedInvitations'; import { organizationListParams, populateCacheUpdateItem } from './utils'; const useFetchInvitations = () => { @@ -136,7 +136,7 @@ const InvitationPreview = withCardStateProvider( userInvitations: organizationListParams.userInvitations, userMemberships: organizationListParams.userMemberships, }); - const { acceptedInvitations, setAcceptedInvitations } = useInPlaceAcceptedInvitations(); + const { acceptedInvitations, setAcceptedInvitations } = useAcceptedInvitations(); const acceptedOrganization = acceptedInvitations.find(item => item.invitation.id === invitation.id)?.organization; const handleAccept = () => { diff --git a/packages/clerk-js/src/ui/contexts/index.ts b/packages/clerk-js/src/ui/contexts/index.ts index b5aae8b35da..1ae2a67e02c 100644 --- a/packages/clerk-js/src/ui/contexts/index.ts +++ b/packages/clerk-js/src/ui/contexts/index.ts @@ -5,3 +5,4 @@ export * from './OptionsContext'; export * from './CoreSessionContext'; export * from './CoreClientContext'; export * from './CoreClerkContextWrapper'; +export * from './AcceptedUserInvitations';