Apply handling for OrganizationList

Author: LauraBeatris

packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx

@@ -49,7 +49,6 @@ const CreateOrganizationButton = ({
 };
 
 export const OrganizationListPage = withCardStateProvider(() => {
-  const card = useCardState();
   const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
   const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
   const hasAnyData = !!(userMemberships?.count || userInvitations?.count || userSuggestions?.count);
@@ -59,7 +58,6 @@ export const OrganizationListPage = withCardStateProvider(() => {
   return (
     <Card.Root>
       <Card.Content sx={t => ({ padding: `${t.space.$8} ${t.space.$none} ${t.space.$none}` })}>
-        <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>
         {isLoading && (
           <Flex
             direction={'row'}
@@ -86,6 +84,7 @@ export const OrganizationListPage = withCardStateProvider(() => {
 });
 
 const OrganizationListFlows = ({ showListInitially }: { showListInitially: boolean }) => {
+  const card = useCardState();
   const { navigateAfterCreateOrganization, skipInvitationScreen, hideSlug } = useOrganizationListContext();
   const [isCreateOrganizationFlow, setCreateOrganizationFlow] = useState(!showListInitially);
   return (
@@ -95,30 +94,35 @@ const OrganizationListFlows = ({ showListInitially }: { showListInitially: boole
       )}
 
       {isCreateOrganizationFlow && (
-        <Box
-          sx={t => ({
-            padding: `${t.space.$none} ${t.space.$5} ${t.space.$5}`,
-          })}
-        >
-          <CreateOrganizationForm
-            flow='organizationList'
-            startPage={{ headerTitle: localizationKeys('organizationList.createOrganization') }}
-            skipInvitationScreen={skipInvitationScreen}
-            navigateAfterCreateOrganization={org =>
-              navigateAfterCreateOrganization(org).then(() => setCreateOrganizationFlow(false))
-            }
-            onCancel={
-              showListInitially && isCreateOrganizationFlow ? () => setCreateOrganizationFlow(false) : undefined
-            }
-            hideSlug={hideSlug}
-          />
-        </Box>
+        <>
+          <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>
+
+          <Box
+            sx={t => ({
+              padding: `${t.space.$none} ${t.space.$5} ${t.space.$5}`,
+            })}
+          >
+            <CreateOrganizationForm
+              flow='organizationList'
+              startPage={{ headerTitle: localizationKeys('organizationList.createOrganization') }}
+              skipInvitationScreen={skipInvitationScreen}
+              navigateAfterCreateOrganization={org =>
+                navigateAfterCreateOrganization(org).then(() => setCreateOrganizationFlow(false))
+              }
+              onCancel={
+                showListInitially && isCreateOrganizationFlow ? () => setCreateOrganizationFlow(false) : undefined
+              }
+              hideSlug={hideSlug}
+            />
+          </Box>
+        </>
       )}
     </>
   );
 };
 
 export const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void }) => {
+  const card = useCardState();
   const environment = useEnvironment();
 
   const { ref, userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
@@ -128,6 +132,9 @@ export const OrganizationListPageList = (props: { onCreateOrganizationClick: ()
   const hasNextPage = userMemberships?.hasNextPage || userInvitations?.hasNextPage || userSuggestions?.hasNextPage;
 
   const onCreateOrganizationClick = () => {
+    // Clean error originated from the list when switching to form
+    card.setError(undefined);
+
     props.onCreateOrganizationClick();
   };
 
@@ -154,6 +161,7 @@ export const OrganizationListPageList = (props: { onCreateOrganizationClick: ()
           })}
         />
       </Header.Root>
+      <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>
       <Col elementDescriptor={descriptors.main}>
         <PreviewListItems>
           <Actions role='menu'>

packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx

@@ -5,28 +5,35 @@ import { sharedMainIdentifierSx } from '@/ui/common/organizations/OrganizationPr
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { OrganizationPreview } from '@/ui/elements/OrganizationPreview';
 import { PersonalWorkspacePreview } from '@/ui/elements/PersonalWorkspacePreview';
+import { handleError } from '@/ui/utils/errorHandler';
 
 import { useOrganizationListContext } from '../../contexts';
 import { localizationKeys } from '../../localization';
 import { OrganizationListPreviewButton } from './shared';
 
-export const MembershipPreview = withCardStateProvider((props: { organization: OrganizationResource }) => {
+export const MembershipPreview = (props: { organization: OrganizationResource }) => {
   const card = useCardState();
   const { navigateAfterSelectOrganization } = useOrganizationListContext();
   const { isLoaded, setActive } = useOrganizationList();
 
   if (!isLoaded) {
     return null;
   }
+
   const handleOrganizationClicked = (organization: OrganizationResource) => {
     return card.runAsync(async () => {
-      await setActive({
-        organization,
-      });
+      try {
+        await setActive({
+          organization,
+        });
 
-      await navigateAfterSelectOrganization(organization);
+        await navigateAfterSelectOrganization(organization);
+      } catch (err) {
+        handleError(err, [], card.setError);
+      }
     });
   };
+
   return (
     <OrganizationListPreviewButton onClick={() => handleOrganizationClicked(props.organization)}>
       <OrganizationPreview
@@ -36,7 +43,8 @@ export const MembershipPreview = withCardStateProvider((props: { organization: O
       />
     </OrganizationListPreviewButton>
   );
-});
+};
+
 export const PersonalAccountPreview = withCardStateProvider(() => {
   const card = useCardState();
   const { hidePersonal, navigateAfterSelectPersonal } = useOrganizationListContext();

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx

@@ -1,4 +1,4 @@
-import { useClerk, useSession, useUserContext } from '@clerk/shared/react';
+import { useClerk, useSession, useUser, useUser } from '@clerk/shared/react';
 import { useState } from 'react';
 
 import { useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';
@@ -14,7 +14,7 @@ import { CreateOrganizationScreen } from './CreateOrganizationScreen';
 
 const TaskChooseOrganizationInternal = () => {
   const { signOut } = useClerk();
-  const user = useUserContext();
+  const { user } = useUser();
   const { session } = useSession();
   const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
   const { otherSessions } = useMultipleSessions({ user });