Solution by Anna Kuvarina

package.json

@@ -7,6 +7,7 @@
   "author": "Mate Academy",
   "license": "GPL-3.0",
   "dependencies": {
+    "classnames": "^2.2.6",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/App.js

@@ -1,75 +1,176 @@
 import React from 'react';
+import getTodos from './api/todos';
+import TodoApp from './TodoApp';
+import TodoList from './TodoList';
+import TodosFilter from './TodosFilter';
 
-function App() {
-  return (
-    <section className="todoapp">
-      <header className="header">
-        <h1>todos</h1>
+class App extends React.Component {
+  state = {
+    todos: [],
+    visibleTodos: [],
+  };
 
-        <input
-          className="new-todo"
-          placeholder="What needs to be done?"
-        />
-      </header>
-
-      <section className="main" style={{ display: 'block' }}>
-        <input type="checkbox" id="toggle-all" className="toggle-all" />
-        <label htmlFor="toggle-all">Mark all as complete</label>
-
-        <ul className="todo-list">
-          <li className="">
-            <div className="view">
-              <input type="checkbox" className="toggle" id="todo-1" />
-              <label htmlFor="todo-1">sdfsdfsdf</label>
-              <button type="button" className="destroy" />
-            </div>
-          </li>
-
-          <li className="">
-            <div className="view">
-              <input type="checkbox" className="toggle" id="todo-2" />
-              <label htmlFor="todo-2">sakgjdfgkhjasgdhjfhs</label>
-              <button type="button" className="destroy" />
-            </div>
-          </li>
-
-          <li className="">
-            <div className="view">
-              <input type="checkbox" className="toggle" id="todo-3" />
-              <label htmlFor="todo-3">sddfgdfgdf</label>
-              <button type="button" className="destroy" />
-            </div>
-          </li>
-        </ul>
-      </section>
+  componentDidMount() {
+    this.setState({
+      todos: getTodos,
+      visibleTodos: getTodos,
+    });
+  }
+
+  addTodo = (title) => {
+    this.setState(prevState => {
+      const newTodos = [
+        ...prevState.todos,
+        {
+          title,
+          id: prevState.todos.length + 1,
+          completed: false,
+        },
+      ];
+
+      return {
+        visibleTodos: newTodos,
+        todos: newTodos,
+      }
+    });
+  };
+
+  handlerChangeCompleted = (id) => {
+    this.setState(prevState => {
+      const newTodos = prevState.todos.map((todo) => {
+        if (todo.id === id) {
+          return {
+            ...todo,
+            completed: !todo.completed,
+          };
+        }
+
+        return todo;
+      });
+
+      return {
+        visibleTodos: newTodos,
+        todos: newTodos,
+      }
+    });
+  };
+
+  handleChangeCompletedAll = () => {
+    this.setState(prevState => {
+      if (prevState.visibleTodos.every(todo => todo.completed === false)
+        || prevState.visibleTodos.every(todo => todo.completed === true)) {
+        const changeAllTodos = prevState.visibleTodos.map(todo => ({
+          ...todo,
+          completed: !todo.completed,
+        }));
+
+        return {
+          visibleTodos: changeAllTodos,
+          todos: changeAllTodos,
+        };
+      } else {
+        const changeSomeTodos =  prevState.visibleTodos.map(todo => ({
+          ...todo,
+          completed: true,
+        }));
+
+        return {
+          visibleTodos: changeSomeTodos,
+          todos: changeSomeTodos,
+        };
+      }
 
-      <footer className="footer" style={{ display: 'block' }}>
-        <span className="todo-count">
-          3 items left
-        </span>
-
-        <ul className="filters">
-          <li>
-            <a href="#/" className="selected">All</a>
-          </li>
-
-          <li>
-            <a href="#/active">Active</a>
-          </li>
-
-          <li>
-            <a href="#/completed">Completed</a>
-          </li>
-        </ul>
-
-        <button
-          type="button"
-          className="clear-completed"
-          style={{ display: 'block' }}
+    });
+  };
+
+  handleRemoveTodo = (id) => {
+    this.setState(prevState => {
+      const newTodos = prevState.visibleTodos.filter(todo => (
+        todo.id !== id
+      ));
+      return {
+        visibleTodos: newTodos,
+        todos: newTodos,
+      }
+    });
+  };
+
+  handlerFilter = (filterField) => {
+    this.setState(state => {
+      switch (filterField) {
+        case 'all':
+          return {
+            visibleTodos: state.todos,
+          };
+        case  'active':
+          return {
+            visibleTodos: state.todos.filter(todo => (
+              todo.completed === false
+            )),
+          };
+        case  'completed':
+          return {
+            visibleTodos: state.todos.filter(todo => (
+              todo.completed === true
+            )),
+          };
+      }
+    });
+  };
+
+  handlerClearCompleted = () => {
+    this.setState(prevState => {
+      const newTodos = prevState.visibleTodos.filter(todo => (
+        todo.completed === false
+      ));
+      return {
+        visibleTodos: newTodos,
+        todos: newTodos,
+      }
+    });
+  };
+
+  render() {
+    const { visibleTodos } = this.state;
+
+    return (
+      <section className="todoapp">
+        <header className="header">
+          <h1>todos</h1>
+          <TodoApp addTodo={this.addTodo} />
+        </header>
+
+        <TodoList
+          todos={visibleTodos}
+          changeCompleted={this.handlerChangeCompleted}
+          changeCompletedAll={this.handleChangeCompletedAll}
+          removeTodo={this.handleRemoveTodo}
         />
-      </footer>
-    </section>
-  );
+
+        <footer className="footer" style={{ display: 'block' }}>
+          <span className="todo-count">
+            {`${visibleTodos
+              .filter(todo => !todo.completed)
+              .length} items left`
+            }
+          </span>
+
+          <TodosFilter
+            handlerFilter={this.handlerFilter}
+          />
+
+          <button
+            type="button"
+            className="clear-completed"
+            style={{ display: 'block' }}
+            onClick={this.handlerClearCompleted}
+          >
+            Clear completed
+          </button>
+        </footer>
+      </section>
+    );
+  }
 }
 
 export default App;

src/TodoApp.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import propTypes from 'prop-types';
+
+class TodoApp extends React.Component {
+  state = {
+    title: '',
+  };
+
+  onChangeInput = (event) => {
+    const { value } = event.target;
+
+    this.setState({ title: value });
+  };
+
+  onCLickEnter = (event) => {
+    const { title } = this.state;
+    if (event.keyCode === 13) {
+      event.preventDefault();
+
+      if (!title || title === ' ') {
+        return;
+      }
+
+      this.props.addTodo(title);
+      this.setState({ title: '' });
+    }
+  };
+
+  render() {
+    const { title } = this.state;
+
+    return (
+      <input
+        type="text"
+        name="title"
+        onChange={this.onChangeInput}
+        className="new-todo"
+        value={title}
+        placeholder="What needs to be done?"
+        onKeyUp={this.onCLickEnter}
+      />
+    );
+  }
+}
+
+TodoApp.propTypes = {
+  addTodo: propTypes.func.isRequired,
+};
+
+export default TodoApp;

src/TodoList.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import classnames from 'classnames';
+import './styles/todoList.css';
+
+const TodoList = ({ todos, changeCompleted, changeCompletedAll, removeTodo}) => (
+  <section className="main" style={{ display: 'block' }}>
+    <input
+      type="checkbox"
+      id="toggle-all"
+      className="toggle-all"
+      onChange={() => changeCompletedAll()}
+    />
+    <label
+      htmlFor="toggle-all"
+    >
+      Mark all as complete
+    </label>
+
+    <ul className="todo-list">
+      {
+        todos.map(todo => {
+          const classes = classnames ({
+              'todo-active': todo.completed === false,
+              'todo-completed': todo.completed === true,
+          });
+
+          return (
+            <li className={classes} key={todo.id}>
+              <div className="view">
+                <input
+                  type="checkbox"
+                  name="completed"
+                  className="toggle"
+                  id={`todo-${todo.id}`}
+                  checked={todo.completed}
+                  onChange={() => changeCompleted(todo.id)}
+                />
+                <label
+                  htmlFor={`todo-${todo.id}`}
+                  className={classes}
+                >
+                  { todo.title }
+                </label>
+                <button
+                  type="button"
+                  className="destroy"
+                  onClick={() => removeTodo(todo.id)}
+                />
+              </div>
+            </li>
+          )
+        })
+      }
+    </ul>
+  </section>
+);
+
+TodoList.propTypes = {
+  todos: propTypes.arrayOf().isRequired,
+  changeCompleted: propTypes.func,
+  changeCompletedAll: propTypes.func,
+};
+
+export default TodoList;