From a7d87323a8371253adb7b7d2f5a12b797f873fff Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Thu, 24 Oct 2024 17:28:39 +0200 Subject: [PATCH 1/2] Nav drawer links route internally --- .../src/components/NavDrawer/NavDrawer.test.tsx | 17 +++++++++++++++-- .../src/components/NavDrawer/NavDrawer.tsx | 9 ++++++--- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/frontends/ol-components/src/components/NavDrawer/NavDrawer.test.tsx b/frontends/ol-components/src/components/NavDrawer/NavDrawer.test.tsx index cad4878269..3e20d8a100 100644 --- a/frontends/ol-components/src/components/NavDrawer/NavDrawer.test.tsx +++ b/frontends/ol-components/src/components/NavDrawer/NavDrawer.test.tsx @@ -51,7 +51,7 @@ describe("NavDrawer", () => { { title: "Title 1", description: "Description 1", - href: "https://link.one", + href: "#hash-1", }, ], }, @@ -61,7 +61,7 @@ describe("NavDrawer", () => { { title: "Title 2", description: "Description 2", - href: "https://link.two", + href: "#hash-2", }, ], }, @@ -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(, { + 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() + }) }) diff --git a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx index f3e5cfd71f..9ed6fc6af7 100644 --- a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx +++ b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx @@ -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" @@ -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", @@ -127,10 +128,11 @@ export interface NavItem { icon?: string | ReactElement description?: string href: string + onClick?: () => void } const NavItem: React.FC = (props) => { - const { title, icon, description, href } = props + const { title, icon, description, href, onClick } = props const navItem = ( @@ -156,7 +158,7 @@ const NavItem: React.FC = (props) => { ) return ( - + {navItem} ) @@ -186,6 +188,7 @@ const NavDrawer = ({ icon={item.icon} description={item.description} href={item.href} + onClick={onClose} /> )) return ( From 1311f87f9d04521d4493eabce4dde531442376bc Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Thu, 24 Oct 2024 17:52:04 +0200 Subject: [PATCH 2/2] Header search and footer links navigate without reload --- frontends/main/src/common/urls.ts | 10 +++++----- frontends/main/src/page-components/Footer/Footer.tsx | 7 ++++--- frontends/main/src/page-components/Header/Header.tsx | 1 - 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/frontends/main/src/common/urls.ts b/frontends/main/src/common/urls.ts index 14d3c5e8fe..0493f9d4db 100644 --- a/frontends/main/src/common/urls.ts +++ b/frontends/main/src/common/urls.ts @@ -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" diff --git a/frontends/main/src/page-components/Footer/Footer.tsx b/frontends/main/src/page-components/Footer/Footer.tsx index 473f4a0db5..0d8b9a1d63 100644 --- a/frontends/main/src/page-components/Footer/Footer.tsx +++ b/frontends/main/src/page-components/Footer/Footer.tsx @@ -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", @@ -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", @@ -108,8 +109,8 @@ const FooterLink = styled.a(({ theme }) => ({ })) interface FooterLinkComponentProps { - href?: string - text?: string + href: string + text: string } const FooterLinkComponent: FunctionComponent = ( diff --git a/frontends/main/src/page-components/Header/Header.tsx b/frontends/main/src/page-components/Header/Header.tsx index 26154dd0e7..e5cb4b7584 100644 --- a/frontends/main/src/page-components/Header/Header.tsx +++ b/frontends/main/src/page-components/Header/Header.tsx @@ -141,7 +141,6 @@ const SearchButton: FunctionComponent = () => {