React Task Result

by dzenkovich

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;
}

ul {
  padding-left: 20px;
}

ol > li {
  margin-top: 10px;
}

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

React

getBooks = function(){
	return [
    {author: 'Nikolai Gogol', title: 'Taras Bulba'},
  	{author: 'Alexander Pushkin', title: 'I Loved You'},
    {author: 'Mikhail Lermontov', title: 'The Circassians'},
    {author: 'Alexander Pushkin', title: 'Ruslan and Ludmila'},
    {author: 'Mikhail Lermontov', title: 'Arbenin'},
    {author: 'Nikolai Gogol', title: 'Dead Souls'},
    {author: 'Alexander Pushkin', title: 'Poltava'},
    {author: 'Nikolai Gogol', title: 'The Nose'},
    {author: 'Mikhail Lermontov', title: 'Azrail'},
  ]
}

class TodoApp extends React.Component {
	constructor(props){
  	super(props);
    this.state = {books: {}}
  }

	componentDidMount() {
  	this.setState({books: this.parseBooks(getBooks())})
  }
  
  parseBooks(list) {
  	return list.reduce((result, item) => {
    	if(!result[item.author]){
      	result[item.author] = [];
      }
      result[item.author].push({...item})
      return result;
    }, {})
  }
  
  render() {
  	let books = this.state.books;
  	let autors = Object.keys(books).sort();
    
    return (
      <div>
        <h2>Books by Author</h2>
        <ol>
        {autors.map(name => (
          <li key={name}>
            <label><i>{name}</i></label>
            <ul>
              {books[name].map(item => <li>{item.title}</li>)}
            </ul>
          </li>
        ))}
        </ol>
      </div>
    )
  }
}

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