Disable About page prefetching (#1938)

* Disable about page prefetching * Scroll to top of page on navigate * Re-enable scroll to fragment * Update import rules for Next.js project structure
mitodl · Jan 7, 2025 · 7f56a03 · 7f56a03
1 parent d4acfa4
commit 7f56a03
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 18 deletions.
diff --git a/frontends/.eslintrc.js b/frontends/.eslintrc.js
@@ -18,7 +18,7 @@ module.exports = {
   settings: {
     "import/resolver": {
       typescript: {
-        project: "*/tsconfig.json",
+        project: "**/tsconfig.json",
       },
     },
     "jsx-a11y": {
@@ -99,14 +99,14 @@ module.exports = {
       {
         zones: [
           {
-            target: "**/{components,utilities}/**",
-            from: "**/{pages,page-components,services}/**",
+            target: "**/components/**",
+            from: "**/{app,app-pages,page-components}/**",
             message:
               "Import breaks component hierarchy. See https://github.com/mitodl/mit-open/blob/main/docs/architecture/front-end-component-structure.md#module-boundary-and-importexport-rules",
           },
           {
             target: "**/page-components/**",
-            from: "**/pages/**",
+            from: "**/{app,app-pages}/**",
             message:
               "Import breaks component hierarchy. See https://github.com/mitodl/mit-open/blob/main/docs/architecture/front-end-component-structure.md#module-boundary-and-importexport-rules",
           },

diff --git a/frontends/main/src/app-pages/AboutPage/AboutPage.tsx b/frontends/main/src/app-pages/AboutPage/AboutPage.tsx
@@ -7,13 +7,12 @@ import {
   theme,
   styled,
 } from "ol-components"
-import * as urls from "@/common/urls"
+import { HOME, ABOUT_NON_DEGREE_LEARNING_FRAGMENT } from "@/common/urls"
 import React from "react"
 import domeImage from "@/public/mit-dome-2.jpg"
 import Image from "next/image"
 
 const WHAT_IS_MIT_OPEN_FRAGMENT_IDENTIFIER = "what-is-mit-learn"
-const NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER = "non-degree-learning"
 const ACADEMIC_AND_PROFESSIONAL_CONTENT = "kinds-of-content"
 
 const SITE_NAME = process.env.NEXT_PUBLIC_SITE_NAME
@@ -116,7 +115,7 @@ const AboutPage: React.FC = () => {
         <BannerContainerInner>
           <Breadcrumbs
             variant="light"
-            ancestors={[{ href: urls.HOME, label: "Home" }]}
+            ancestors={[{ href: HOME, label: "Home" }]}
             current="About Us"
           />
           <Typography variant="h3" component="h1">
@@ -206,7 +205,7 @@ const AboutPage: React.FC = () => {
           <Typography
             variant="h4"
             component="h2"
-            id={NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER}
+            id={ABOUT_NON_DEGREE_LEARNING_FRAGMENT}
           >
             What is non-degree learning at MIT?
           </Typography>
@@ -257,9 +256,4 @@ const AboutPage: React.FC = () => {
   )
 }
 
-export {
-  AboutPage,
-  WHAT_IS_MIT_OPEN_FRAGMENT_IDENTIFIER,
-  NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER,
-  ACADEMIC_AND_PROFESSIONAL_CONTENT as WHAT_KINDS_OF_CONTENT_FRAGMENT_IDENTIFIER,
-}
+export { AboutPage }
diff --git a/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx b/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx
@@ -37,7 +37,7 @@ import {
   POPULAR_LEARNING_RESOURCES_CAROUSEL,
   CERTIFICATE_COURSES_CAROUSEL,
   FREE_COURSES_CAROUSEL,
-} from "./carousels"
+} from "../../common/carousels"
 import ResourceCarousel from "@/page-components/ResourceCarousel/ResourceCarousel"
 import UserListDetailsTab from "./UserListDetailsTab"
 import { SettingsPage } from "./SettingsPage"

diff --git a/.../src/app-pages/DashboardPage/carousels.ts → frontends/main/src/common/carousels.ts b/.../src/app-pages/DashboardPage/carousels.ts → frontends/main/src/common/carousels.ts
diff --git a/frontends/main/src/common/urls.ts b/frontends/main/src/common/urls.ts
@@ -98,6 +98,7 @@ export const SETTINGS = "/dashboard/settings"
 export const SEARCH = "/search"
 
 export const ABOUT = "/about"
+export const ABOUT_NON_DEGREE_LEARNING_FRAGMENT = "non-degree-learning"
 
 export const ACCESSIBILITY = "https://accessibility.mit.edu/"
 

diff --git a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
@@ -17,6 +17,7 @@ import {
   SEARCH_NEW,
   SEARCH_POPULAR,
   SEARCH_UPCOMING,
+  ABOUT_NON_DEGREE_LEARNING_FRAGMENT,
 } from "@/common/urls"
 import {
   RiAwardLine,
@@ -26,7 +27,6 @@ import {
   RiTimeLine,
   RiVerifiedBadgeLine,
 } from "@remixicon/react"
-import { NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER } from "@/app-pages/AboutPage/AboutPage"
 import Image from "next/image"
 import { SearchField } from "@/page-components/SearchField/SearchField"
 
@@ -221,7 +221,8 @@ const HeroSearch: React.FC<{ imageIndex: number }> = ({ imageIndex }) => {
         <Typography>
           Explore MIT's{" "}
           <BoldLink
-            href={`${ABOUT}#${NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER}`}
+            href={`${ABOUT}#${ABOUT_NON_DEGREE_LEARNING_FRAGMENT}`}
+            prefetch={false}
           >
             Non-Degree Learning
           </BoldLink>

diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.tsx
@@ -22,7 +22,7 @@ import { usePostHog } from "posthog-js/react"
 import ResourceCarousel from "../ResourceCarousel/ResourceCarousel"
 import { useIsLearningPathMember } from "api/hooks/learningPaths"
 import { useIsUserListMember } from "api/hooks/userLists"
-import { TopicCarouselConfig } from "@/app-pages/DashboardPage/carousels"
+import { TopicCarouselConfig } from "@/common/carousels"
 
 const RESOURCE_DRAWER_PARAMS = [RESOURCE_DRAWER_QUERY_PARAM] as const
 

diff --git a/frontends/ol-components/src/components/Link/Link.tsx b/frontends/ol-components/src/components/Link/Link.tsx
@@ -72,6 +72,7 @@ type LinkProps = LinkStyleProps &
      */
     shallow?: boolean
     scroll?: boolean
+    prefetch?: boolean
   }
 
 const BaseLink = ({