Highlight selected item

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

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

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import { NavigationTree } from "../tree-view";
 
-interface Props extends React.DOMAttributes<any> {
+interface Props extends React.DOMAttributes<HTMLElement> {
-  render: (data: NavigationTree[]) => any
+  render: (data: NavigationTree[]) => JSX.Element
 }
 
 export function ScrollSpy(props: Props) {
@@ -20,10 +20,7 @@ export function ScrollSpy(props: Props) {
   };
 
   const updateNavigation = () => {
-    setTree([
+    setTree(getNavigation(sections.current[0].parentElement));
-      ...tree,
-      ...getNavigation(sections.current[0].parentElement)
-    ]);
   };
 
   const getNavigation = (element: Element) => {
@@ -33,6 +30,7 @@ export function ScrollSpy(props: Props) {
     sections.forEach(section => {
       const id = section.getAttribute("id");
       const name = section.querySelector(":first-child").textContent;
+      const selected = id === activeElementId;
 
       if (!name || !id) {
         return;
@@ -41,6 +39,7 @@ export function ScrollSpy(props: Props) {
       children.push({
         id,
         name,
+        selected,
         children: getNavigation(section)
       });
     });
@@ -70,10 +69,13 @@ export function ScrollSpy(props: Props) {
   useEffect(() => {
     setSections();
     observeSections();
-    updateNavigation();
     // TODO: Attach on dom change event
   }, []);
 
+  useEffect(() => {
+    updateNavigation();
+  }, [activeElementId]);
+
   console.log(activeElementId);
 
   return (

src/renderer/components/tree-view/tree-view.tsx

@@ -4,10 +4,12 @@ import React from "react";
 import { Icon } from "../icon";
 import TreeView from "@material-ui/lab/TreeView";
 import TreeItem from "@material-ui/lab/TreeItem";
+import { cssNames } from "../../utils";
 
 export interface NavigationTree {
   id: string;
   name: string;
+  selected?: boolean;
   children?: NavigationTree[];
 }
 
@@ -18,7 +20,7 @@ interface Props {
 export function RecursiveTreeView({ data }: Props) {
   const renderTree = (nodes: NavigationTree[]) => {
     return nodes.map(node => (
-      <TreeItem key={node.id} nodeId={node.id} label={node.name}>
+      <TreeItem key={node.id} nodeId={node.id} label={node.name} className={cssNames({"Mui-selected": node.selected})}>
         {Array.isArray(node.children) ? node.children.map((node) => renderTree([node])) : null}
       </TreeItem>
     ));