SUL23-638 | resolve type errors

SU-SWS · Oct 8, 2024 · 372e205 · 372e205
1 parent 8ac2f59
commit 372e205
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 19 deletions.
diff --git a/src/components/patterns/on-the-page.tsx b/src/components/patterns/on-the-page.tsx
@@ -3,7 +3,9 @@
 import React, {useState, useEffect, useMemo} from "react"
 import parse from "html-react-parser"
 import {NodeStanfordPage} from "@/lib/gql/__generated__/drupal.d"
+import {ParagraphStanfordWysiwyg} from "@/lib/gql/__generated__/drupal.d"
 import {twMerge} from "tailwind-merge"
+import DrupalLink from "./elements/drupal-link"
 
 interface Heading {
   text: string
@@ -19,18 +21,22 @@ const OnThePageLink = ({node}: {node: NodeStanfordPage}) => {
     const content =
       node?.suPageComponents &&
       node?.suPageComponents
-        .filter(item => item.__typename === "ParagraphStanfordWysiwyg")
-        .map(item => item.suWysiwygText.processed)
+        .filter((item): item is ParagraphStanfordWysiwyg => item.__typename === "ParagraphStanfordWysiwyg")
+        .map(item => item.suWysiwygText && item.suWysiwygText.processed)
         .join(" ")
 
-    const parsedContent = parse(content)
+    const parsedContent = parse(content ?? "")
     const headingsArr: Heading[] = []
 
     React.Children.forEach(parsedContent, child => {
       if (React.isValidElement(child) && child.type === "h2") {
-        const text = child.props.children
-        const id = text.toLowerCase().replace(/\s+/g, "-")
-        headingsArr.push({text, id})
+        const element = child as React.ReactElement
+        const text = element.props.children
+
+        if (typeof text === "string") {
+          const id = text.toLowerCase().replace(/\s+/g, "-")
+          headingsArr.push({text, id})
+        }
       }
     })
 
@@ -65,7 +71,7 @@ const OnThePageLink = ({node}: {node: NodeStanfordPage}) => {
   }, [headings])
 
   return (
-    <div className="sticky top-0 h-fit bg-fog-light px-24 pb-40 pt-16">
+    <div className="sticky top-0 h-fit max-w-300 bg-fog-light px-24 pb-40 pt-16">
       <nav>
         <h3 className="font-sans font-semibold">On this page</h3>
         <ul className="list-none p-0">
@@ -74,7 +80,7 @@ const OnThePageLink = ({node}: {node: NodeStanfordPage}) => {
               <a
                 href={`#${heading.id}`}
                 className={twMerge(
-                  "type-1 border-l-4 pl-16 font-sans font-normal leading-[36px] text-black no-underline",
+                  "type-1 block border-l-4 pl-16 font-sans font-normal leading-[36px] text-black no-underline",
                   activeHeading === heading.id ? "border-cardinal-red" : "border-transparent"
                 )}
               >
@@ -90,9 +96,11 @@ const OnThePageLink = ({node}: {node: NodeStanfordPage}) => {
           <ul className="list-none p-0">
             {relLinks.map((link, index) => (
               <li key={index}>
-                <a href={link.url} className={twMerge("type-1 font-sans font-normal leading-[36px]")}>
-                  {link.title}
-                </a>
+                {link.url && (
+                  <DrupalLink href={link.url} className={twMerge("type-1 font-sans font-normal leading-[36px]")}>
+                    {link.title}
+                  </DrupalLink>
+                )}
               </li>
             ))}
           </ul>

diff --git a/src/lib/format-html.tsx b/src/lib/format-html.tsx
@@ -96,14 +96,16 @@ const options: HTMLReactParserOptions = {
           return <NodeName {...nodeProps}>{domToReact(domNode.children as DOMNode[], options)}</NodeName>
 
         case "h2":
-          console.log("DATA:", domNode.children[0])
-          const text = domNode.children[0].data
-          const id = text.toLowerCase().replace(/\s+/g, "-")
-          return (
-            <NodeName {...nodeProps} id={id} className={twMerge("scroll-smooth", nodeProps.className)}>
-              {domToReact(domNode.children as DOMNode[], options)}
-            </NodeName>
-          )
+          if (domNode.children[0] instanceof Text) {
+            const text = domNode.children[0].data
+            const id = text.toLowerCase().replace(/\s+/g, "-")
+            return (
+              <NodeName {...nodeProps} id={id} className={twMerge("scroll-smooth", nodeProps.className)}>
+                {domToReact(domNode.children as DOMNode[], options)}
+              </NodeName>
+            )
+          }
+          return <NodeName {...nodeProps}>{domToReact(domNode.children as DOMNode[], options)}</NodeName>
         case "p":
           nodeProps.className += " max-w-[100ch]"
         case "h1":