From de224beac57bdd02401c193623ad2de6c0bdaa7b Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Tue, 28 Jan 2025 16:29:57 -0500 Subject: [PATCH] remove react router (#1988) --- .../ChannelMenu/ChannelMenu.test.tsx | 6 +--- .../ChannelDetails/ChannelDetails.test.tsx | 13 ++------ .../SearchDisplay/SearchDisplay.tsx | 16 --------- frontends/ol-components/package.json | 2 -- .../Breadcrumbs/Breadcrumbs.test.tsx | 7 ---- .../LearningResourceListCard.test.tsx | 19 ++++------- .../src/components/Link/Link.tsx | 2 +- .../src/components/Lists/ListItemLink.tsx | 2 +- .../components/SimpleMenu/SimpleMenu.test.tsx | 19 +++++------ yarn.lock | 33 ------------------- 10 files changed, 19 insertions(+), 100 deletions(-) diff --git a/frontends/main/src/components/ChannelMenu/ChannelMenu.test.tsx b/frontends/main/src/components/ChannelMenu/ChannelMenu.test.tsx index 228403184c..6736625f6f 100644 --- a/frontends/main/src/components/ChannelMenu/ChannelMenu.test.tsx +++ b/frontends/main/src/components/ChannelMenu/ChannelMenu.test.tsx @@ -1,7 +1,5 @@ import React from "react" import { screen } from "@testing-library/react" -// eslint-disable-next-line import/no-extraneous-dependencies -import { BrowserRouter } from "react-router-dom" import ChannelMenu from "./ChannelMenu" import { urls } from "api/test-utils" @@ -17,9 +15,7 @@ describe("ChannelMenu", () => { ) renderWithTheme( - - - , + , ) const dropdown = await screen.findByRole("button") await user.click(dropdown) diff --git a/frontends/main/src/page-components/ChannelDetails/ChannelDetails.test.tsx b/frontends/main/src/page-components/ChannelDetails/ChannelDetails.test.tsx index 4f02bcde59..e53e4d4e04 100644 --- a/frontends/main/src/page-components/ChannelDetails/ChannelDetails.test.tsx +++ b/frontends/main/src/page-components/ChannelDetails/ChannelDetails.test.tsx @@ -2,7 +2,6 @@ import React from "react" import { screen } from "@testing-library/react" import { ChannelDetails } from "./ChannelDetails" // eslint-disable-next-line import/no-extraneous-dependencies -import { BrowserRouter } from "react-router-dom" import { urls } from "api/test-utils" import { renderWithTheme, setMockResponse } from "@/test-utils" import { channels as factory } from "api/test-utils/factories" @@ -17,11 +16,7 @@ describe("ChannelDetails", () => { urls.channels.details(channel.channel_type, channel.name), channel, ) - renderWithTheme( - - - , - ) + renderWithTheme() const channelData = channel as unknown as Record const unitDetail = channelData.unit_detail as unknown as Record< string, @@ -49,11 +44,7 @@ describe("ChannelDetails", () => { urls.channels.details(channel.channel_type, channel.name), channel, ) - renderWithTheme( - - - , - ) + renderWithTheme() expect(screen.getByTestId("unit-details").firstChild).toHaveTextContent( "Offerings", diff --git a/frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx index ada2444420..781ec6f7ee 100644 --- a/frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx +++ b/frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx @@ -543,22 +543,6 @@ interface SearchDisplayProps { clearAllFacets: UseResourceSearchParamsResult["clearAllFacets"] toggleParamValue: UseResourceSearchParamsResult["toggleParamValue"] showProfessionalToggle?: boolean - /** - * NOTE: This is passed from parent, rather than obtained via useSearchParams, - * because of quirks with react-router's useSearchParams hook. - * - * Multiple calls to React Router's useSearchParam hook do not use current - * values for the search params. - * See https://github.com/remix-run/react-router/issues/9757 for details. - * - * This is partially addressed by `@mitodl/course-search-utils`, which exports - * a wrapper around `useSearchParams`: subsequent calls to `setSearchParams` - * DO use the current value, with one caveat: The setSearchParams function - * must be from the same "instance" of `useSearchParams`. - * - * Because of this, we pass the setSearchParams function from the parent - * rather than from a new "instance" of `useSearchParams`. - */ setSearchParams: UseResourceSearchParamsProps["setSearchParams"] resultsHeadingEl: React.ElementType filterHeadingEl: React.ElementType diff --git a/frontends/ol-components/package.json b/frontends/ol-components/package.json index 4d262c2d26..8236273c33 100644 --- a/frontends/ol-components/package.json +++ b/frontends/ol-components/package.json @@ -36,8 +36,6 @@ "ol-utilities": "0.0.0", "react": "^19.0.0", "react-dom": "^19.0.0", - "react-router": "^6.22.2", - "react-router-dom": "^6.22.2", "react-select": "^5.7.7", "react-share": "^5.0.3", "react-slick": "^0.30.2", diff --git a/frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.test.tsx b/frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.test.tsx index 5f5bb732a7..2c9dfdad54 100644 --- a/frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.test.tsx +++ b/frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.test.tsx @@ -3,13 +3,6 @@ import { screen } from "@testing-library/react" import { Breadcrumbs } from "./Breadcrumbs" import { renderWithTheme } from "../../test-utils" -// Mock react-router-dom's Link so we don't need to set up a Router -jest.mock("react-router-dom", () => { - return { - Link: jest.fn((props) => {props.children}), - } -}) - describe("Breadcrumbs", () => { test.each([ { ancestors: [{ href: "/home", label: "Home" }] }, diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx index a04e9fce1d..2d1c85d98c 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx +++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx @@ -1,5 +1,4 @@ import React from "react" -import { BrowserRouter } from "react-router-dom" import { screen, within } from "@testing-library/react" import { LearningResourceListCard } from "./LearningResourceListCard" import type { LearningResourceListCardProps } from "./LearningResourceListCard" @@ -10,11 +9,7 @@ import { getByImageSrc } from "ol-test-utilities" import { renderWithTheme } from "../../test-utils" const setup = (props: LearningResourceListCardProps) => { - return renderWithTheme( - - - , - ) + return renderWithTheme() } describe("Learning Resource List Card", () => { @@ -118,13 +113,11 @@ describe("Learning Resource List Card", () => { const onAddToUserListClick = jest.fn() renderWithTheme( - - - , + , ) const addToLearningPathButton = screen.getByLabelText( diff --git a/frontends/ol-components/src/components/Link/Link.tsx b/frontends/ol-components/src/components/Link/Link.tsx index 788a48684f..3b4676969e 100644 --- a/frontends/ol-components/src/components/Link/Link.tsx +++ b/frontends/ol-components/src/components/Link/Link.tsx @@ -109,7 +109,7 @@ const BaseLink = ({ /** * A styled link. By default, renders a medium-sized black link using the Link - * component from `react-router`. This is appropriate for in-app routing. + * component from `next/link`. This is appropriate for in-app routing. * * If you need to force a full-page reload, e.g., for login/logout links, use * set `nativeAnchor={true}`. diff --git a/frontends/ol-components/src/components/Lists/ListItemLink.tsx b/frontends/ol-components/src/components/Lists/ListItemLink.tsx index 3da72dedfe..6aba93fc4f 100644 --- a/frontends/ol-components/src/components/Lists/ListItemLink.tsx +++ b/frontends/ol-components/src/components/Lists/ListItemLink.tsx @@ -7,7 +7,7 @@ import Link from "next/link" type ListItemLinkProps = ListItemButtonProps<"a"> /** - * A ListItemButton that uses a Link component from react-router-dom. + * A ListItemButton that uses a Link component from next/link. * * The purpose is to make the entire clickable area of a ListItem a link. Note * that `ListItem` should have `disablePadding` when it contains a `ListItemLink` diff --git a/frontends/ol-components/src/components/SimpleMenu/SimpleMenu.test.tsx b/frontends/ol-components/src/components/SimpleMenu/SimpleMenu.test.tsx index 2a52c5cfd7..5ced3e0694 100644 --- a/frontends/ol-components/src/components/SimpleMenu/SimpleMenu.test.tsx +++ b/frontends/ol-components/src/components/SimpleMenu/SimpleMenu.test.tsx @@ -3,22 +3,19 @@ import { screen } from "@testing-library/react" import user from "@testing-library/user-event" import { SimpleMenu } from "./SimpleMenu" import type { SimpleMenuItem } from "./SimpleMenu" -import type { LinkProps } from "react-router-dom" import { renderWithTheme } from "../../test-utils" -// Mock react-router-dom's Link so we don't need to set up a Router +// Mock next/link's Link so we don't need to set up a Router jest.mock("next/link", () => { return { __esModule: true, - default: React.forwardRef( - jest.fn(({ children, ...props }, ref) => { - return ( - - {children} - - ) - }), - ), + default: jest.fn(({ children, ...props }) => { + return ( + + {children} + + ) + }), } }) diff --git a/yarn.lock b/yarn.lock index 4609f287fd..e9421bce50 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3713,13 +3713,6 @@ __metadata: languageName: node linkType: hard -"@remix-run/router@npm:1.19.2": - version: 1.19.2 - resolution: "@remix-run/router@npm:1.19.2" - checksum: 10/31b62b66ea68bd62018189047de7b262700113438f62407df019f81a9856a08a705b2b77454be9293518e2f5f3bbf3f8b858ac19f48cb7d89f8ab56b7b630c19 - languageName: node - linkType: hard - "@remixicon/react@npm:^4.2.0": version: 4.2.0 resolution: "@remixicon/react@npm:4.2.0" @@ -14364,8 +14357,6 @@ __metadata: prop-types: "npm:^15.8.1" react: "npm:^19.0.0" react-dom: "npm:^19.0.0" - react-router: "npm:^6.22.2" - react-router-dom: "npm:^6.22.2" react-select: "npm:^5.7.7" react-share: "npm:^5.0.3" react-slick: "npm:^0.30.2" @@ -15618,30 +15609,6 @@ __metadata: languageName: node linkType: hard -"react-router-dom@npm:^6.22.2": - version: 6.26.2 - resolution: "react-router-dom@npm:6.26.2" - dependencies: - "@remix-run/router": "npm:1.19.2" - react-router: "npm:6.26.2" - peerDependencies: - react: ">=16.8" - react-dom: ">=16.8" - checksum: 10/4eee37839bd1a660807c090b4d272e4aa9b95d8a9a932cdcdf7c5b10735f39b6db73bad79b08a3012386a7e225ff6bf60435e2741fb7c68e137ac5a6295d4308 - languageName: node - linkType: hard - -"react-router@npm:6.26.2, react-router@npm:^6.22.2": - version: 6.26.2 - resolution: "react-router@npm:6.26.2" - dependencies: - "@remix-run/router": "npm:1.19.2" - peerDependencies: - react: ">=16.8" - checksum: 10/496e855b53e61066c1791e354f5d79eab56a128d9722fdc6486c3ecd3b3a0bf9968e927028f429893b157f3cc10fc09e890a055847723ee242663e7995fedc9d - languageName: node - linkType: hard - "react-select@npm:^5.7.7": version: 5.8.1 resolution: "react-select@npm:5.8.1"