From dfb50ca6bab339e3a283d5bcd18e1ca52e06dd8b Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Thu, 27 Apr 2023 16:03:27 -0500
Subject: [PATCH] Feat: Sync Navbar Section Dropdown

Added section context that can be set when section heading
scrolls into browser viewport and it's value can be used
to set the current value of the navbar dropdown.

Added kebab case utility method for converting title to element
id.
---
 src/app/components/Main.tsx            |  2 +-
 src/app/components/NavBar.tsx          |  2 +-
 src/app/components/Page.tsx            | 24 +++++++++++++--------
 src/app/components/SectionDropdown.tsx | 12 +++++++----
 src/app/components/SideBar.tsx         | 13 +++++-------
 src/app/context/section.tsx            | 29 ++++++++++++++++++++++++++
 src/app/{ => context}/theme.tsx        |  0
 src/app/layout.tsx                     |  7 +++++--
 src/app/utils/stringUtils.ts           |  3 +++
 9 files changed, 67 insertions(+), 25 deletions(-)
 create mode 100644 src/app/context/section.tsx
 rename src/app/{ => context}/theme.tsx (100%)
 create mode 100644 src/app/utils/stringUtils.ts

diff --git a/src/app/components/Main.tsx b/src/app/components/Main.tsx
index 6f97a05..d2e00aa 100644
--- a/src/app/components/Main.tsx
+++ b/src/app/components/Main.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Fragment } from 'react';
-import { themes, useThemeContext } from '../theme';
+import { themes, useThemeContext } from '../context/theme';
 import { DocSection } from '../types/types';
 import styles from './Main.module.css';
 import Section from './Section';
diff --git a/src/app/components/NavBar.tsx b/src/app/components/NavBar.tsx
index b728ed0..a22c71a 100644
--- a/src/app/components/NavBar.tsx
+++ b/src/app/components/NavBar.tsx
@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import { useState } from 'react';
-import { themes, useThemeContext } from '../theme';
+import { themes, useThemeContext } from '../context/theme';
 import { DocsStructure } from '../types/types';
 import styles from './NavBar.module.css';
 import SectionDropdown from './SectionDropdown';
diff --git a/src/app/components/Page.tsx b/src/app/components/Page.tsx
index 1ce34c2..98408e3 100644
--- a/src/app/components/Page.tsx
+++ b/src/app/components/Page.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
-import { themes, useThemeContext } from '../theme';
+import { useEffect } from 'react';
+import { useSectionContext } from '../context/section';
+import { themes, useThemeContext } from '../context/theme';
 import { DocSection, DocsStructure } from '../types/types';
 import Main from './Main';
 import NavBar from './NavBar';
@@ -17,26 +18,31 @@ export default function Page({
 }) {
   const { theme } = useThemeContext();
   const themeStyles = themes[theme];
-  const docRef = useRef<HTMLDivElement>(null);
-  const [currentSection, setCurrentSection] = useState('');
+
+  const { setSection } = useSectionContext();
 
   useEffect(() => {
     const titles =
       document.querySelectorAll<HTMLHeadingElement>(
-        '.section-title'
+        'article:nth-child(1) > h1'
       );
 
     const observer = new IntersectionObserver(
       entries => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
-            setCurrentSection(entry.target.id);
+            setSection(entry.target.id);
+            history.pushState(
+              null,
+              '',
+              `#${entry.target.id}`
+            );
           }
         });
       },
       {
         root: null,
-        rootMargin: '-10% 0% -80% 0%',
+        rootMargin: '-10% 0% -70% 0%',
         threshold: 1,
       }
     );
@@ -46,12 +52,12 @@ export default function Page({
     return () => {
       titles.forEach(title => observer.unobserve(title));
     };
-  }, []);
+  }, [setSection]);
 
   return (
     <div className={styles.wrapper} style={themeStyles}>
       <SideBar version={version} />
-      <div ref={docRef} className={styles.container}>
+      <div className={styles.container}>
         <NavBar version={version} />
         <Main versionSections={versionSections} />
       </div>
diff --git a/src/app/components/SectionDropdown.tsx b/src/app/components/SectionDropdown.tsx
index e31e155..83c430d 100644
--- a/src/app/components/SectionDropdown.tsx
+++ b/src/app/components/SectionDropdown.tsx
@@ -1,5 +1,7 @@
 import { Fragment } from 'react';
+import { useSectionContext } from '../context/section';
 import { Doc, DocsStructure } from '../types/types';
+import { toKebabCase } from '../utils/stringUtils';
 import styles from './SectionDropdown.module.css';
 
 function SectionDropdownOption({ doc }: { doc: Doc }) {
@@ -9,6 +11,7 @@ function SectionDropdownOption({ doc }: { doc: Doc }) {
         <option
           className={styles.selectItem}
           label={doc.title}
+          value={toKebabCase(doc.title)}
         >
           {doc.title}
         </option>
@@ -17,6 +20,7 @@ function SectionDropdownOption({ doc }: { doc: Doc }) {
         <optgroup label={doc.title}>
           {doc.children.map(child => (
             <option
+              value={toKebabCase(child.title)}
               className={styles.selectItem}
               label={child.title}
               key={child.title}
@@ -35,11 +39,10 @@ export default function SectionDropdown({
 }: {
   version: DocsStructure;
 }) {
+  const { section, setSection } = useSectionContext();
   const handleSelectChange = (e: any) => {
-    const selectedOption = e.target.value;
-    location.hash = selectedOption
-      .replaceAll(' ', '-')
-      .toLowerCase();
+    setSection(e.target.value);
+    location.hash = e.target.value;
   };
 
   return (
@@ -47,6 +50,7 @@ export default function SectionDropdown({
       onChange={handleSelectChange}
       title="navigation dropdown"
       className={styles.dropdownSelect}
+      value={section}
     >
       {version.docs.map(doc => {
         return (
diff --git a/src/app/components/SideBar.tsx b/src/app/components/SideBar.tsx
index aebe64c..2f681c2 100644
--- a/src/app/components/SideBar.tsx
+++ b/src/app/components/SideBar.tsx
@@ -2,8 +2,9 @@
 
 import Link from 'next/link.js';
 import { useState } from 'react';
-import { useThemeContext } from '../theme';
-import { Doc, DocsStructure } from '../types/types.js';
+import { useThemeContext } from '../context/theme';
+import { Doc, DocsStructure } from '../types/types';
+import { toKebabCase } from '../utils/stringUtils';
 import styles from './SideBar.module.css';
 
 function TreeNode({ doc }: { doc: Doc }) {
@@ -19,9 +20,7 @@ function TreeNode({ doc }: { doc: Doc }) {
         <div className={styles.expandable}>
           {doc.copy ? (
             <a
-              href={`#${doc.title
-                .replaceAll(' ', '-')
-                .toLowerCase()}`}
+              href={`#${toKebabCase(doc.title)}`}
               className={styles.link}
             >
               {doc.title}
@@ -66,9 +65,7 @@ function TreeNode({ doc }: { doc: Doc }) {
         </div>
       ) : doc.copy ? (
         <a
-          href={`#${doc.title
-            .replaceAll(' ', '-')
-            .toLowerCase()}`}
+          href={`#${toKebabCase(doc.title)}`}
           className={styles.link}
         >
           {doc.title}
diff --git a/src/app/context/section.tsx b/src/app/context/section.tsx
new file mode 100644
index 0000000..2bd8a0d
--- /dev/null
+++ b/src/app/context/section.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useState,
+} from 'react';
+
+const SectionContext = createContext({});
+
+export const SectionContextProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [section, setSection] = useState('introduction');
+
+  return (
+    <SectionContext.Provider
+      value={{ section, setSection }}
+    >
+      {children}
+    </SectionContext.Provider>
+  );
+};
+
+export const useSectionContext: any = () =>
+  useContext(SectionContext);
diff --git a/src/app/theme.tsx b/src/app/context/theme.tsx
similarity index 100%
rename from src/app/theme.tsx
rename to src/app/context/theme.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8ef781a..5424df7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,8 @@
 import { Analytics } from '@vercel/analytics/react';
 import { ReactNode } from 'react';
+import { SectionContextProvider } from './context/section';
+import { ThemeContextProvider } from './context/theme';
 import './globals.css';
-import { ThemeContextProvider } from './theme';
 
 export const metadata = {
   title: 'Onspring API Docs',
@@ -30,7 +31,9 @@ export default function RootLayout({
     <html lang="en">
       <body>
         <ThemeContextProvider>
-          {children}
+          <SectionContextProvider>
+            {children}
+          </SectionContextProvider>
         </ThemeContextProvider>
         <Analytics />
       </body>
diff --git a/src/app/utils/stringUtils.ts b/src/app/utils/stringUtils.ts
new file mode 100644
index 0000000..33e83b7
--- /dev/null
+++ b/src/app/utils/stringUtils.ts
@@ -0,0 +1,3 @@
+export function toKebabCase(str: string): string {
+  return str.replaceAll(' ', '-').toLowerCase();
+}