[Beta] Refactor navigation logic (#5492)

* Pass route lists explicitly

* Inline MarkdownPage into Page

* Pass breadcrumbs from above

* Remove state from router utils

* Pass section from above

Author: gaearon

beta/src/components/Breadcrumbs.tsx

@@ -3,12 +3,10 @@
  */
 
 import {Fragment} from 'react';
-import {useRouteMeta} from 'components/Layout/useRouteMeta';
 import Link from 'next/link';
+import type {RouteItem} from 'components/Layout/getRouteMeta';
 
-function Breadcrumbs() {
-  const {breadcrumbs} = useRouteMeta();
-  if (!breadcrumbs) return null;
+function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {
   return (
     <div className="flex flex-wrap">
       {breadcrumbs.map(

beta/src/components/DocsFooter.tsx

@@ -7,7 +7,7 @@ import {memo} from 'react';
 import cn from 'classnames';
 import {removeFromLast} from 'utils/removeFromLast';
 import {IconNavArrow} from './Icon/IconNavArrow';
-import {RouteMeta} from './Layout/useRouteMeta';
+import type {RouteMeta} from './Layout/getRouteMeta';
 
 export type DocsPageFooterProps = Pick<
   RouteMeta,

beta/src/components/Layout/MarkdownPage.tsx

@@ -12,13 +12,11 @@ import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
 import {IconClose} from 'components/Icon/IconClose';
 import {IconHamburger} from 'components/Icon/IconHamburger';
 import {Search} from 'components/Search';
-import {useActiveSection} from 'hooks/useActiveSection';
 import {Logo} from '../../Logo';
 import {Feedback} from '../Feedback';
 import NavLink from './NavLink';
-import {SidebarContext} from 'components/Layout/useRouteMeta';
 import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
-import type {RouteItem} from '../useRouteMeta';
+import type {RouteItem} from '../getRouteMeta';
 import sidebarLearn from '../../../sidebarLearn.json';
 import sidebarReference from '../../../sidebarReference.json';
 
@@ -92,17 +90,22 @@ const lightIcon = (
   </svg>
 );
 
-export default function Nav() {
+export default function Nav({
+  routeTree,
+  breadcrumbs,
+  section,
+}: {
+  routeTree: RouteItem;
+  breadcrumbs: RouteItem[];
+  section: 'learn' | 'reference' | 'home';
+}) {
   const [isOpen, setIsOpen] = useState(false);
   const [showFeedback, setShowFeedback] = useState(false);
   const scrollParentRef = useRef<HTMLDivElement>(null);
   const feedbackAutohideRef = useRef<any>(null);
-  const section = useActiveSection();
   const {asPath} = useRouter();
   const feedbackPopupRef = useRef<null | HTMLDivElement>(null);
 
-  // In desktop mode, use the route tree for current route.
-  let routeTree: RouteItem = useContext(SidebarContext);
   // In mobile mode, let the user switch tabs there and back without navigating.
   // Seed the tab state from the router, but keep it independent.
   const [tab, setTab] = useState(section);
@@ -344,6 +347,7 @@ export default function Nav() {
                 // This avoids unnecessary animations and visual flicker.
                 key={isOpen ? 'mobile-overlay' : 'desktop-or-hidden'}
                 routeTree={routeTree}
+                breadcrumbs={breadcrumbs}
                 isForceExpanded={isOpen}
               />
             </Suspense>

beta/src/components/Layout/Nav/Nav.tsx

@@ -6,52 +6,86 @@ import {Suspense} from 'react';
 import * as React from 'react';
 import {useRouter} from 'next/router';
 import {Nav} from './Nav';
-import {RouteItem, SidebarContext} from './useRouteMeta';
-import {useActiveSection} from 'hooks/useActiveSection';
 import {Footer} from './Footer';
 import {Toc} from './Toc';
 import SocialBanner from '../SocialBanner';
+import {DocsPageFooter} from 'components/DocsFooter';
+import {Seo} from 'components/Seo';
+import PageHeading from 'components/PageHeading';
+import {getRouteMeta} from './getRouteMeta';
+import {TocContext} from '../MDX/TocContext';
 import sidebarLearn from '../../sidebarLearn.json';
 import sidebarReference from '../../sidebarReference.json';
 import type {TocItem} from 'components/MDX/TocContext';
+import type {RouteItem} from 'components/Layout/getRouteMeta';
+
+import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
 
 interface PageProps {
   children: React.ReactNode;
   toc: Array<TocItem>;
+  routeTree: RouteItem;
+  meta: {title?: string; description?: string};
+  section: 'learn' | 'reference' | 'home';
 }
 
-export function Page({children, toc}: PageProps) {
+export function Page({children, toc, routeTree, meta, section}: PageProps) {
   const {asPath} = useRouter();
-  const section = useActiveSection();
-  let routeTree = sidebarLearn as RouteItem;
-  switch (section) {
-    case 'reference':
-      routeTree = sidebarReference as RouteItem;
-      break;
-  }
+  const cleanedPath = asPath.split(/[\?\#]/)[0];
+  const {route, nextRoute, prevRoute, breadcrumbs} = getRouteMeta(
+    cleanedPath,
+    routeTree
+  );
+  const title = meta.title || route?.title || '';
+  const description = meta.description || route?.description || '';
+  const isHomePage = cleanedPath === '/';
   return (
     <>
       <SocialBanner />
-      <SidebarContext.Provider value={routeTree}>
-        <div className="grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc">
-          <div className="fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none z-50">
-            <Nav />
-          </div>
-          {/* No fallback UI so need to be careful not to suspend directly inside. */}
-          <Suspense fallback={null}>
-            <main className="min-w-0">
-              <div className="lg:hidden h-16 mb-2" />
-              <article className="break-words" key={asPath}>
-                {children}
-              </article>
-              <Footer />
-            </main>
-          </Suspense>
-          <div className="hidden lg:max-w-xs 2xl:block">
-            {toc.length > 0 && <Toc headings={toc} key={asPath} />}
-          </div>
+      <div className="grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc">
+        <div className="fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none z-50">
+          <Nav
+            routeTree={routeTree}
+            breadcrumbs={breadcrumbs}
+            section={section}
+          />
+        </div>
+        {/* No fallback UI so need to be careful not to suspend directly inside. */}
+        <Suspense fallback={null}>
+          <main className="min-w-0">
+            <div className="lg:hidden h-16 mb-2" />
+            <article className="break-words" key={asPath}>
+              <div className="pl-0">
+                <Seo title={title} />
+                {!isHomePage && (
+                  <PageHeading
+                    title={title}
+                    description={description}
+                    tags={route?.tags}
+                    breadcrumbs={breadcrumbs}
+                  />
+                )}
+                <div className="px-5 sm:px-12">
+                  <div className="max-w-7xl mx-auto">
+                    <TocContext.Provider value={toc}>
+                      {children}
+                    </TocContext.Provider>
+                  </div>
+                  <DocsPageFooter
+                    route={route}
+                    nextRoute={nextRoute}
+                    prevRoute={prevRoute}
+                  />
+                </div>
+              </div>
+            </article>
+            <Footer />
+          </main>
+        </Suspense>
+        <div className="hidden lg:max-w-xs 2xl:block">
+          {toc.length > 0 && <Toc headings={toc} key={asPath} />}
         </div>
-      </SidebarContext.Provider>
+      </div>
     </>
   );
 }

beta/src/components/Layout/Page.tsx

@@ -5,16 +5,16 @@
 import {useRef, useLayoutEffect, Fragment} from 'react';
 
 import cn from 'classnames';
-import {RouteItem} from 'components/Layout/useRouteMeta';
 import {useRouter} from 'next/router';
 import {removeFromLast} from 'utils/removeFromLast';
-import {useRouteMeta} from '../useRouteMeta';
 import {SidebarLink} from './SidebarLink';
 import useCollapse from 'react-collapsed';
 import usePendingRoute from 'hooks/usePendingRoute';
+import type {RouteItem} from 'components/Layout/getRouteMeta';
 
 interface SidebarRouteTreeProps {
   isForceExpanded: boolean;
+  breadcrumbs: RouteItem[];
   routeTree: RouteItem;
   level?: number;
 }
@@ -72,31 +72,13 @@ function CollapseWrapper({
 
 export function SidebarRouteTree({
   isForceExpanded,
+  breadcrumbs,
   routeTree,
   level = 0,
 }: SidebarRouteTreeProps) {
-  const {breadcrumbs} = useRouteMeta(routeTree);
-  const cleanedPath = useRouter().asPath.split(/[\?\#]/)[0];
+  const slug = useRouter().asPath.split(/[\?\#]/)[0];
   const pendingRoute = usePendingRoute();
-
-  const slug = cleanedPath;
   const currentRoutes = routeTree.routes as RouteItem[];
-  const expandedPath = currentRoutes.reduce(
-    (acc: string | undefined, curr: RouteItem) => {
-      if (acc) return acc;
-      const breadcrumb = breadcrumbs.find((b) => b.path === curr.path);
-      if (breadcrumb) {
-        return curr.path;
-      }
-      if (curr.path === cleanedPath) {
-        return cleanedPath;
-      }
-      return undefined;
-    },
-    undefined
-  );
-
-  const expanded = expandedPath;
   return (
     <ul>
       {currentRoutes.map(
@@ -106,7 +88,6 @@ export function SidebarRouteTree({
         ) => {
           const pagePath = path && removeFromLast(path, '.');
           const selected = slug === pagePath;
-
           let listItem = null;
           if (!path || !pagePath || heading) {
             // if current route item has no path and children treat it as an API sidebar heading
@@ -115,11 +96,15 @@ export function SidebarRouteTree({
                 level={level + 1}
                 isForceExpanded={isForceExpanded}
                 routeTree={{title, routes}}
+                breadcrumbs={[]}
               />
             );
           } else if (routes) {
             // if route has a path and child routes, treat it as an expandable sidebar item
-            const isExpanded = isForceExpanded || expanded === path;
+            const isBreadcrumb =
+              breadcrumbs.length > 1 &&
+              breadcrumbs[breadcrumbs.length - 1].path === path;
+            const isExpanded = isForceExpanded || isBreadcrumb || selected;
             listItem = (
               <li key={`${title}-${path}-${level}-heading`}>
                 <SidebarLink
@@ -131,13 +116,14 @@ export function SidebarRouteTree({
                   title={title}
                   wip={wip}
                   isExpanded={isExpanded}
-                  isBreadcrumb={expandedPath === path}
+                  isBreadcrumb={isBreadcrumb}
                   hideArrow={isForceExpanded}
                 />
                 <CollapseWrapper duration={250} isExpanded={isExpanded}>
                   <SidebarRouteTree
                     isForceExpanded={isForceExpanded}
                     routeTree={{title, routes}}
+                    breadcrumbs={breadcrumbs}
                     level={level + 1}
                   />
                 </CollapseWrapper>

beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -2,9 +2,6 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {useContext, createContext} from 'react';
-import {useRouter} from 'next/router';
-
 /**
  * While Next.js provides file-based routing, we still need to construct
  * a sidebar for navigation and provide each markdown page
@@ -57,30 +54,19 @@ export interface RouteMeta {
   breadcrumbs?: RouteItem[];
 }
 
-export function useRouteMeta(rootRoute?: RouteItem) {
-  const sidebarContext = useContext(SidebarContext);
-  const routeTree = rootRoute || sidebarContext;
-  const router = useRouter();
-  if (router.pathname === '/404') {
-    return {
-      breadcrumbs: [],
-    };
-  }
-  const cleanedPath = router.asPath.split(/[\?\#]/)[0];
+export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
   const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
   return {
-    ...getRouteMeta(cleanedPath, routeTree),
+    ...buildRouteMeta(cleanedPath, routeTree, {}),
     breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree],
   };
 }
 
-export const SidebarContext = createContext<RouteItem>({title: 'root'});
-
 // Performs a depth-first search to find the current route and its previous/next route
-function getRouteMeta(
+function buildRouteMeta(
   searchPath: string,
   currentRoute: RouteItem,
-  ctx: RouteMeta = {}
+  ctx: RouteMeta
 ): RouteMeta {
   const {routes} = currentRoute;
 
@@ -101,7 +87,7 @@ function getRouteMeta(
   }
 
   for (const route of routes) {
-    getRouteMeta(searchPath, route, ctx);
+    buildRouteMeta(searchPath, route, ctx);
   }
 
   return ctx;