solution

README.md

@@ -1,5 +1,5 @@
 # React ToDo App
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_todo-app/)
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://alenaloik.github.io/react_todo-app/)
 - Follow the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline)
 
 ## Description

src/App.js

@@ -1,85 +1,144 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { TodoList } from './components/TodoList/TodoList';
+import NewTodo from './components/NewTodo/NewTodo';
+import { TodosFilter } from './components/TodosFilter/TodosFilter';
 
-function App() {
-  return (
-    <section className="todoapp">
-      <header className="header">
-        <h1>todos</h1>
+class App extends Component {
+  state = {
+    todos: [],
+    showParam: 'all',
+  };
 
-        <input
-          className="new-todo"
-          placeholder="What needs to be done?"
-        />
-      </header>
+  addTodo = (todo) => {
+    this.setState(prevState => ({
+      todos: [...prevState.todos, todo],
+    }));
+  }
 
-      <section className="main">
-        <input type="checkbox" id="toggle-all" className="toggle-all" />
-        <label htmlFor="toggle-all">Mark all as complete</label>
+  updateTodosToShow = (todoToShow) => {
+    this.setState({ showParam: todoToShow });
+  }
 
-        <ul className="todo-list">
-          <li>
-            <div className="view">
-              <input type="checkbox" className="toggle" id="todo-1" />
-              <label htmlFor="todo-1">asdfghj</label>
-              <button type="button" className="destroy" />
-            </div>
-            <input type="text" className="edit" />
-          </li>
+  handleRemuve = (id) => {
+    this.setState(prevState => ({
+      todos: prevState.todos.filter(todo => (
+        todo.id !== id
+      )),
+    }));
+  }
 
-          <li className="completed">
-            <div className="view">
-              <input type="checkbox" className="toggle" id="todo-2" />
-              <label htmlFor="todo-2">qwertyuio</label>
-              <button type="button" className="destroy" />
-            </div>
-            <input type="text" className="edit" />
-          </li>
+  handleRemuveCompleted = () => {
+    this.setState(prevState => ({
+      todos: prevState.todos.filter(todo => (
+        !todo.completed
+      )),
+    }));
+  }
 
-          <li className="editing">
-            <div className="view">
-              <input type="checkbox" className="toggle" id="todo-3" />
-              <label htmlFor="todo-3">zxcvbnm</label>
-              <button type="button" className="destroy" />
-            </div>
-            <input type="text" className="edit" />
-          </li>
+  toggleComplete = (id) => {
+    this.setState(prevState => ({
+      todos: prevState.todos.map((todo) => {
+        if (todo.id === id) {
+          return {
+            ...todo,
+            completed: !todo.completed,
+          };
+        }
 
-          <li>
-            <div className="view">
-              <input type="checkbox" className="toggle" id="todo-4" />
-              <label htmlFor="todo-4">1234567890</label>
-              <button type="button" className="destroy" />
-            </div>
-            <input type="text" className="edit" />
-          </li>
-        </ul>
-      </section>
+        return todo;
+      }),
+    }));
+  }
 
-      <footer className="footer">
-        <span className="todo-count">
-          3 items left
-        </span>
+  toggleCompleteAll = () => {
+    if (this.state.todos.every(todo => (todo.completed))) {
+      this.setState(prevState => ({
+        todos: prevState.todos.map(todo => ({
+          ...todo,
+          completed: false,
+        })),
+      }));
+    } else {
+      this.setState(prevState => ({
+        todos: prevState.todos.map(todo => ({
+          ...todo,
+          completed: true,
+        })),
+      }));
+    }
+  }
 
-        <ul className="filters">
-          <li>
-            <a href="#/" className="selected">All</a>
-          </li>
+  render() {
+    let todoView = [];
+    const itemLeft = this.state.todos.filter(todo => (
+      !todo.completed)).length;
 
-          <li>
-            <a href="#/active">Active</a>
-          </li>
+    switch (this.state.showParam) {
+      case 'active':
+        todoView = [...this.state.todos].filter(todo => (
+          !todo.completed
+        ));
+        break;
+      case 'completed':
+        todoView = [...this.state.todos].filter(todo => (
+          todo.completed
+        ));
+        break;
+      default:
+        todoView = [...this.state.todos];
+    }
 
-          <li>
-            <a href="#/completed">Completed</a>
-          </li>
-        </ul>
+    return (
+      <section className="todoapp">
+        <header className="header">
+          <h1>todos</h1>
+          <NewTodo addTodo={this.addTodo} />
+        </header>
+        {(this.state.todos.length)
+          ? (
+            <>
+              <section className="main">
+                <input
+                  onClick={this.toggleCompleteAll}
+                  checked={!itemLeft}
+                  type="checkbox"
+                  id="toggle-all"
+                  className="toggle-all"
+                />
+                <label htmlFor="toggle-all">Mark all as complete</label>
+                <TodoList
+                  todos={todoView}
+                  remuve={this.handleRemuve}
+                  toggleComplete={this.toggleComplete}
+                />
+              </section>
 
-        <button type="button" className="clear-completed">
-          Clear completed
-        </button>
-      </footer>
-    </section>
-  );
+              <footer className="footer">
+                <span className="todo-count">
+                  {itemLeft}
+                  item left
+                </span>
+                <TodosFilter updateTodosToShow={this.updateTodosToShow} />
+                {
+                  (this.state.todos.filter(todo => (
+                    todo.completed)).length)
+                    ? (
+                      <button
+                        onClick={this.handleRemuveCompleted}
+                        type="button"
+                        className="clear-completed"
+                      >
+                        Clear completed
+                      </button>
+                    )
+                    : ('')
+                }
+              </footer>
+            </>
+          ) : ''}
+      </section>
+    );
+  }
 }
 
 export default App;

src/components/NewTodo/NewTodo.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import './NewTodo.css';
+import PropTypes from 'prop-types';
+
+class NewTodo extends Component {
+  state = {
+    content: '',
+    id: 1,
+    completed: false,
+  }
+
+  handleChange = (event) => {
+    this.setState({
+      content: event.target.value.trim(),
+    });
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (this.state.content) {
+      this.props.addTodo(this.state);
+
+      this.setState(prevState => ({
+        content: '',
+        id: prevState.id + 1,
+      }));
+    }
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <input
+          onChange={this.handleChange}
+          value={this.state.content}
+          className="new-todo"
+          placeholder="What needs to be done?"
+        />
+      </form>
+    );
+  }
+}
+
+export default NewTodo;
+
+NewTodo.propTypes = {
+  addTodo: PropTypes.func.isRequired,
+};

src/components/TodoList/TodoList.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const TodoList = ({ todos, remuve, toggleComplete }) => (
+  <ul className="todo-list">
+    {todos.map(todo => (
+      <li key={todo.id}>
+        <div className={todo.completed ? 'completed' : 'view'}>
+          <input
+            checked={todo.completed}
+            onClick={() => {
+              toggleComplete(todo.id);
+            }}
+            type="checkbox"
+            className="toggle"
+            id={`todo-${todo.id}`}
+          />
+          <label htmlFor={`todo-${todo.id}`}>{todo.content}</label>
+          <button
+            onClick={() => {
+              remuve(todo.id);
+            }}
+            type="button"
+            className="destroy"
+          />
+        </div>
+        <input type="text" className="edit" />
+      </li>
+    ))}
+  </ul>
+);
+
+TodoList.propTypes = {
+  todos: PropTypes.arrayOf(
+    PropTypes.shape({
+      content: PropTypes.string.isRequired,
+      id: PropTypes.number.isRequired,
+      completed: PropTypes.bool.isRequired,
+    }),
+  ).isRequired,
+  remuve: PropTypes.func.isRequired,
+  toggleComplete: PropTypes.func.isRequired,
+};

src/components/TodosFilter/TodosFilter.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import './TodosFilter.css';
+import PropTypes from 'prop-types';
+
+export const TodosFilter = ({ updateTodosToShow }) => (
+  <ul className="filters">
+    <li>
+      <a
+        href="#/"
+        onClick={() => (updateTodosToShow('all'))}
+      >
+        All
+      </a>
+    </li>
+    <li>
+      <a
+        href="#/active"
+        onClick={() => (updateTodosToShow('active'))}
+      >
+        Active
+      </a>
+    </li>
+    <li>
+      <a
+        href="#/completed"
+        onClick={() => (updateTodosToShow('completed'))}
+      >
+        Completed
+      </a>
+    </li>
+  </ul>
+);
+
+TodosFilter.propTypes = {
+  updateTodosToShow: PropTypes.func.isRequired,
+};

src/index.css

@@ -217,7 +217,7 @@ body {
   transition: color 0.4s;
 }
 
-.todo-list li.completed label {
+.todo-list li .completed label {
   color: #d9d9d9;
   text-decoration: line-through;
 }

src/index.js

@@ -6,5 +6,5 @@ import App from './App';
 
 ReactDOM.render(
   <App />,
-  document.getElementById('root')
+  document.getElementById('root'),
 );