Extract force-an-org flow to separate component

Author: LauraBeatris

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

@@ -1,4 +1,4 @@
-import { useOrganizationList, useSessionContext, useUser } from '@clerk/shared/react';
+import { useOrganizationList, useUser } from '@clerk/shared/react';
 import { useContext, useState } from 'react';
 
 import { Action, Actions } from '@/ui/elements/Actions';
@@ -84,6 +84,11 @@ export const OrganizationListPage = withCardStateProvider(() => {
 
   const { hidePersonal } = useOrganizationListContext();
 
+  const sessionTasksContext = useContext(SessionTasksContext);
+  if (sessionTasksContext) {
+    return <ForceOrganizationSelectionFlow />;
+  }
+
   return (
     <Card.Root>
       <Card.Content sx={t => ({ padding: `${t.space.$8} ${t.space.$none} ${t.space.$none}` })}>
@@ -116,8 +121,6 @@ export const OrganizationListPage = withCardStateProvider(() => {
 const OrganizationListFlows = ({ showListInitially }: { showListInitially: boolean }) => {
   const { navigateAfterCreateOrganization, skipInvitationScreen, hideSlug } = useOrganizationListContext();
   const [isCreateOrganizationFlow, setCreateOrganizationFlow] = useState(!showListInitially);
-  const sessionTasksContext = useContext(SessionTasksContext);
-  const session = useSessionContext();
 
   return (
     <>
@@ -133,23 +136,9 @@ const OrganizationListFlows = ({ showListInitially }: { showListInitially: boole
         >
           <CreateOrganizationForm
             flow='organizationList'
-            onComplete={sessionTasksContext?.nextTask}
             startPage={{ headerTitle: localizationKeys('organizationList.createOrganization') }}
             skipInvitationScreen={skipInvitationScreen}
-            navigateAfterCreateOrganization={org =>
-              navigateAfterCreateOrganization(org).then(() => {
-                const isForceOrganizationSelectionFlow = sessionTasksContext && session?.currentTask.key === 'org';
-
-                // During a force organization selection flow, keep displaying the creation form in a loading state
-                // rather than showing the organization list. This allows the client-side navigation to complete
-                // before transitioning away from this view.
-                if (isForceOrganizationSelectionFlow) {
-                  return;
-                }
-
-                setCreateOrganizationFlow(false);
-              })
-            }
+            navigateAfterCreateOrganization={org => navigateAfterCreateOrganization(org)}
             onCancel={
               showListInitially && isCreateOrganizationFlow ? () => setCreateOrganizationFlow(false) : undefined
             }
@@ -240,3 +229,71 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
     </>
   );
 };
+
+const ForceOrganizationSelectionFlow = () => {
+  const card = useCardState();
+  const sessionTasksContext = useContext(SessionTasksContext);
+  const { navigateAfterCreateOrganization, hideSlug } = useOrganizationListContext();
+  const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
+
+  const [isNavigating, setIsNavigating] = useState(false);
+  const isLoading = isNavigating || !!(userMemberships?.count || userInvitations?.count || userSuggestions?.count);
+
+  const [isCreateOrganizationFlow, setIsCreateOrganizationFlow] = useState(!userMemberships?.data?.length);
+
+  if (isLoading) {
+    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>
+          <Flex
+            direction={'row'}
+            align={'center'}
+            justify={'center'}
+            sx={t => ({
+              height: '100%',
+              minHeight: t.sizes.$60,
+            })}
+          >
+            <Spinner
+              size={'lg'}
+              colorScheme={'primary'}
+              elementDescriptor={descriptors.spinner}
+            />
+          </Flex>
+        </Card.Content>
+        <Card.Footer />
+      </Card.Root>
+    );
+  }
+
+  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>
+        {isCreateOrganizationFlow ? (
+          <Box
+            sx={t => ({
+              padding: `${t.space.$none} ${t.space.$5} ${t.space.$5}`,
+            })}
+          >
+            <CreateOrganizationForm
+              flow='organizationList'
+              onComplete={sessionTasksContext?.nextTask}
+              startPage={{ headerTitle: localizationKeys('organizationList.createOrganization') }}
+              skipInvitationScreen
+              navigateAfterCreateOrganization={org => {
+                setIsNavigating(true);
+                return navigateAfterCreateOrganization(org);
+              }}
+              hideSlug={hideSlug}
+            />
+          </Box>
+        ) : (
+          <OrganizationListPageList onCreateOrganizationClick={() => setIsCreateOrganizationFlow(true)} />
+        )}
+      </Card.Content>
+      <Card.Footer />
+    </Card.Root>
+  );
+};