Next.js Migration Bug Fixes

frontends/api/src/test-utils/factories/learningResources.ts

@@ -101,7 +101,7 @@ const learningResourceBaseDepartment: Factory<
   return {
     department_id: uniqueEnforcerWords.enforce(() => faker.lorem.words()),
     name: uniqueEnforcerWords.enforce(() => faker.lorem.words()),
-    channel_url: faker.internet.url(),
+    channel_url: `${faker.internet.url({ appendSlash: false })}${faker.system.directoryPath()}`,
     ...overrides,
   }
 }

frontends/main/src/app-pages/ChannelPage/ChannelPage.test.tsx

@@ -290,7 +290,10 @@ describe("Channel Pages, Topic only", () => {
       name: (name) => subTopics?.results.map((t) => t.name).includes(name),
     })
     links.forEach((link, i) => {
-      expect(link).toHaveAttribute("href", subTopics.results[i].channel_url)
+      expect(link).toHaveAttribute(
+        "href",
+        new URL(subTopics.results[i].channel_url!).pathname,
+      )
     })
   })
 })

frontends/main/src/app-pages/ChannelPage/ChannelPage.tsx

@@ -62,7 +62,7 @@ const SubTopicsDisplay: React.FC<SubTopicDisplayProps> = (props) => {
               size="large"
               variant="outlinedWhite"
               key={topic.id}
-              href={topic.channel_url}
+              href={new URL(topic.channel_url).pathname}
               label={topic.name}
             />
           ))}

frontends/main/src/app-pages/ChannelPage/ChannelSearch.test.tsx

@@ -301,7 +301,6 @@ describe("ChannelSearch", () => {
     setMockResponse.get(urls.userMe.get(), {})
 
     const initialSearch = "?q=meow&page=2"
-    const finalSearch = "?q=woof"
 
     const { location } = renderWithProviders(<ChannelPage />, {
       url: `/c/${channel.channel_type}/${channel.name}${initialSearch}`,
@@ -313,8 +312,8 @@ describe("ChannelSearch", () => {
     expect(queryInput.value).toBe("meow")
     await user.clear(queryInput)
     await user.paste("woof")
-    expect(location.current.search).toBe(initialSearch)
+    expect(location.current.searchParams.get("q")).toBe("meow")
     await user.click(screen.getByRole("button", { name: "Search" }))
-    expect(location.current.search).toBe(finalSearch)
+    expect(location.current.searchParams.get("q")).toBe("woof")
   })
 })

frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.test.tsx

@@ -154,7 +154,7 @@ describe("DepartmentListingPage", () => {
       name: (name) => name.includes(dept.name),
     })
 
-    expect(link).toHaveAttribute("href", dept.channel_url)
+    expect(link).toHaveAttribute("href", new URL(dept.channel_url!).pathname)
   })
 
   test("headings", async () => {

frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.tsx

@@ -150,7 +150,12 @@ const SchoolDepartments: React.FC<SchoolDepartmentProps> = ({
           if (!department.channel_url) return null
           return (
             <ListItem disablePadding key={department.department_id}>
-              <DepartmentLink href={department.channel_url}>
+              <DepartmentLink
+                href={
+                  department.channel_url &&
+                  new URL(department.channel_url).pathname
+                }
+              >
                 <ListItemText
                   primary={department.name}
                   secondary={counts

frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx

@@ -116,7 +116,10 @@ const BrowseTopicsSection: React.FC = () => {
           {topics?.results.map(
             ({ id, name, channel_url: channelUrl, icon }) => {
               return (
-                <TopicBox key={id} href={new URL(channelUrl!).pathname}>
+                <TopicBox
+                  key={id}
+                  href={channelUrl ? new URL(channelUrl!).pathname : ""}
+                >
                   <TopicBoxContent>
                     <RootTopicIcon icon={icon} />
                     <TopicBoxName>{name}</TopicBoxName>

frontends/main/src/app-pages/OnboardingPage/OnboardingPage.tsx

@@ -231,7 +231,6 @@ const OnboardingPage: React.FC = () => {
         }
         values={formik.values.goals}
         onChange={(event) => {
-          console.log(event)
           formik.handleChange(event)
         }}
       />

frontends/main/src/app-pages/SearchPage/SearchPage.test.tsx

@@ -146,6 +146,7 @@ describe("SearchPage", () => {
         },
       },
     })
+
     const { location } = renderWithProviders(<SearchPage />, {
       url: "?topic=Physics&topic=Chemistry",
     })

frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.test.tsx

@@ -115,17 +115,17 @@ describe("TopicsListingPage", () => {
     expect(subtopics1[1]).toHaveTextContent(sortedSubtopics1[0].name)
     expect(subtopics1[2]).toHaveTextContent(sortedSubtopics1[1].name)
     expect(subtopics1[3]).toHaveTextContent(sortedSubtopics1[2].name)
-    expect(subtopics1.map((el) => el.href)).toEqual([
-      topics.t1.channel_url,
-      ...sortedSubtopics1.map((t) => t.channel_url),
+    expect(subtopics1.map((el) => new URL(el.href).pathname)).toEqual([
+      new URL(topics.t1.channel_url!).pathname,
+      ...sortedSubtopics1.map((t) => new URL(t.channel_url!).pathname),
     ])
 
     expect(subtopics2[0]).toHaveTextContent(topics.t2.name)
     expect(subtopics2[1]).toHaveTextContent(sortedSubtopics2[0].name)
     expect(subtopics2[2]).toHaveTextContent(sortedSubtopics2[1].name)
-    expect(subtopics2.map((el) => el.href)).toEqual([
-      topics.t2.channel_url,
-      ...sortedSubtopics2.map((t) => t.channel_url),
+    expect(subtopics2.map((el) => new URL(el.href).pathname)).toEqual([
+      new URL(topics.t2.channel_url!).pathname,
+      ...sortedSubtopics2.map((t) => new URL(t.channel_url!).pathname),
     ])
   })
 

frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx

@@ -132,6 +132,7 @@ const TopicBox = ({
     { label: "Programs", count: programCount },
   ].filter((item) => item.count)
   const { title, href, icon, channels } = topicGroup
+
   return (
     <li className={className}>
       <TopicBoxHeader title={title} href={href} icon={icon} />
@@ -149,7 +150,7 @@ const TopicBox = ({
               size="large"
               variant="outlinedWhite"
               key={c.id}
-              href={c.channel_url}
+              href={c.channel_url && new URL(c.channel_url).pathname}
               label={c.name}
             />
           ))}
@@ -160,7 +161,7 @@ const TopicBox = ({
               size="medium"
               variant="outlinedWhite"
               key={c.id}
-              href={c.channel_url}
+              href={c.channel_url && new URL(c.channel_url).pathname}
               label={c.name}
             />
           ))}

frontends/main/src/app-pages/UnitsListingPage/UnitCard.tsx

@@ -139,7 +139,7 @@ const UnitCard: React.FC<UnitCardProps> = (props) => {
   return channelDetailQuery.isLoading ? (
     <UnitCardLoading />
   ) : (
-    <CardStyled href={new URL(unitUrl!).pathname}>
+    <CardStyled href={unitUrl && new URL(unitUrl!).pathname}>
       <Card.Content>
         <UnitCardContainer>
           <UnitCardContent>

frontends/main/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import React, { Component } from "react"
-import NotFoundPage from "@/app-pages/ErrorPage/NotFoundPage"
 import ForbiddenPage from "@/app-pages/ErrorPage/ForbiddenPage"
 import { ForbiddenError } from "@/common/permissions"
 import { usePathname } from "next/navigation"
@@ -57,14 +56,9 @@ class ErrorBoundaryHandler extends Component<
   }
 
   render() {
-    if (this.state.hasError) {
-      if (isForbiddenError(this.state.error)) {
-        return <ForbiddenPage />
-      } else {
-        return <NotFoundPage />
-      }
+    if (this.state.hasError && isForbiddenError(this.state.error)) {
+      return <ForbiddenPage />
     }
-
     return this.props.children
   }
 }

frontends/main/src/page-components/Header/Header.tsx

@@ -120,6 +120,9 @@ const StyledSearchButton = styled(ActionButtonLink)(({ theme }) => ({
   [theme.breakpoints.down("sm")]: {
     padding: "0",
   },
+  alignItems: "center",
+  display: "inline-flex",
+  justifyContent: "center",
 }))
 
 const StyledSearchIcon = styled(RiSearch2Line)(({ theme }) => ({

frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx

@@ -1,15 +1,12 @@
 import React from "react"
 import {
-  act,
   expectProps,
   renderWithProviders,
   screen,
   waitFor,
   within,
 } from "@/test-utils"
-import LearningResourceDrawer, {
-  useOpenLearningResourceDrawer,
-} from "./LearningResourceDrawer"
+import LearningResourceDrawer from "./LearningResourceDrawer"
 import { urls, factories, setMockResponse } from "api/test-utils"
 import { LearningResourceExpanded } from "ol-components"
 import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
@@ -77,29 +74,6 @@ describe("LearningResourceDrawer", () => {
     expect(LearningResourceExpanded).not.toHaveBeenCalled()
   })
 
-  test("useOpenLearningResourceDrawer sets correct parameter", () => {
-    let openDrawer = (_id: number): void => {
-      throw new Error("Not implemented")
-    }
-    const TestComponent = () => {
-      openDrawer = useOpenLearningResourceDrawer()
-      return null
-    }
-    const { location } = renderWithProviders(<TestComponent />, {
-      url: "?dog=woof",
-    })
-
-    act(() => {
-      openDrawer(123)
-    })
-
-    const params = new URLSearchParams(location.current.search)
-    expect(Object.fromEntries(params)).toEqual({
-      [RESOURCE_DRAWER_QUERY_PARAM]: "123",
-      dog: "woof",
-    })
-  })
-
   test.each([
     {
       isLearningPathEditor: true,

frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx

@@ -9,11 +9,7 @@ import type {
   RoutedDrawerProps,
 } from "ol-components"
 import { useLearningResourcesDetail } from "api/hooks/learningResources"
-import {
-  useSearchParams,
-  useRouter,
-  ReadonlyURLSearchParams,
-} from "next/navigation"
+import { useSearchParams, ReadonlyURLSearchParams } from "next/navigation"
 
 import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
 import { useUserMe } from "api/hooks/user"
@@ -142,29 +138,17 @@ const getOpenDrawerSearchParams = (
   return newSearchParams
 }
 
-const useOpenLearningResourceDrawer = () => {
-  const searchParams = useSearchParams()
-  const router = useRouter()
-
-  const openLearningResourceDrawer = useCallback(
-    (resourceId: number) => {
-      router.push(`?${getOpenDrawerSearchParams(searchParams, resourceId)}`)
-    },
-    [router, searchParams],
-  )
-  return openLearningResourceDrawer
-}
-
 const useResourceDrawerHref = () => {
   const searchParams = useSearchParams()
 
   return useCallback(
     (resourceId: number) => {
-      return `?${getOpenDrawerSearchParams(searchParams, resourceId)}`
+      const hash = window?.location.hash
+      return `?${getOpenDrawerSearchParams(searchParams, resourceId)}${hash || ""}`
     },
     [searchParams],
   )
 }
 
 export default LearningResourceDrawer
-export { useOpenLearningResourceDrawer, useResourceDrawerHref }
+export { useResourceDrawerHref }

frontends/main/src/test-utils/index.tsx

@@ -70,6 +70,7 @@ const renderWithProviders = (
     const user = { ...defaultUser, ...allOpts.user }
     queryClient.setQueryData(["userMe"], { ...user })
   }
+
   mockRouter.setCurrentUrl(url)
 
   const view = render(
@@ -78,8 +79,15 @@ const renderWithProviders = (
 
   const location = {
     get current() {
-      const url = new URL(mockRouter.asPath, "http://localhost")
-      return { pathname: mockRouter.pathname, search: url.search }
+      const searchParams = new URLSearchParams(
+        mockRouter.query as unknown as URLSearchParams,
+      )
+      const search = searchParams.toString()
+      return {
+        pathname: mockRouter.pathname,
+        searchParams,
+        search: search ? `?${search}` : "",
+      }
     },
   }