React

by evgkch

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

const folders = [
	{ id: 0, parentID: null },
  { id: 1, parentID: 0 },
  { id: 2, parentID: 0 },
  { id: 3, parentID: 2 },
  { id: 4, parentID: 2 },
];

const files = [
  { id: 1, parentID: 3 },
  { id: 2, parentID: 3 },
  { id: 3, parentID: 4 },
  { id: 4, parentID: 4 },
];

const tree = {};
folders.forEach(folder=>{
  tree[folder.id] = folder;
});

class Node {
	constructor(id){
  	this.id = id;
    this.children = [];
  }
  appendChild(child){
  	this.children.push(child);
  }
}

class MultiMap {
	constructor(){
  
  }
}

let root = {};

function addPath(id, tree){
	let path = [];
	function _addPath(id, tree){
  	const parentID = tree[id].parentID;    
    if (parentID != null)
    {
    	_addPath(parentID, tree);
    	path.push(parentID);
    }
  }
  _addPath(id, tree);
  root.set(path, id)
  return path;
}


for (let folderID in tree)
{
	tree[folderID].path = addPath(folderID, tree);
  
}

console.dir(tree)

class Folder extends React.Component {
	render(){
  	return (
      <ul id={this.props.id}>
        {this.props.id}
        {this.props.children}
      </ul>
    );
  }
}

class File extends React.Component {
	render(){
  	return (
      <li id={this.props.id}>
        {this.props.id}
      </li>
    );
  }
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props); 
    
  }
  
  render() {
    return (
      <div>
        {null}
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))