Events

src/components/add-item/add-item.css

@@ -0,0 +1,7 @@
+.add-item {
+    margin-top: 10px;
+}
+
+.add-item input {
+    margin-right: 3px;
+}

src/components/add-item/add-item.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import './add-item.css'
+
+export default class AddItem extends React.Component {
+
+    state = {
+        label: ''
+    };
+
+    onLabelChange = (e) => {
+        this.setState( {
+            label: e.target.value
+        });
+    };
+
+    onClick = (e) => {
+        //e.preventDefault();  //Чтобы страница не перезагружалась
+        this.props.onItemAdded(this.state.label);
+        this.setState({
+            label: ''
+        });
+    };
+
+
+    render() {
+        return (
+            <div className = "add-item d-flex">
+                <input type = "text"
+                        className = "form-control"
+                        onChange = {this.onLabelChange}
+                        placeholder = "What needs to be done?"
+                        value = {this.state.label} />
+                <button
+                    type="button"
+                    className = "btn btn-outline-secondary"
+                    onClick = {this.onClick}>
+                    ADD Item
+                </button>  
+            </div> 
+        );
+    };
+
+    /*render() {
+        return (
+            <form className = "add-item d-flex"
+                onSubmit = {this.onSubmit}>
+
+                <input type = "text"
+                        className = "form-control"
+                        onChange = {this.onLabelChange}
+                        placeholder = "What needs to be done?"
+                        value = {this.state.label} />
+                <button
+                    className = "btn btn-outline-secondary">
+                    ADD Item
+                </button>  
+            </form> 
+        );
+    };*/
+};

src/components/app/app.js

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import AppHeader from '../app-header/app-header';
+import SearchPanel from '../search-panel/search-panel';
+import TodoList from '../todo-list/todo-list';
+import AddItem from '../add-item/add-item';
+
+export default class App extends React.Component {
+
+  maxId =100
+
+  state = {
+    todoData: [
+      {label: "Drink Coffe", important: false, id:1},
+      {label: "Study React", important: true, id:2},
+      {label: "Study Css", important: false, id:3},
+    ]
+  };
+
+  deleteItem = (id) => {
+    this.setState (( { todoData }) => {
+      const newArray = todoData.filter((el) => el.id !== id );
+
+      /*const idx = todoData.findIndex ((el) => el.id === id );
+      const newArray = [
+        ... todoData.slice(0, idx),  //before
+        ... todoData.slice(idx +1)   //after
+      ];*/
+
+      return {
+        todoData: newArray
+      };
+    });
+  };
+
+  addItem = (text) => {
+    //console.log ('added',text)  Для проверки работы кнопки
+    const newItem = {
+      label: text, 
+      important: false, 
+      id: this.maxId++
+    };
+
+    this.setState (({ todoData }) => {
+      const newArr = [
+        ...todoData,
+        newItem
+      ];
+
+      return {
+        todoData: newArr
+      };
+    });
+  };
+
+  render () {
+    return (
+      <div>
+        <AppHeader />
+        <AddItem onItemAdded={this.addItem} />
+        <TodoList 
+          todos={this.state.todoData}
+          onDeleted={this.deleteItem} />
+      </div>
+    );
+  };
+};

src/components/todo-list-item/todo-list-item.css

@@ -0,0 +1,16 @@
+.todo-list-item-label {
+    margin-left: 1.25rem;
+    line-height: 35px;
+    cursor: pointer;
+    user-select: none;
+}
+
+
+.todo-list-item.done .todo-list-item-label {
+    text-decoration: line-through;
+}
+
+.todo-list-item.important .todo-list-item-label {
+    font-weight: bold;
+    color: rgb(124, 44, 44);
+}

src/components/todo-list-item.js → src/components/todo-list-item/todo-list-item.js

@@ -1,54 +1,69 @@
 import React from 'react';
 
-import TodoList from './todo-list';
 import './todo-list-item.css';
 
-
 //компонент -класс
 
 export default class TodoListItem extends React.Component {
 
     state = {
         done: false,
-        important: true
+        important: false
     };
 
+    //Вариант без возврата предыдущего состояния state.
+    /*onLabelClick = () => {
+        this.setState({
+            done:true
+        });*/
+    //Вариант с возвратом предыдущего состояния.
     onLabelClick = () => {
-        this.setState ({
-            done: true
+        this.setState (({done}) => {
+            return {
+                done: !done
+            };
+        });
+    };
+
+    onImportantClick = () => {
+        this.setState (({important}) => {
+            return {
+                important: !important
+            };
         });
     };
 
    render() {
-        const { label } = this.props  //используем деструктуризацию объекта
-        const { done, important } = this.state;   //используем деструктуризацию: получить значение done из state 
+        const { label, onDeleted } = this.props  //используем деструктуризацию объекта
+        const { done, important } = this.state;   //используем деструктуризацию: получить значение done и important из state 
 
         let classNames = 'todo-list-item';
-
         if (done) {
             classNames += ' done';
         };
 
         if (important) {
-            classNames += 'important';
+            classNames += ' important';
         };
 
 
         return (
             <span className = { classNames }>
                 <span
-                    className = 'important'
+                    className ='todo-list-item-label'
                     onClick={ this.onLabelClick }>
                     { label }
                 </span>
 
                 <button type ="button" 
-                        className = "btn">
+                        className = "btn"
+                        onClick={this.onImportantClick}>
                     <i className ="fa fa-exclamation" /> 
                 </button>
 
                 <button type ="button" 
-                        className = "btn">
+                        className = "btn"
+                        onClick = {onDeleted}>
                     <i className ="fa fa-trash-o" /> 
                 </button>
 

src/components/todo-list.js → src/components/todo-list/todo-list.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import TodoListItem from './todo-list-item';
+import TodoListItem from '../todo-list-item/todo-list-item';
 import './todo-list.css'
 
-const TodoList = ({ todos }) => {
+const TodoList = ({ todos, onDeleted }) => {
 
     /*const elements = todos.map((item) => {
       return (
@@ -17,8 +17,13 @@ const TodoList = ({ todos }) => {
     //Взять каждое значение из объекта item и передать его в качестве аттрибута
 
      const elements = todos.map((item) => {
+      const {id, ... itemProps } = item;
       return (
-        <li key={item.id} className = "list-group-item" ><TodoListItem { ... item }/></li>
+        <li key={id} className = "list-group-item" >
+          <TodoListItem 
+            { ... itemProps }
+            onDeleted = {() => onDeleted(id)}/>
+        </li>  
       )
     });
 

src/index.js

@@ -1,25 +1,6 @@
 import React from 'react';
 import ReactDom from 'react-dom';
 
-import AppHeader from './components/app-header';
-import SearchPanel from './components/search-panel';
-import TodoList from './components/todo-list';
-
-const App = () => {
-
-    const todoData = [
-      {label: "Drink Coffe", important: false, id:1},
-      {label: "Study React", important: true, id:2},
-      {label: "Study Css", important: false, id:3},
-    ];
-
-    return (
-      <div>
-      <AppHeader />
-      <SearchPanel />
-      <TodoList todos={todoData} />
-    </div>
-    );
-  };
+import App from './components/app/app';
 
 ReactDom.render(<App />, document.getElementById('root') )