Updating navigation on DOM mutations

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/scroll-spy/scroll-spy.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import { useMutationObserver } from "../../hooks";
 import { NavigationTree } from "../tree-view";
 
 interface Props extends React.DOMAttributes<HTMLElement> {
@@ -75,14 +76,13 @@ export function ScrollSpy(props: Props) {
   useEffect(() => {
     setSections();
     observeSections();
-    // TODO: Attach on dom change event
   }, []);
 
   useEffect(() => {
     updateNavigation();
   }, [activeElementId]);
 
-  console.log(activeElementId);
+  useMutationObserver(parent, updateNavigation);
 
   return (
     <div className="ScrollSpy" ref={parent}>

src/renderer/hooks/index.ts

@@ -3,3 +3,4 @@
 export * from "./useStorage";
 export * from "./useOnUnmount";
 export * from "./useInterval";
+export * from "./useMutationObserver";

src/renderer/hooks/useMutationObserver.ts

@@ -0,0 +1,26 @@
+import { MutableRefObject, useEffect } from "react";
+
+const config: MutationObserverInit = {
+  subtree: true,
+  childList: true,
+  attributes: false,
+  characterData: false
+};
+
+export function useMutationObserver(
+  ref: MutableRefObject<HTMLElement>,
+  callback: MutationCallback,
+  options: MutationObserverInit = config
+) {
+  useEffect(() => {
+    if (ref.current) {
+      const observer = new MutationObserver(callback);
+
+      observer.observe(ref.current, options);
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [callback, options]);
+}