refactor(clerk-react,types): Apply minor refactors suggested by PR co…

…mments

packages/clerk-js/src/ui/utils/createCustomPages.tsx

@@ -13,11 +13,11 @@ export type CustomPageContent = {
   unmount: (el?: HTMLDivElement) => void;
 };
 
-type UserProfileReorderItem = {
+type ProfileReorderItem = {
   label: 'account' | 'security';
 };
 
-type UserProfileCustomPage = {
+type ProfileCustomPage = {
   label: string;
   url: string;
   mountIcon: (el: HTMLDivElement) => void;
@@ -26,7 +26,7 @@ type UserProfileCustomPage = {
   unmount: (el?: HTMLDivElement) => void;
 };
 
-type UserProfileCustomLink = {
+type ProfileCustomLink = {
   label: string;
   url: string;
   mountIcon: (el: HTMLDivElement) => void;
@@ -178,7 +178,7 @@ const checkForDuplicateUsageOfReorderingItems = (customPages: CustomPage[], vali
   reorderItems.reduce((acc, cp) => {
     if (acc.includes(cp.label)) {
       console.error(
-        `Clerk: The "${cp.label}" item is used more than once when reordering UserProfile pages. This may cause unexpected behavior.`,
+        `Clerk: The "${cp.label}" item is used more than once when reordering pages. This may cause unexpected behavior.`,
       );
     }
     return [...acc, cp.label];
@@ -199,15 +199,15 @@ const isValidPageItem = (cp: CustomPage, validReorderItems: string[]): cp is Cus
   return isCustomPage(cp) || isCustomLink(cp) || isReorderItem(cp, validReorderItems);
 };
 
-const isCustomPage = (cp: CustomPage): cp is UserProfileCustomPage => {
+const isCustomPage = (cp: CustomPage): cp is ProfileCustomPage => {
   return !!cp.url && !!cp.label && !!cp.mount && !!cp.unmount && !!cp.mountIcon && !!cp.unmountIcon;
 };
 
-const isCustomLink = (cp: CustomPage): cp is UserProfileCustomLink => {
+const isCustomLink = (cp: CustomPage): cp is ProfileCustomLink => {
   return !!cp.url && !!cp.label && !cp.mount && !cp.unmount && !!cp.mountIcon && !!cp.unmountIcon;
 };
 
-const isReorderItem = (cp: CustomPage, validItems: string[]): cp is UserProfileReorderItem => {
+const isReorderItem = (cp: CustomPage, validItems: string[]): cp is ProfileReorderItem => {
   return (
     !cp.url && !cp.mount && !cp.unmount && !cp.mountIcon && !cp.unmountIcon && validItems.some(v => v === cp.label)
   );

packages/react/src/components/uiComponents.tsx

@@ -25,7 +25,7 @@ import type {
   UserProfilePageProps,
   WithClerkProp,
 } from '../types';
-import { errorInDevMode, useOrganizationProfileCustomPages, useUserProfileCustomPages } from '../utils';
+import { logErrorInDevMode, useOrganizationProfileCustomPages, useUserProfileCustomPages } from '../utils';
 import { withClerk } from './withClerk';
 
 type UserProfileExportType = typeof _UserProfile & {
@@ -141,13 +141,13 @@ export const SignUp = withClerk(({ clerk, ...props }: WithClerkProp<SignUpProps>
 }, 'SignUp');
 
 export function UserProfilePage({ children }: PropsWithChildren<UserProfilePageProps>) {
-  errorInDevMode(userProfilePageRenderedError);
-  return <div>{children}</div>;
+  logErrorInDevMode(userProfilePageRenderedError);
+  return <>{children}</>;
 }
 
 export function UserProfileLink({ children }: PropsWithChildren<UserProfileLinkProps>) {
-  errorInDevMode(userProfileLinkRenderedError);
-  return <div>{children}</div>;
+  logErrorInDevMode(userProfileLinkRenderedError);
+  return <>{children}</>;
 }
 
 const _UserProfile = withClerk(
@@ -189,18 +189,18 @@ const _UserButton = withClerk(
 );
 
 export const UserButton: UserButtonExportType = Object.assign(_UserButton, {
-  UserProfilePage: UserProfilePage,
-  UserProfileLink: UserProfileLink,
+  UserProfilePage,
+  UserProfileLink,
 });
 
 export function OrganizationProfilePage({ children }: PropsWithChildren<OrganizationProfilePageProps>) {
-  errorInDevMode(organizationProfilePageRenderedError);
-  return <div>{children}</div>;
+  logErrorInDevMode(organizationProfilePageRenderedError);
+  return <>{children}</>;
 }
 
 export function OrganizationProfileLink({ children }: PropsWithChildren<OrganizationProfileLinkProps>) {
-  errorInDevMode(organizationProfileLinkRenderedError);
-  return <div>{children}</div>;
+  logErrorInDevMode(organizationProfileLinkRenderedError);
+  return <>{children}</>;
 }
 
 const _OrganizationProfile = withClerk(
@@ -253,8 +253,8 @@ const _OrganizationSwitcher = withClerk(
 );
 
 export const OrganizationSwitcher: OrganizationSwitcherExportType = Object.assign(_OrganizationSwitcher, {
-  OrganizationProfilePage: OrganizationProfilePage,
-  OrganizationProfileLink: OrganizationProfileLink,
+  OrganizationProfilePage,
+  OrganizationProfileLink,
 });
 
 export const OrganizationList = withClerk(({ clerk, ...props }: WithClerkProp<OrganizationListProps>) => {

packages/react/src/utils/index.ts

@@ -5,4 +5,4 @@ export { loadClerkJsScript } from './loadClerkJsScript';
 export * from './useMaxAllowedInstancesGuard';
 export * from './useCustomElementPortal';
 export * from './useCustomPages';
-export * from './errorInDevMode';
+export * from './logErrorInDevMode';

packages/react/src/utils/errorInDevMode.ts → packages/react/src/utils/logErrorInDevMode.ts

@@ -1,6 +1,6 @@
 import { isDevelopmentEnvironment } from '@clerk/shared';
 
-export const errorInDevMode = (message: string) => {
+export const logErrorInDevMode = (message: string) => {
   if (isDevelopmentEnvironment()) {
     console.error(message);
   }

packages/react/src/utils/useCustomElementPortal.tsx

@@ -19,19 +19,10 @@ export const useCustomElementPortal = (elements: UseCustomElementPortalParams[])
   const initialState = Array(elements.length).fill(null);
   const [nodes, setNodes] = useState<(Element | null)[]>(initialState);
 
-  const portals: UseCustomElementPortalReturn[] = [];
-
-  elements.forEach((el, index) => {
-    const mount = (node: Element) => {
-      setNodes(prevState => prevState.map((n, i) => (i === index ? node : n)));
-    };
-    const unmount = () => {
-      setNodes(prevState => prevState.map((n, i) => (i === index ? null : n)));
-    };
-
-    const portal = () => <>{nodes[index] ? createPortal(el.component, nodes[index] as Element) : null}</>;
-    portals.push({ portal, mount, unmount, id: el.id });
-  });
-
-  return portals;
+  return elements.map((el, index) => ({
+    id: el.id,
+    mount: (node: Element) => setNodes(prevState => prevState.map((n, i) => (i === index ? node : n))),
+    unmount: () => setNodes(prevState => prevState.map((n, i) => (i === index ? null : n))),
+    portal: () => <>{nodes[index] ? createPortal(el.component, nodes[index] as Element) : null}</>,
+  }));
 };

packages/react/src/utils/useCustomPages.tsx

@@ -10,7 +10,7 @@ import {
 } from '../components/uiComponents';
 import { customLinkWrongProps, customPagesIgnoredComponent, customPageWrongProps } from '../errors';
 import type { UserProfilePageProps } from '../types';
-import { errorInDevMode } from './errorInDevMode';
+import { logErrorInDevMode } from './logErrorInDevMode';
 import type { UseCustomElementPortalParams, UseCustomElementPortalReturn } from './useCustomElementPortal';
 import { useCustomElementPortal } from './useCustomElementPortal';
 
@@ -62,7 +62,7 @@ const useCustomPages = ({
   React.Children.forEach(children, child => {
     if (!isThatComponent(child, PageComponent) && !isThatComponent(child, LinkComponent)) {
       if (child) {
-        errorInDevMode(customPagesIgnoredComponent(componentName));
+        logErrorInDevMode(customPagesIgnoredComponent(componentName));
       }
       return;
     }
@@ -79,7 +79,7 @@ const useCustomPages = ({
         // this is a custom page
         validChildren.push({ label, labelIcon, children, url });
       } else {
-        errorInDevMode(customPageWrongProps(componentName));
+        logErrorInDevMode(customPageWrongProps(componentName));
         return;
       }
     }
@@ -89,7 +89,7 @@ const useCustomPages = ({
         // This is an external link
         validChildren.push({ label, labelIcon, url });
       } else {
-        errorInDevMode(customLinkWrongProps(componentName));
+        logErrorInDevMode(customLinkWrongProps(componentName));
         return;
       }
     }

packages/types/src/clerk.ts

@@ -694,13 +694,7 @@ export type UserProfileProps = {
    */
   additionalOAuthScopes?: Partial<Record<OAuthProvider, OAuthScope[]>>;
   /*
-   * Provide addition custom route items and pages to be rendered inside the UserProfile.
-   * e.g.
-   *  <UserProfile>
-   *    <UserProfile.Page label="Custom Page" url="custom-page" labelIcon={<div>C</div>}>
-   *      <div>Hello from custom page!</div>
-   *    </UserProfile.Page>
-   *  </UserProfile>
+   * Provide custom pages and links to be rendered inside the UserProfile.
    */
   customPages?: CustomPage[];
 };
@@ -726,13 +720,7 @@ export type OrganizationProfileProps = {
    */
   appearance?: OrganizationProfileTheme;
   /*
-   * Provide addition custom route items and pages to be rendered inside the OrganizationProfile.
-   * e.g.
-   *  <OrganizationProfile>
-   *    <OrganizationProfile.Page label="Custom Page" url="custom-page" labelIcon={<div>C</div>}>
-   *      <div>Hello from custom page!</div>
-   *    </OrganizationProfile.Page>
-   *  </OrganizationProfile>
+   * Provide custom pages and links to be rendered inside the OrganizationProfile.
    */
   customPages?: CustomPage[];
 };