Skip to content

Replace plain <a> tags with Next.js <Link> components #1739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 25, 2024
Merged

Replace plain <a> tags with Next.js <Link> components #1739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a7d8732
Nav drawer links route internally
jonkafton Oct 24, 2024
1311f87
Header search and footer links navigate without reload
jonkafton Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions frontends/main/src/common/urls.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,17 +95,17 @@ export const PROFILE = "/dashboard/profile"

export const SETTINGS = "/dashboard/settings"

export const SEARCH = "/search/"
export const SEARCH = "/search"

export const ABOUT = "/about/"
export const ABOUT = "/about"

export const ACCESSIBILITY = "https://accessibility.mit.edu/"

export const PRIVACY = "/privacy/"
export const PRIVACY = "/privacy"

export const TERMS = "/terms/"
export const TERMS = "/terms"

export const UNITS = "/units/"
export const UNITS = "/units"

export const CONTACT = "mailto:mitlearn-support@mit.edu"

Expand Down
7 changes: 4 additions & 3 deletions frontends/main/src/page-components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Container, styled } from "ol-components"
import MITLogoLink from "@/components/MITLogoLink/MITLogoLink"
import * as urls from "@/common/urls"
import React, { FunctionComponent } from "react"
import Link from "next/link"

const FooterContainer = styled.div(({ theme }) => ({
display: "flex",
Expand Down Expand Up @@ -96,7 +97,7 @@ const FooterLinkContainer = styled.div(({ theme }) => ({
},
}))

const FooterLink = styled.a(({ theme }) => ({
const FooterLink = styled(Link)(({ theme }) => ({
color: theme.custom.colors.black,
textDecoration: "none",
textAlign: "center",
Expand All @@ -108,8 +109,8 @@ const FooterLink = styled.a(({ theme }) => ({
}))

interface FooterLinkComponentProps {
href?: string
text?: string
href: string
text: string
}

const FooterLinkComponent: FunctionComponent<FooterLinkComponentProps> = (
Expand Down
1 change: 0 additions & 1 deletion frontends/main/src/page-components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,6 @@ const SearchButton: FunctionComponent = () => {
<StyledSearchButton
edge="circular"
variant="text"
rawAnchor={true}
href={SEARCH}
aria-label="Search"
>
Expand Down
17 changes: 15 additions & 2 deletions frontends/ol-components/src/components/NavDrawer/NavDrawer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ describe("NavDrawer", () => {
{
title: "Title 1",
description: "Description 1",
href: "https://link.one",
href: "#hash-1",
},
],
},
Expand All @@ -61,7 +61,7 @@ describe("NavDrawer", () => {
{
title: "Title 2",
description: "Description 2",
href: "https://link.two",
href: "#hash-2",
},
],
},
Expand Down Expand Up @@ -118,4 +118,17 @@ describe("NavDrawer", () => {
await user.click(screen.getByTestId("foo"))
expect(onClose).not.toHaveBeenCalled()
})

test("clicking a link navigates and closes the drawer", async () => {
const onClose = jest.fn()
render(<NavDrawer onClose={onClose} navdata={NAV_DATA} open={true} />, {
wrapper: ThemeProvider,
})

const link = screen.getByRole("link", { name: "Title 1 Description 1" })
await user.click(link)

expect(window.location.hash).toBe("#hash-1")
expect(onClose).toHaveBeenCalled()
})
})
9 changes: 6 additions & 3 deletions frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Drawer, { DrawerProps } from "@mui/material/Drawer"
import ClickAwayListener from "@mui/material/ClickAwayListener"
import { FocusTrap } from "@mui/base/FocusTrap"
import styled from "@emotion/styled"
import Link from "next/link"
import React, { ReactElement } from "react"
import { RiCloseLargeLine } from "@remixicon/react"
import { ActionButton } from "../Button/Button"
Expand Down Expand Up @@ -51,7 +52,7 @@ const NavItemsContainer = styled.div(({ theme }) => ({
color: theme.custom.colors.silverGrayDark,
}))

const NavItemLink = styled.a({
const NavItemLink = styled(Link)({
display: "flex",
alignItems: "flex-start",
alignSelf: "stretch",
Expand Down Expand Up @@ -127,10 +128,11 @@ export interface NavItem {
icon?: string | ReactElement
description?: string
href: string
onClick?: () => void
Copy link
Contributor

@ChristopherChudzicki ChristopherChudzicki Oct 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't seem to be used? Let's remove it to avoid expanding the interface.

Copy link
Contributor Author

@jonkafton jonkafton Oct 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's newly used (L191) to pass the drawer close when the link is clicked.

}

const NavItem: React.FC<NavItem> = (props) => {
const { title, icon, description, href } = props
const { title, icon, description, href, onClick } = props
const navItem = (
<NavItemContainer>
<NavIconContainer style={{ paddingTop: description ? "4px" : "" }}>
Expand All @@ -156,7 +158,7 @@ const NavItem: React.FC<NavItem> = (props) => {
</NavItemContainer>
)
return (
<NavItemLink href={href} data-testid="nav-link">
<NavItemLink href={href} onClick={onClick} data-testid="nav-link">
{navItem}
</NavItemLink>
)
Expand Down Expand Up @@ -186,6 +188,7 @@ const NavDrawer = ({
icon={item.icon}
description={item.description}
href={item.href}
onClick={onClose}
/>
))
return (
Expand Down
Loading