From fd6fc0e4105c81f00e81850cc11fbeaef9c6aac1 Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Thu, 12 Oct 2023 17:11:54 +0300
Subject: [PATCH] refactor(clerk-js): Refactor the UserProfileRoutes and
 OrganizationProfileRoutes to be more readable

---
 .../OrganizationProfileRoutes.tsx             | 31 ++++++++++---------
 .../UserProfile/UserProfileRoutes.tsx         | 31 +++++++++++--------
 2 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
index 4901728238..0ea8dbba0d 100644
--- 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
index f064b6b552..3f3c41fef9 100644
--- 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'