Add indentation according to the type of h tag

backend/app.js

@@ -15,6 +15,7 @@ app.get('/', (req, res) => {
     })
   })
   .catch(error => {
+    console.error(error)
     res.sendStatus(502)
   })
 

backend/lib/create-toc.js

@@ -15,6 +15,7 @@ function createTOC(uri) {
         .each((_, elem) => {
           const title = elem.children[0].data;
           const headingCode = elem.attribs.id;
+          const tagNum = parseInt(elem.name.slice(-1));
 
           if (!headingCode) {
             return;
@@ -23,6 +24,7 @@ function createTOC(uri) {
           const link = `https://medium.com/p/${articleId}#${headingCode}`;
 
           results.push({
+            tagNum,
             title,
             headingCode,
             link

src/display/Display.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import TOC from "../toc/TOC";
+// import TOC from "../toc/TOC";
+import TOC from "../toc/MultiLevelTOC";
 import UrlForm from "../form/Form";
 
 const Display = ({results, handleSubmit}) => {

src/toc/MultiLevelTOC.js

@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import MultiLevelTOCItem from "./MultiLevelTOCItem";
+import "./TOC.css";
+
+class MultiLevelTOC extends Component {
+  render() {
+    const nestedList = this.formatData(this.props.results)
+    const createNestedListElement = (key, list) => {
+      return (
+        <ul key={key}>
+        {list.map((l, i) => {
+          if(Array.isArray(l)) {
+            return createNestedListElement(`${key}-${i}`, l)
+          } else {
+            return <li key={`${key}-${i}-${l.id}`}><a href={l.link}>{l.title}</a></li>;
+          }
+        })}
+        </ul>
+      )
+    }
+    return (
+      <div className="results">
+        <h4>Table of Contents</h4>
+        <ul>
+          {createNestedListElement("root", nestedList)}
+        </ul>
+      </div>
+    );
+  }
+
+  formatData(results) {
+    const rootItem = new MultiLevelTOCItem({});
+    rootItem.id = "root";
+
+    var currentId = rootItem.id
+    var currentTagNum = 1
+
+    const parentIdQueue = [rootItem.id]
+    const items = []
+
+    for(const result of results) {
+      if(currentTagNum < result.tagNum) {
+        parentIdQueue.push(currentId)
+      } else if(currentTagNum > result.tagNum) {
+        const removeTimes = currentTagNum - result.tagNum
+        for(var i = 0; i < removeTimes; i++) {
+          parentIdQueue.pop()
+        }
+      }
+
+      const parentId = parentIdQueue.slice(-1)[0]
+      const item = new MultiLevelTOCItem(result, parentId)
+      items.push(item)
+
+      currentId = item.id
+      currentTagNum = result.tagNum
+    }
+
+    return rootItem.nestedList(rootItem.id, items);
+  }
+}
+
+export default MultiLevelTOC;

src/toc/MultiLevelTOCItem.js

@@ -0,0 +1,30 @@
+class MultiLevelTOCItem {
+    constructor(result, parentId) {
+        this.id = result.headingCode;
+        this.parentId = parentId;
+        this.title = result.title
+        this.link = result.link
+    }
+
+    childrenOf(targetId, items) {
+        const children = []
+        for(const item of items) {
+            if (item.parentId === targetId) {
+                children.push(item)
+            }
+        }
+        return children
+    }
+}
+MultiLevelTOCItem.prototype.nestedList = function(id, items) {
+    const children = this.childrenOf(id, items)
+    return children.map((child) => {
+        const childItems = this.childrenOf(child.id, items)
+        if(childItems.length > 0) {
+            return this.nestedList(child.id, items)
+        }
+        return child
+    })
+}
+
+export default MultiLevelTOCItem;