refactor(clerk-js): Refactor the UserProfileRoutes and OrganizationPr…

…ofileRoutes to be more readable
clerk · Oct 12, 2023 · fd6fc0e · fd6fc0e
1 parent 8b34e0a
commit fd6fc0e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
@@ -17,24 +17,27 @@ export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof Profile
   const { pages } = useOrganizationProfileContext();
   const isMembersPageRoot = pages.routes[0].id === 'members';
   const isSettingsPageRoot = pages.routes[0].id === 'settings';
-  const isPredefinedPageRoot = isSettingsPageRoot || isMembersPageRoot;
+
+  const customPageRoutesWithContents = pages.contents?.map((customPage, index) => {
+    const shouldFirstCustomItemBeOnRoot = !isSettingsPageRoot && !isMembersPageRoot && index === 0;
+    return (
+      <Route
+        index={shouldFirstCustomItemBeOnRoot}
+        path={shouldFirstCustomItemBeOnRoot ? undefined : customPage.url}
+        key={`custom-page-${customPage.url}`}
+      >
+        <CustomPageContentContainer
+          mount={customPage.mount}
+          unmount={customPage.unmount}
+        />
+      </Route>
+    );
+  });
 
   return (
     <ProfileCardContent contentRef={props.contentRef}>
       <Switch>
-        {/* Custom Pages */}
-        {pages.contents?.map((customPage, index) => (
-          <Route
-            index={!isPredefinedPageRoot && index === 0}
-            path={!isPredefinedPageRoot && index === 0 ? undefined : customPage.url}
-            key={`custom-page-${customPage.url}`}
-          >
-            <CustomPageContentContainer
-              mount={customPage.mount}
-              unmount={customPage.unmount}
-            />
-          </Route>
-        ))}
+        {customPageRoutesWithContents}
         <Route>
           <Route path={isSettingsPageRoot ? undefined : 'organization-settings'}>
             <Switch>

diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
@@ -26,22 +26,27 @@ import { Web3Page } from './Web3Page';
 export const UserProfileRoutes = (props: PropsOfComponent<typeof ProfileCardContent>) => {
   const { pages } = useUserProfileContext();
   const isAccountPageRoot = pages.routes[0].id === 'account' || pages.routes[0].id === 'security';
+
+  const customPageRoutesWithContents = pages.contents?.map((customPage, index) => {
+    const shouldFirstCustomItemBeOnRoot = !isAccountPageRoot && index === 0;
+    return (
+      <Route
+        index={shouldFirstCustomItemBeOnRoot}
+        path={shouldFirstCustomItemBeOnRoot ? undefined : customPage.url}
+        key={`custom-page-${customPage.url}`}
+      >
+        <CustomPageContentContainer
+          mount={customPage.mount}
+          unmount={customPage.unmount}
+        />
+      </Route>
+    );
+  });
+
   return (
     <ProfileCardContent contentRef={props.contentRef}>
       <Switch>
-        {/* Custom Pages */}
-        {pages.contents?.map((customPage, index) => (
-          <Route
-            index={!isAccountPageRoot && index === 0}
-            path={!isAccountPageRoot && index === 0 ? undefined : customPage.url}
-            key={`custom-page-${customPage.url}`}
-          >
-            <CustomPageContentContainer
-              mount={customPage.mount}
-              unmount={customPage.unmount}
-            />
-          </Route>
-        ))}
+        {customPageRoutesWithContents}
         <Route path={isAccountPageRoot ? undefined : 'account'}>
           <Route
             path='profile'