Fix link, type

NASA-IMPACT · Jul 25, 2024 · 9e2e55b · 9e2e55b
1 parent 7b9d40a
commit 9e2e55b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx
@@ -4,22 +4,23 @@ import styled from 'styled-components';
 import { Outlet } from 'react-router';
 
 import { reveal } from '@devseed-ui/animation';
-import { ContentOverride } from '$components/common/page-overrides';
 import { getString } from 'veda';
 import MetaTags from '../meta-tags';
 import PageFooter from '../page-footer';
 import { LayoutRootContext } from './context';
 
+import { ContentOverride } from '$components/common/page-overrides';
+
 import { useGoogleTagManager } from '$utils/use-google-tag-manager';
 
 import NavWrapper from '$components/common/nav-wrapper';
+import { InternalNavLink, ExternalNavLink } from '$components/common/page-header';
 
 import { checkEnvFlag } from '$utils/utils';
 import {
   STORIES_PATH,
   DATASETS_PATH,
   ANALYSIS_PATH,
-  ABOUT_PATH,
   EXPLORATION_PATH
 } from '$utils/routes';
 const appTitle = process.env.APP_TITLE;
@@ -41,8 +42,7 @@ const PageBody = styled.div`
 `;
 
 
-
-let navItems = [{
+let navItems:(ExternalNavLink & InternalNavLink)[] = [{
   title: 'Data Catalog',
   to: DATASETS_PATH
 }, {
@@ -55,6 +55,8 @@ let navItems = [{
 
 if (!!process.env.HUB_URL && !!process.env.HUB_NAME) navItems = [...navItems, {
   title: process.env.HUB_NAME,
+  // @ts-expect-error : href is omitted from NavLinkProps
+  // But we need this prop for outernal link
   href: process.env.HUB_URL,
   as:'a',
   target:'_blank',

diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js
@@ -28,7 +28,6 @@ const NavWrapper = styled.div`
 `;
 
 function PageNavWrapper(props) {
-  console.log(props);
   const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps();
   return (
     <NavWrapper

diff --git a/app/scripts/components/common/page-header.tsx b/app/scripts/components/common/page-header.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { Link, NavLink } from 'react-router-dom';
-import { userPages, getOverride, getString } from 'veda';
+import { Link, NavLink, NavLinkProps } from 'react-router-dom';
+import { userPages, getOverride } from 'veda';
 import {
   glsp,
   listReset,
@@ -25,14 +25,9 @@ import GoogleForm from './google-form';
 import { Tip } from './tip';
 import UnscrollableBody from './unscrollable-body';
 
-import { checkEnvFlag } from '$utils/utils';
 import { variableGlsp } from '$styles/variable-utils';
 import {
-  STORIES_PATH,
-  DATASETS_PATH,
-  ANALYSIS_PATH,
-  ABOUT_PATH,
-  EXPLORATION_PATH
+  ABOUT_PATH
 } from '$utils/routes';
 import { PAGE_BODY_ID } from '$components/common/layout-root';
 import GlobalMenuLinkCSS from '$styles/menu-link';
@@ -344,8 +339,19 @@ const DropMenuNavItem = styled(DropMenuItem)`
     background-color: ${rgbaFixed(themeVal('color.link'), 0.08)};
   }
 `;
+interface AdditionalNavLinkProps {
+  title: string;
+}
+
+export type InternalNavLink =  NavLinkProps  & AdditionalNavLinkProps;
+export type ExternalNavLink  = React.RefAttributes<HTMLAnchorElement> & AdditionalNavLinkProps;
 
-function PageHeader({ mainNavItems }) {
+interface PageHeaderProps {
+  mainNavItems: (ExternalNavLink & InternalNavLink)[];
+}
+
+function PageHeader(props: PageHeaderProps) {
+  const { mainNavItems } = props;
   const { isMediumDown } = useMediaQuery();
 
   const [globalNavRevealed, setGlobalNavRevealed] = useState(false);
@@ -381,6 +387,7 @@ function PageHeader({ mainNavItems }) {
         <GlobalMenuLink to={id} onClick={closeNavOnClick}>
           {page.data.mainNavItem.navTitle }
         </GlobalMenuLink>
+
       </li>
     );
   });
@@ -453,11 +460,12 @@ function PageHeader({ mainNavItems }) {
                   {mainNavItems.map((item) => {
                     const { title, ...rest } = item;
                     return (
-                      <li key={`${name}-nav-item`}>
+                      <li key={`${title}-nav-item`}>
                       <GlobalMenuLink {...rest}>
                         {title}
                       </GlobalMenuLink>
                       </li>
+
                     );
                   })}
                 </GlobalMenu>

diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts
@@ -281,6 +281,7 @@ export interface LayerInfo {
     | 'sandbox-override'
     | 'pageFooter'
     | 'headerBrand'
+    | 'nav'
     | 'homeHero';
   /**
    * Configuration export for specific overrides.