Optimize SpacesDropdownMenuItem client side props (#2373)

Author: spastorelli

src/components/Header/SpacesDropdown.tsx

@@ -33,8 +33,12 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[] }) {
                 {spaces.map((otherSpace, index) => (
                     <SpacesDropdownMenuItem
                         key={`${otherSpace.id}-${index}`}
-                        currentSpace={space}
-                        variantSpace={otherSpace}
+                        variantSpace={{
+                            id: otherSpace.id,
+                            title: otherSpace.title,
+                            url: otherSpace.urls.published ?? otherSpace.urls.app,
+                        }}
+                        active={otherSpace.id === space.id}
                     />
                 ))}
             </DropdownMenu>

src/components/Header/SpacesDropdownMenuItem.tsx

@@ -5,25 +5,24 @@ import { useSelectedLayoutSegment } from 'next/navigation';
 
 import { DropdownMenuItem } from './Dropdown';
 
-function useVariantSpaceHref(variantSpace: Space) {
+function useVariantSpaceHref(variantSpaceUrl: string) {
     const currentPathname = useSelectedLayoutSegment() ?? '';
-    const targetUrl = new URL(variantSpace.urls.published ?? variantSpace.urls.app);
+    const targetUrl = new URL(variantSpaceUrl);
     targetUrl.pathname += `/${currentPathname}`;
     targetUrl.pathname = targetUrl.pathname.replace(/\/{2,}/g, '/').replace(/\/$/, '');
 
     return targetUrl.toString();
 }
 
-export function SpacesDropdownMenuItem(props: { variantSpace: Space; currentSpace: Space }) {
-    const { variantSpace, currentSpace } = props;
-    const variantHref = useVariantSpaceHref(variantSpace);
+export function SpacesDropdownMenuItem(props: {
+    variantSpace: { id: Space['id']; title: Space['title']; url: string };
+    active: boolean;
+}) {
+    const { variantSpace, active } = props;
+    const variantHref = useVariantSpaceHref(variantSpace.url);
 
     return (
-        <DropdownMenuItem
-            key={variantSpace.id}
-            href={variantHref}
-            active={variantSpace.id === currentSpace.id}
-        >
+        <DropdownMenuItem key={variantSpace.id} href={variantHref} active={active}>
             {variantSpace.title}
         </DropdownMenuItem>
     );