fix(lib-user): use next/link for internal app routes (#6379)

* fix(lib-user): use next/link for internal app routes Use `next/link` for the home page link to user stats, and the link to your stats certificate. Also fix the `lib-user` peer dependencies, which were still requiring Next.js 13.5. * use next/link for See All in Groups Preview component on homepage --------- Co-authored-by: Delilah <[email protected]>
zooniverse · Oct 19, 2024 · d2b2191 · d2b2191
1 parent 95d66db
commit d2b2191
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/packages/lib-user/src/components/MyGroups/components/PreviewLayout/PreviewLayout.js b/packages/lib-user/src/components/MyGroups/components/PreviewLayout/PreviewLayout.js
@@ -1,6 +1,7 @@
 import { Loader, SpacedText } from '@zooniverse/react-components'
 import { Anchor, Box, Paragraph } from 'grommet'
 import { arrayOf, bool, func, shape, string } from 'prop-types'
+import Link from 'next/link'
 
 import { ContentBox } from '@components/shared'
 import GroupCardContainer from '../GroupCard/GroupCardContainer.js'
@@ -17,7 +18,7 @@ export default function PreviewLayout({
   return (
     <ContentBox
       linkLabel='See all'
-      linkProps={{ href: `/users/${authUser?.login}/groups` }}
+      linkProps={{ as: Link, href: `/users/${authUser?.login}/groups` }}
       title='My Groups'
     >
       {loading && (

diff --git a/packages/lib-user/src/components/UserHome/components/Dashboard/Dashboard.js b/packages/lib-user/src/components/UserHome/components/Dashboard/Dashboard.js
@@ -14,6 +14,7 @@ import { SpacedHeading, SpacedText } from '@zooniverse/react-components'
 
 import DashboardLink from './components/DashboardLink.js'
 import StatsTabsContainer from './components/StatsTabs/StatsTabsContainer.js'
+import Link from 'next/link'
 
 const LinkToBlogPost = styled(Anchor)`
   position: absolute;
@@ -253,6 +254,7 @@ export default function Dashboard({ user, userLoading }) {
           <Relative fill>
             <StyledStatsLink
               alignSelf={size === 'small' ? 'center' : 'end'}
+              forwardedAs={Link}
               href={`/users/${user?.login}/stats`}
               label={<SpacedText>More Stats</SpacedText>}
               icon={<FormNext />}

diff --git a/packages/lib-user/src/components/shared/HeaderLink/HeaderLink.js b/packages/lib-user/src/components/shared/HeaderLink/HeaderLink.js
@@ -2,6 +2,7 @@ import { Previous } from 'grommet-icons'
 import { string } from 'prop-types'
 
 import { HeaderButton } from '@components/shared'
+import Link from 'next/link'
 
 function HeaderLink({
   href,
@@ -10,6 +11,7 @@ function HeaderLink({
 }) {
   return (
     <HeaderButton
+      forwardedAs={Link}
       href={href}
       icon={<Previous color='white' size='small' />}
       label={label}

diff --git a/packages/lib-user/src/components/shared/MainContent/MainContent.js b/packages/lib-user/src/components/shared/MainContent/MainContent.js
@@ -22,6 +22,7 @@ import {
   StyledTab
 } from './components'
 import { getDateRangeSelectOptions, getProjectSelectOptions } from './helpers'
+import Link from 'next/link'
 
 const DEFAULT_HANDLER = () => true
 const DEFAULT_DATE_RANGE = {
@@ -291,7 +292,7 @@ function MainContent({
             margin={{ top: 'small' }}
           >
             <StyledCertificateButton
-              forwardedAs='a'
+              forwardedAs={Link}
               color='neutral-1'
               href={`/users/${source.login}/stats/certificate${window.location.search}`}
               label='Generate Volunteer Certificate'