Extract tasks under /tasks root path

Author: LauraBeatris

packages/clerk-js/src/ui/components/SessionTasks/OrganizationSelectionTask.tsx

@@ -0,0 +1,18 @@
+import { OrganizationListContext } from '../../contexts';
+import { OrganizationList } from '../OrganizationList';
+
+/**
+ * @internal
+ */
+export function OrganizationSelectionTask() {
+  return (
+    <OrganizationListContext.Provider
+      value={{
+        componentName: 'OrganizationList',
+        skipInvitationScreen: true,
+      }}
+    >
+      <OrganizationList />
+    </OrganizationListContext.Provider>
+  );
+}

packages/clerk-js/src/ui/components/SessionTasks/index.ts

@@ -4,24 +4,16 @@ import type { SessionTask } from '@clerk/types';
 import { useCallback, useEffect } from 'react';
 
 import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
-import { OrganizationListContext } from '../../contexts';
 import { SessionTaskContext as SessionTaskContext } from '../../contexts/components/SessionTask';
 import { Route, Switch, useRouter } from '../../router';
-import { OrganizationList } from '../OrganizationList';
+import { LazyOrganizationSelectionTask } from './lazySessionTasks';
+import { usePreloadTasks } from './usePreloadTasks';
 
-// TODO -> Lazy load individual routes per environment config
 function SessionTaskRoutes(): JSX.Element {
   return (
     <Switch>
       <Route path={SESSION_TASK_ROUTE_BY_KEY['org']}>
-        <OrganizationListContext.Provider
-          value={{
-            componentName: 'OrganizationList',
-            skipInvitationScreen: true,
-          }}
-        >
-          <OrganizationList />
-        </OrganizationListContext.Provider>
+        <LazyOrganizationSelectionTask />
       </Route>
     </Switch>
   );
@@ -31,6 +23,7 @@ function SessionTaskRoutes(): JSX.Element {
  * @internal
  */
 export function SessionTask({ redirectUrlComplete }: { redirectUrlComplete: string }): JSX.Element {
+  usePreloadTasks();
   const { __experimental_nextTask, session, telemetry } = useClerk();
   const { navigate } = useRouter();
 

packages/clerk-js/src/ui/components/SessionTasks/SessionTasks.tsx renamed to packages/clerk-js/src/ui/components/SessionTasks/index.tsx

@@ -0,0 +1,12 @@
+import { lazy } from 'react';
+
+export const preloadOrganizationSelectionTask = () =>
+  import(/* webpackChunkName:  "session-tasks"*/ './OrganizationSelectionTask');
+
+const LazyOrganizationSelectionTask = lazy(() =>
+  import(/* webpackChunkName: "session-tasks"*/ './OrganizationSelectionTask').then(module => ({
+    default: module.OrganizationSelectionTask,
+  })),
+);
+
+export { LazyOrganizationSelectionTask };

packages/clerk-js/src/ui/components/SessionTasks/lazySessionTasks.ts

@@ -0,0 +1,14 @@
+import { useEnvironment } from '../../../ui/contexts';
+import { preloadOrganizationSelectionTask } from './lazySessionTasks';
+
+/**
+ * Preloads tasks based on the environment settings
+ * @internal
+ */
+export function usePreloadTasks() {
+  const { organizationSettings } = useEnvironment();
+
+  if (organizationSettings.forceOrganizationSelection) {
+    void preloadOrganizationSelectionTask();
+  }
+}

packages/clerk-js/src/ui/components/SessionTasks/usePreloadTasks.ts

@@ -2,7 +2,6 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
-import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import type { SignUpContextType } from '../../contexts';
@@ -15,7 +14,7 @@ import {
 } from '../../contexts';
 import { Flow } from '../../customizables';
 import { useFetch } from '../../hooks';
-import { preloadSessionTasks, SessionTasks } from '../../lazyModules/components';
+import { SessionTasks } from '../../lazyModules/components';
 import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
 import {
   LazySignUpContinue,
@@ -130,11 +129,8 @@ function SignInRoutes(): JSX.Element {
               >
                 <LazySignUpVerifyPhone />
               </Route>
-              <Route path={SESSION_TASK_ROUTE_BY_KEY['org']}>
-                <SessionTasks
-                  task='org'
-                  redirectUrlComplete={signInContext.afterSignUpUrl}
-                />
+              <Route path='tasks'>
+                <SessionTasks redirectUrlComplete={signInContext.afterSignInUrl} />
               </Route>
               <Route index>
                 <LazySignUpContinue />
@@ -162,9 +158,6 @@ function SignInRoutes(): JSX.Element {
 const usePreloadSignUp = (enabled = false) =>
   useFetch(enabled ? preloadSignUp : undefined, 'preloadComponent', { staleTime: Infinity });
 
-const usePreloadSessionTask = (enabled = false) =>
-  useFetch(enabled ? preloadSessionTasks : undefined, 'preloadComponent', { staleTime: Infinity });
-
 function SignInRoot() {
   const { __internal_setComponentNavigationContext } = useClerk();
   const { navigate, indexPath } = useRouter();

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -5,18 +5,14 @@ import React from 'react';
 import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
-import { useFetch } from '../../hooks';
-import { preloadSessionTasks, SessionTasks } from '../../lazyModules/components';
+import { SessionTasks } from '../../lazyModules/components';
 import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
 import { SignUpContinue } from './SignUpContinue';
 import { SignUpSSOCallback } from './SignUpSSOCallback';
 import { SignUpStart } from './SignUpStart';
 import { SignUpVerifyEmail } from './SignUpVerifyEmail';
 import { SignUpVerifyPhone } from './SignUpVerifyPhone';
 
-const usePreloadSessionTask = (enabled = false) =>
-  useFetch(enabled ? preloadSessionTasks : undefined, 'preloadComponent', { staleTime: Infinity });
-
 function RedirectToSignUp() {
   const clerk = useClerk();
   React.useEffect(() => {