Solution #16

NikitaUshenko · 2019-07-26T14:08:11Z

https://nikitaushenko.github.io/react_todo-app/

ValeriiKupyna · 2019-07-26T14:42:26Z

src/App.js

+
+  componentDidMount() {
+    this.setState(prevState => ({
+      visibleTodos: [...prevState.allTodos],


чому б одразу не записати в initialTodos = {
id: 1,
title: 'Hello',
completed: false,
}

і присвоїти його одразу в allTodos і visibleTodos

ValeriiKupyna · 2019-07-26T14:44:37Z

src/App.js

+        completed: false,
+      }],
+    }));
+    this.setFilter(this.state.currentFilter);


не факт що після виклику setState this.state.currentFilter буде вже оновлений раджу визвати цю функцію колбеком для setState({...}, () => this.setFilter(....)). Це буде гарантією того що стейт уже змінився

ValeriiKupyna · 2019-07-26T14:47:12Z

src/App.js

+          todo.completed = !todo.completed;
+        }
+
+        return 0;


Не можу зрозуміти. Поясни буть ласка чому тут 0?

Бо лінтер чекає повернення значення у функції, це просто заглушка

ValeriiKupyna · 2019-07-26T14:49:02Z

src/App.js

+  }
+
+  handleToggle = (id) => {
+    this.setState((prevState) => {


для чого визивати setState якщо не оновлюєш стейт?

ValeriiKupyna · 2019-07-26T14:49:45Z

src/App.js

+      prevState.allTodos.map((todo) => {
+        if (todo.id === id) {
+          // eslint-disable-next-line no-param-reassign
+          todo.completed = !todo.completed;


модифікує дані в масиві: {
...todo,
completed: !todo.completed
}

ValeriiKupyna · 2019-07-26T14:50:44Z

src/App.js

+
+  handleToggle = (id) => {
+    this.setState((prevState) => {
+      prevState.allTodos.map((todo) => {


для чого map якщо нікуди не присвоююш новий масив?

ValeriiKupyna · 2019-07-26T14:52:19Z

src/App.js

+          <span className="todo-count">
+            {this.state.allTodos.filter(todo => (
+              todo.completed === false
+            )).length}


this.state.allTodos.filter(todo => ! todo.completed).length

ValeriiKupyna · 2019-07-26T14:52:59Z

src/App.js

+          <button
+            type="button"
+            className="clear-completed"
+            style={{ display: 'block' }}


це краще зробити в css

ValeriiKupyna · 2019-07-26T14:55:41Z

src/components/NewTodo.js

+
+class NewTodo extends React.Component {
+  state = {
+    input: '',


старайся називати буз привязки до елементу а до сутності. Не буже ж ти називати input1, input2 якщо буде потрібно дописати декілька інпутів

ValeriiKupyna · 2019-07-26T14:57:00Z

src/components/TodoList.js

+function TodoList({ todos, handleToggle, handleRemove }) {
+  return (
+    <>
+      <input type="checkbox" id="toggle-all" className="toggle-all" />


для чого цей чекбокс якщо він не нисе ніякої логіки?

vkryvytskyy · 2019-07-29T16:38:48Z

src/App.js

  }

  removeTodo = (id) => {
    this.setState(prevState => ({
      allTodos: prevState.allTodos.filter(todo => id !== todo.id),
-    }));
-    this.setFilter(this.state.currentFilter);
+    }), () => this.setFilter(this.state.currentFilter));


Делай деструктуризацию this.state

vkryvytskyy · 2019-07-29T16:39:28Z

src/components/NewTodo.js

  }

  handleSubmit = (event) => {
    event.preventDefault();

-    const title = this.state.input;
+    const title = this.state.todo;


Деструктуризация this.state

vkryvytskyy · 2019-07-29T16:40:02Z

src/components/TodoItem.jsx

@@ -8,12 +8,12 @@ function TodoItem({ todo, handleToggle, handleRemove }) {
        <input
          type="checkbox"
          className="toggle"
-          id="todo-3"
+          id={`todo-${todo.id}`}


Незачем приписывать к id префикс todo-, он от этого более уникальным не становится

vkryvytskyy · 2019-07-29T16:41:39Z

src/components/TodoList.js

+        onChange={event => handleToggleAll(event)}
+        checked={todos.length === todos
+          .filter(todo => todo.completed === true)
+          .length}


checked={todos.every(todo => todo.completed)}

vkryvytskyy · 2019-07-29T16:42:05Z

Учти комментарии

nekituchia added 2 commits July 26, 2019 17:04

solution

3cdc629

solution

6816fa5

ValeriiKupyna reviewed Jul 26, 2019

View reviewed changes

Added fixes

51a70ab

vkryvytskyy approved these changes Jul 29, 2019

View reviewed changes

Fixes added 8 task implemented

0533252

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Solution #16

Solution #16

NikitaUshenko commented Jul 26, 2019

ValeriiKupyna Jul 26, 2019

ValeriiKupyna Jul 26, 2019

ValeriiKupyna Jul 26, 2019

NikitaUshenko Jul 28, 2019

ValeriiKupyna Jul 26, 2019

ValeriiKupyna Jul 26, 2019

ValeriiKupyna Jul 26, 2019

ValeriiKupyna Jul 26, 2019

ValeriiKupyna Jul 26, 2019

ValeriiKupyna Jul 26, 2019

ValeriiKupyna Jul 26, 2019

vkryvytskyy Jul 29, 2019

vkryvytskyy Jul 29, 2019

vkryvytskyy Jul 29, 2019

vkryvytskyy Jul 29, 2019

vkryvytskyy commented Jul 29, 2019

Solution #16

Are you sure you want to change the base?

Solution #16

Conversation

NikitaUshenko commented Jul 26, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vkryvytskyy commented Jul 29, 2019