From 9e2e55b1224677ce8e8459e4842328a6c66632ae Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Thu, 25 Jul 2024 15:49:37 -0400
Subject: [PATCH] Fix link, type

---
 .../components/common/layout-root/index.tsx   | 10 ++++---
 app/scripts/components/common/nav-wrapper.js  |  1 -
 app/scripts/components/common/page-header.tsx | 28 ++++++++++++-------
 parcel-resolver-veda/index.d.ts               |  1 +
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx
index 2e0b3f8cb..fd8556817 100644
--- 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
index 83f9289d9..432d52e8f 100644
--- 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
index afa242ca1..a093c5c3d 100644
--- 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
index 893801aac..f6a200335 100644
--- 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.