From 99014e5634c6216173bf90117750f95172924134 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 11 Jan 2022 15:28:08 +0100
Subject: fix(toc): render on each route change and exclude aside titles

On subject pages for example, the table of contents was not updated on
route change. So I added router.asPath as dependency of useEffect.
I also changed the query to exclude all titles in aside (ToC, widgets).
---
 src/utils/hooks/useHeadingsTree.tsx | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

(limited to 'src/utils')

diff --git a/src/utils/hooks/useHeadingsTree.tsx b/src/utils/hooks/useHeadingsTree.tsx
index 745ba23..267e97d 100644
--- a/src/utils/hooks/useHeadingsTree.tsx
+++ b/src/utils/hooks/useHeadingsTree.tsx
@@ -1,10 +1,24 @@
 import { Heading } from '@ts/types/app';
 import { slugify } from '@utils/helpers/slugify';
+import { useRouter } from 'next/router';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 const useHeadingsTree = (wrapper: string) => {
-  const [headingsTree, setHeadingsTree] = useState<Heading[]>([]);
+  const router = useRouter();
   const depths = useMemo(() => ['h2', 'h3', 'h4', 'h5', 'h6'], []);
+  const [allHeadings, setAllHeadings] =
+    useState<NodeListOf<HTMLHeadingElement>>();
+
+  useEffect(() => {
+    const query = depths
+      .map((depth) => `${wrapper} > *:not(aside) ${depth}`)
+      .join(', ');
+    const result: NodeListOf<HTMLHeadingElement> =
+      document.querySelectorAll(query);
+    setAllHeadings(result);
+  }, [depths, wrapper, router.asPath]);
+
+  const [headingsTree, setHeadingsTree] = useState<Heading[]>([]);
 
   const getElementDepth = useCallback(
     (el: HTMLHeadingElement) => {
@@ -78,12 +92,11 @@ const useHeadingsTree = (wrapper: string) => {
   );
 
   useEffect(() => {
-    const query = depths.map((depth) => `${wrapper} ${depth}`).join(', ');
-    const headings: NodeListOf<HTMLHeadingElement> =
-      document.querySelectorAll(query);
-    const headingsList = getHeadingsList(headings);
-    setHeadingsTree(headingsList);
-  }, [depths, wrapper, getHeadingsList]);
+    if (allHeadings) {
+      const headingsList = getHeadingsList(allHeadings);
+      setHeadingsTree(headingsList);
+    }
+  }, [allHeadings, getHeadingsList]);
 
   return headingsTree;
 };
-- 
cgit v1.2.3