fix: APP-877 project page without header (#2796)

Author: blushi

web-marketplace/src/clients/regen/Regen.Providers.tsx

@@ -1,19 +1,36 @@
 'use client';
 
 import { ChainWrapper } from 'app/ChainWrapper';
+import { usePathname } from 'next/navigation';
 
 import { LedgerProviderWithWallet } from 'ledger';
 import { WalletProvider } from 'lib/wallet/wallet';
 
+import { LayoutFooter } from 'components/layout/Layout.Footer';
+import { LayoutHeader } from 'components/layout/Layout.Header';
+
 type Props = {
   children: React.ReactNode;
 };
 
 export const RegenProviders = ({ children }: Props) => {
+  const pathname = usePathname();
+  const isFullScreen =
+    pathname.startsWith('/dashboard') ||
+    pathname.startsWith('/organizations/create') ||
+    pathname.startsWith('/project-pages/');
   return (
     <ChainWrapper>
       <WalletProvider>
-        <LedgerProviderWithWallet>{children}</LedgerProviderWithWallet>
+        <LedgerProviderWithWallet>
+          {/* TODO: When the /dashboard has been migrated, the LayoutHeader and LayoutFooter 
+              should be in a layout component for non-dashboard pages */}
+          <div className="min-h-screen flex flex-col">
+            {!isFullScreen && <LayoutHeader />}
+            <main className="flex-1">{children}</main>
+            {!isFullScreen && <LayoutFooter />}
+          </div>
+        </LedgerProviderWithWallet>
       </WalletProvider>
     </ChainWrapper>
   );

web-marketplace/src/clients/regen/Regen.Routes.tsx

@@ -266,7 +266,7 @@ export const getRegenRoutes = ({
     <>
       {/* Main routes WITH header/footer */}
       <Route
-        element={<RegistryLayout showHeaderFooter />}
+        element={<RegistryLayout />}
         loader={registryLayoutLoader({
           queryClient: reactQueryClient,
           apolloClient,

web-marketplace/src/components/atoms/HeaderNavLink.tsx

@@ -1,12 +1,16 @@
-import { useLocation } from 'react-router-dom';
+import { usePathname } from 'next/navigation';
 
 import {
   NavLinkProps,
   useNavLinkStyles,
 } from 'web-components/src/components/header/components/NavLink';
 import { cn } from 'web-components/src/utils/styles/cn';
 
-import { ReactRouterMuiLink as Link } from './Link';
+import { useCurrentLocale } from 'lib/i18n/hooks/useCurrentLocale';
+import { ensureLocalePrefix } from 'lib/i18n/utils/ensureLocalePrefix';
+
+import { normalizePath, PROFILES_PATH } from './HeaderNavLink.utils';
+import { Link } from './Link';
 
 /**
  * Renders a header `Link` with the navlink styles applied.
@@ -18,20 +22,23 @@ export const HeaderNavLink: React.FC<React.PropsWithChildren<NavLinkProps>> = ({
   className,
   disabled,
 }) => {
-  const { pathname } = useLocation();
-  const isActive = pathname === href;
-  const { classes } = useNavLinkStyles({ isActive: !!isActive, disabled });
+  const pathname = usePathname();
+  const locale = useCurrentLocale();
+  const hrefWithLocale = ensureLocalePrefix(href, locale);
+  const normalizedPathname = normalizePath(pathname);
+  const normalizedHref = normalizePath(hrefWithLocale);
+  const isProfileLink = normalizedHref.includes(PROFILES_PATH);
+  const isActive =
+    normalizedPathname === normalizedHref ||
+    (isProfileLink && normalizedPathname.startsWith(`${normalizedHref}/`));
+  const { classes } = useNavLinkStyles({ isActive, disabled });
 
   const handleDisabledButtonClick = (
     e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
   ) => {
     e.preventDefault();
   };
 
-  /**
-   * Use the React Router-based link to keep SPA navigation in sync.
-   */
-
   return (
     <Link
       href={href}

web-marketplace/src/components/atoms/HomeIconLink.tsx

@@ -3,15 +3,20 @@ import { Box } from '@mui/material';
 
 import RegenMarketIcon from 'web-components/src/components/icons/RegenMarketIcon';
 
-import { ReactRouterMuiLink as Link } from './Link';
+import { useCurrentLocale } from 'lib/i18n/hooks/useCurrentLocale';
+import { DEFAULT_LOCALE } from 'lib/i18n/locales';
+
+import { Link } from './Link';
 
 /**
  * A clickable logo that links to the homepage (`/`).
  * It renders the `RegenMarketIcon` with a specified color.
  */
 export const HomeIconLink = ({ color }: { color: string }) => {
+  const locale = useCurrentLocale();
+  const href = locale === DEFAULT_LOCALE ? '/' : `/${locale}`;
   return (
-    <Link href="/">
+    <Link href={href}>
       <Box
         sx={{
           width: { xs: 62, md: 117 },

web-marketplace/src/components/atoms/Link.tsx

@@ -43,7 +43,6 @@ const NextLinkBehavior = React.forwardRef<
 ReactRouterLinkBehavior.displayName = 'ReactRouterLinkBehavior';
 // eslint-disable-next-line lingui/no-unlocalized-strings
 NextLinkBehavior.displayName = 'NextLinkBehavior';
-
 const createMuiLink = (
   internalComponent: React.ElementType,
   { applyLocalePrefix = true }: { applyLocalePrefix?: boolean } = {},
@@ -52,13 +51,15 @@ const createMuiLink = (
     ({ href, children, target, ...linkProps }, ref) => {
       const locale = useCurrentLocale();
       if (!href || typeof href !== 'string') {
-        // @ts-expect-error
-        return <Box {...linkProps}>{children}</Box>;
+        return (
+          <Box {...linkProps} component="span">
+            {children}
+          </Box>
+        );
       }
 
       const isInternalLink = (href: string): boolean =>
         !!href && href.startsWith('/');
-      // const hasAnchor = href?.includes('#');
 
       const internalHref =
         applyLocalePrefix && isInternalLink(href)

web-marketplace/src/components/atoms/RegistryIconLink.legacy.tsx

@@ -6,7 +6,5 @@ export * from './KeplrRoute';
 export * from './Link';
 export * from './LinkWithArrow';
 export * from './OptimizedImage';
-export * from './RegistryIconLink.legacy';
-export * from './RegistryNavLink.legacy';
 export * from './SanityButton';
 export * from './StatusLabel';

web-marketplace/src/components/atoms/RegistryNavLink.legacy.tsx

@@ -1,22 +1,22 @@
 'use client';
 
-import { useLocation } from 'react-router-dom';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { URL_REGISTRY_TERMS_SERVICE, URL_WEB_PRIVACY } from 'config/globals';
+import { usePathname } from 'next/navigation';
 
 import {
   Footer,
   FooterItemProps as FooterItem,
 } from 'web-components/src/components/footer/footer-new';
 
 import { HomeIconLink } from 'components/atoms/HomeIconLink';
-import { ReactRouterMuiLink as Link } from 'components/atoms/Link';
+import { Link } from 'components/atoms/Link';
 
 export const LayoutFooter = () => {
   const { _ } = useLingui();
-  const { pathname } = useLocation();
+  const pathname = usePathname();
   const isHidden =
     /^\/project-pages$/.test(pathname) ||
     /^\/project\/[^\/]+\/buy$/.test(pathname);