(Day 42 of 100) Navigation Menu (Recursive Tree View w/ Pure JavaScript + React)

Topics covered: Recursive Tree view component

What I learned:

1. Links

• my deployed web-app: https://dyl4810.github.io/recursiveTreeviewExample/
• Repository: https://github.com/dyl4810/recursiveTreeviewExample

2. What is tree view?

Tree view is a graphical control element that presents a hierarchical view of information as illustrated below.

Tree view example

3. Level of difficulty

The logic of tree view was not definitely easy in the beginning for someone who is a newbie into the coding world. It was very difficult for me to understand and implement the recursive tree view logic and took me about a week to do so. However, this was an eyeopening exercise for getting a sense of how coding really works.

4. Why recursive tree view?

You could simply hard-code the tree view structure shown above onto html using div tags. So the question is, why did I create above using pure JavaScript + react?

• To have hands on experience on somewhat complex javascript + react logic
• I want the tree view to display or not display certain items depending on the access rights of the user who is logged in later down the road. This would be harder or inefficient to do so when the tree view is hard-coded onto front-end web page. To introduce the access rights feature in the future, I want to control the data from the back-end. (This might be over-engineering)

5. Why not for loop

For loop is not a good logic to implement on a tree view because tree view data structure is hierarchical as illustrated below. When investigating below data structure carefully you can see that each object inside the array (parent object) has children object and each of these children has its own children and so on. The problem is, you don’t know how deep the hierarchical level goes down to and there is no way to code this using for loop. The best method to code hierarchical logic is recursive because you don’t need to know how deep the hierarchical level goes down.

treeData: [{
  id: 1,
  name: "Info",
  children: [
  {
    id: 2,
    name: "Company",
    children: [
    {
      id: 3,
      name: "Test1",
      children: []
    },
    {
      id: 4,
      name: "Test2",
      children: [
       {
        id: 21,
        name: "Test1",
        children: []
       },
       {
        id: 22,
        name: "Test2",
        children: []
       }]
     }
   ]
}]

6. The core logic

If the object does not have children, it will simply return <div>name of object</div>. If the object does have children, it will return <div>name of object</div> AND it will recursively call the component passing children data through props.

7. Collapse and expand function.

The tree view example I was sampling for my code uses css to expand and collapse, making height of div to 0.

(Link: https://github.com/jirivrany/react-treeview-recursive)

On the other hand, I built the tree view only using pure JavaScript. Because the props of each <div> takes in the parentExpanded, onclick of the parent object will trigger changes on its children and re-render.

8. Character entities as icons

There are many ways to display icons on the web page. You could use:

• awesome fonts

example: 
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
and
<i class="fas fa-igloo"></i>

• images
• character entities.

example:
let arrow = () =>{
  if(this.state.expanded){
    return(<b style = {arrowStyle} onClick = {this.onClick.bind(this)}>&#9662;</b>)
  }
  else{
    return(<b style = {arrowStyle} onClick ={this.onClick.bind(this)}>&#9656;</b>
  }
}

For simple icons such as arrows as I implemented on this app, I believe character entities are the quickest and easiest as it doesn’t require importing anything and is lighter load on the web page. Use this helpful cheat sheet list of character entities: https://dev.w3.org/html5/html-author/charref

Current technology stack in mind: React+Redux+Flexbox+GraphQL+Python+Django+PostgreSQL

Total time spent on the challenge: 40 hours

Actual Time focused on the challenge: 25 hours

What I did:

1. Downloaded tree view example from GitHub and tried to understand the logic
2. Watched youtube videos and read online articles related to tree view.

Plan for next day:

1. Work on multi-select component for the ERP app.