Resolving comments and improving types

Author: BrettJephson

packages/gitbook/src/app/(site)/(content)/layout.tsx

@@ -40,7 +40,6 @@ export default async function ContentLayout(props: { children: React.ReactNode }
         ancestors,
         scripts,
         sections,
-        section,
     } = await fetchContentData();
 
     ReactDOM.preconnect(api().endpoint);
@@ -69,7 +68,6 @@ export default async function ContentLayout(props: { children: React.ReactNode }
                 site={site}
                 spaces={spaces}
                 sections={sections}
-                section={section}
                 customization={customization}
                 pages={pages}
                 ancestors={ancestors}

packages/gitbook/src/app/(site)/fetch.ts

@@ -1,4 +1,5 @@
-import { RevisionPage, SiteSpace, Space } from '@gitbook/api';
+import { RevisionPage, SiteSection, SiteSpace, Space } from '@gitbook/api';
+import { assert } from 'ts-essentials';
 
 import {
     getRevisionPageByPath,
@@ -20,6 +21,8 @@ export interface PageIdParams {
     pageId: string;
 }
 
+type SectionsList = { list: SiteSection[]; section: SiteSection; };
+
 /**
  * Fetch all the data needed to render the content layout.
  */
@@ -33,17 +36,15 @@ export async function fetchContentData() {
                 organizationId: content.organizationId,
                 siteId: content.siteId,
                 siteShareKey: content.siteShareKey,
-                siteSpaceId: content.siteSpaceId,
             }),
         ]);
 
     const site = siteStructure.site;
 
-    const sections = siteStructure.sections;
-    const section = siteStructure.sections?.find((section) => section.id === content.siteSectionId);
-
+    const siteSections = getSiteSectionsList(content.siteSectionId, siteStructure.sections);
+    
     const spaces =
-        siteStructure.spaces ?? (section ? parseSpacesFromSiteSpaces(section.siteSpaces) : []);
+        siteStructure.spaces ?? (siteSections ? parseSpacesFromSiteSpaces(siteSections.section.siteSpaces) : []);
 
     // we grab the space attached to the parent as it contains overriden customizations
     const spaceRelativeToParent = spaces?.find((space) => space.id === content.spaceId);
@@ -53,8 +54,7 @@ export async function fetchContentData() {
         contentTarget,
         space: spaceRelativeToParent ?? space,
         pages,
-        sections,
-        section,
+        sections: siteSections,
         site,
         spaces,
         customization,
@@ -63,6 +63,19 @@ export async function fetchContentData() {
     };
 }
 
+function getSiteSectionsList(siteSectionId?: string, sections?: SiteSection[] | null) {
+    if (!sections) {
+        return null;
+    }
+    const section = sections?.find((section) => section.id === siteSectionId);
+    assert(sectionIsDefined(section), "A section must be defined when there are multiple sections");
+    return { list: sections, section } satisfies SectionsList;
+}
+
+function sectionIsDefined(section?: SiteSection): section is NonNullable<SiteSection>  {
+    return typeof section !== 'undefined' && section !== null;
+}
+
 /**
  * Fetch all the data needed to render the content.
  * Optimized to fetch in parallel as much as possible.
@@ -77,7 +90,6 @@ export async function fetchPageData(params: PagePathParams | PageIdParams) {
             organizationId: content.organizationId,
             siteId: content.siteId,
             siteShareKey: content.siteShareKey,
-            siteSpaceId: content.siteSpaceId,
         }),
         page?.page.documentId ? getDocument(space.id, page.page.documentId) : null,
     ]);
@@ -139,13 +151,12 @@ async function resolvePage(
 
 /**
  * Fetch the structure of an organization site.
- * This includes the site and its sections and spaces.
+ * This includes the site and its sections or spaces.
  */
 async function fetchSiteStructure(args: {
     organizationId: string;
     siteId: string;
     siteShareKey: string | undefined;
-    siteSpaceId: string | undefined;
 }) {
     const { organizationId, siteId, siteShareKey } = args;
     const [orgSite, siteStructure, siteParentCustomizations] = await Promise.all([

packages/gitbook/src/components/SiteSectionTabs/SiteSectionTab.tsx

@@ -7,7 +7,10 @@ import { tcls } from '@/lib/tailwind';
 
 import { Button, Link } from '../primitives';
 
-export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteSection }) {
+/**
+ * A set of tabs representing site sections for multi-section sites
+ */
+export function SiteSectionTabs(props: { sections: SiteSection[], section: SiteSection }) {
     const { sections, section: currentSection } = props;
 
     const tabs = sections.map((section) => ({
@@ -89,6 +92,9 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
     ) : null;
 }
 
+/**
+ * The tab item - a link to a site section
+ */
 const Tab = React.forwardRef<
     HTMLAnchorElement,
     { active: boolean; href: string; label: string; onClick: any }
@@ -114,6 +120,9 @@ const Tab = React.forwardRef<
     );
 });
 
+/**
+ * Dropdown trigger for when there are too many sections to show them all
+ */
 function MoreSectionsButton() {
     return (
         <div>

packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

@@ -31,8 +31,7 @@ export function SpaceLayout(props: {
     contentTarget: ContentTarget;
     space: Space;
     site: Site | null;
-    sections: SiteSection[] | null;
-    section?: SiteSection;
+    sections: { list: SiteSection[], section: SiteSection } | null;
     spaces: Space[];
     customization: CustomizationSettings | SiteCustomizationSettings;
     pages: Revision['pages'];
@@ -44,7 +43,6 @@ export function SpaceLayout(props: {
         contentTarget,
         site,
         sections,
-        section,
         spaces,
         content,
         pages,
@@ -74,9 +72,9 @@ export function SpaceLayout(props: {
                 customization={customization}
             />
             <div className={tcls('scroll-nojump')}>
-                {sections && section ? (
+                {sections ? (
                     <div className={tcls(CONTAINER_STYLE)}>
-                        <SiteSectionTabs sections={sections} section={section} />
+                        <SiteSectionTabs sections={sections.list} section={sections.section} />
                     </div>
                 ) : null}
                 <div