From e8f010401f14dc87f6c20438434cbd69f19250a2 Mon Sep 17 00:00:00 2001 From: Yuliya Date: Thu, 17 Sep 2020 09:42:52 +0300 Subject: [PATCH 1/4] Added onLabelClick and onImportantClick --- src/components/todo-list-item.css | 15 +++++++++------ src/components/todo-list-item.js | 32 +++++++++++++++++++++++-------- 2 files changed, 33 insertions(+), 14 deletions(-) diff --git a/src/components/todo-list-item.css b/src/components/todo-list-item.css index 16945f6..e91ff33 100644 --- a/src/components/todo-list-item.css +++ b/src/components/todo-list-item.css @@ -1,13 +1,16 @@ -.done { - text-decoration: line-through +.todo-list-item-label { + margin-left: 1.25rem; + line-height: 35px; + cursor: pointer; + user-select: none; } -.todo-list-item.important .todo-list-item-label { - font-weight: bold; - color: rgb(124, 44, 44); + +.todo-list-item.done .todo-list-item-label { + text-decoration: line-through; } -.important { +.todo-list-item.important .todo-list-item-label { font-weight: bold; color: rgb(124, 44, 44); } \ No newline at end of file diff --git a/src/components/todo-list-item.js b/src/components/todo-list-item.js index b5ad221..c12334b 100644 --- a/src/components/todo-list-item.js +++ b/src/components/todo-list-item.js @@ -10,40 +10,56 @@ 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 { done, important } = this.state; //используем деструктуризацию: получить значение done и important из state let classNames = 'todo-list-item'; - if (done) { classNames += ' done'; }; if (important) { - classNames += 'important'; + classNames += ' important'; }; return ( { label } From 78f2185dd264bc0026a3c793f0f0fc827e80ec87 Mon Sep 17 00:00:00 2001 From: Yuliya Date: Thu, 17 Sep 2020 12:19:21 +0300 Subject: [PATCH 2/4] Added deleteItem event --- src/components/todo-list-item.js | 5 +++-- src/components/todo-list.js | 9 ++++++-- src/index.js | 37 ++++++++++++++++++++++++++------ 3 files changed, 41 insertions(+), 10 deletions(-) diff --git a/src/components/todo-list-item.js b/src/components/todo-list-item.js index c12334b..9c62af7 100644 --- a/src/components/todo-list-item.js +++ b/src/components/todo-list-item.js @@ -36,7 +36,7 @@ export default class TodoListItem extends React.Component { }; render() { - const { label } = this.props //используем деструктуризацию объекта + const { label, onDeleted } = this.props //используем деструктуризацию объекта const { done, important } = this.state; //используем деструктуризацию: получить значение done и important из state let classNames = 'todo-list-item'; @@ -64,7 +64,8 @@ export default class TodoListItem extends React.Component { diff --git a/src/components/todo-list.js b/src/components/todo-list.js index 7b60e71..0ded45c 100644 --- a/src/components/todo-list.js +++ b/src/components/todo-list.js @@ -3,7 +3,7 @@ import React from 'react'; import TodoListItem from './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 ( -
    • +
  • + onDeleted(id)}/> +
    • ) }); diff --git a/src/index.js b/src/index.js index db0c9be..e13ff7f 100644 --- a/src/index.js +++ b/src/index.js @@ -5,21 +5,46 @@ import AppHeader from './components/app-header'; import SearchPanel from './components/search-panel'; import TodoList from './components/todo-list'; -const App = () => { +class App extends React.Component { - const todoData = [ + 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 idx = todoData.findIndex ((el) => el.id === id ); + + const newArray = [ + ... todoData.slice(0, idx), //before + ... todoData.slice(idx +1) //after + ]; + + return { + todoData: newArray + }; + }); + }; + + render () { return (
    - -
    + + ); }; + } + + + + ReactDom.render(, document.getElementById('root') ) \ No newline at end of file From 2f80f48574fd24535ca60aac4a7959cab15e507c Mon Sep 17 00:00:00 2001 From: Yuliya Date: Thu, 17 Sep 2020 15:57:08 +0300 Subject: [PATCH 3/4] Added folders for components and event for input form --- src/components/add-item/add-item.css | 7 ++ src/components/add-item/add-item.js | 42 ++++++++++++ .../{ => app-header}/app-header.css | 0 src/components/{ => app-header}/app-header.js | 0 src/components/app.js | 24 ------- src/components/{ => app}/app.css | 0 src/components/app/app.js | 66 +++++++++++++++++++ .../{ => search-panel}/search-panel.css | 0 .../{ => search-panel}/search-panel.js | 0 .../{ => todo-list-item}/todo-list-item.css | 0 .../{ => todo-list-item}/todo-list-item.js | 2 - src/components/{ => todo-list}/todo-list.css | 0 src/components/{ => todo-list}/todo-list.js | 4 +- src/index.js | 46 +------------ 14 files changed, 118 insertions(+), 73 deletions(-) create mode 100644 src/components/add-item/add-item.css create mode 100644 src/components/add-item/add-item.js rename src/components/{ => app-header}/app-header.css (100%) rename src/components/{ => app-header}/app-header.js (100%) delete mode 100644 src/components/app.js rename src/components/{ => app}/app.css (100%) create mode 100644 src/components/app/app.js rename src/components/{ => search-panel}/search-panel.css (100%) rename src/components/{ => search-panel}/search-panel.js (100%) rename src/components/{ => todo-list-item}/todo-list-item.css (100%) rename src/components/{ => todo-list-item}/todo-list-item.js (98%) rename src/components/{ => todo-list}/todo-list.css (100%) rename src/components/{ => todo-list}/todo-list.js (89%) diff --git a/src/components/add-item/add-item.css b/src/components/add-item/add-item.css new file mode 100644 index 0000000..1162240 --- /dev/null +++ b/src/components/add-item/add-item.css @@ -0,0 +1,7 @@ +.add-item { + margin-top: 10px; +} + +.add-item input { + margin-right: 3px; +} \ No newline at end of file diff --git a/src/components/add-item/add-item.js b/src/components/add-item/add-item.js new file mode 100644 index 0000000..8d125c1 --- /dev/null +++ b/src/components/add-item/add-item.js @@ -0,0 +1,42 @@ +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 + }); + }; + + onSubmit = (e) => { + e.preventDefault(); //Чтобы страница не перезагружалась + this.props.onItemAdded(this.state.label); + this.setState({ + label: '' + }); + }; + + render() { + return ( +
    + + + +
    + ); + }; +}; \ No newline at end of file diff --git a/src/components/app-header.css b/src/components/app-header/app-header.css similarity index 100% rename from src/components/app-header.css rename to src/components/app-header/app-header.css diff --git a/src/components/app-header.js b/src/components/app-header/app-header.js similarity index 100% rename from src/components/app-header.js rename to src/components/app-header/app-header.js diff --git a/src/components/app.js b/src/components/app.js deleted file mode 100644 index 0e9593c..0000000 --- a/src/components/app.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -import AppHeader from './app-header'; -import SearchPanel from './search-panel'; -import TodoList from './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 ( -
    - - - -
    - ); - }; - -export default App; \ No newline at end of file diff --git a/src/components/app.css b/src/components/app/app.css similarity index 100% rename from src/components/app.css rename to src/components/app/app.css diff --git a/src/components/app/app.js b/src/components/app/app.js new file mode 100644 index 0000000..911734b --- /dev/null +++ b/src/components/app/app.js @@ -0,0 +1,66 @@ +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 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 ( +
    + + + +
    + ); + }; +}; \ No newline at end of file diff --git a/src/components/search-panel.css b/src/components/search-panel/search-panel.css similarity index 100% rename from src/components/search-panel.css rename to src/components/search-panel/search-panel.css diff --git a/src/components/search-panel.js b/src/components/search-panel/search-panel.js similarity index 100% rename from src/components/search-panel.js rename to src/components/search-panel/search-panel.js diff --git a/src/components/todo-list-item.css b/src/components/todo-list-item/todo-list-item.css similarity index 100% rename from src/components/todo-list-item.css rename to src/components/todo-list-item/todo-list-item.css diff --git a/src/components/todo-list-item.js b/src/components/todo-list-item/todo-list-item.js similarity index 98% rename from src/components/todo-list-item.js rename to src/components/todo-list-item/todo-list-item.js index 9c62af7..89636e5 100644 --- a/src/components/todo-list-item.js +++ b/src/components/todo-list-item/todo-list-item.js @@ -1,9 +1,7 @@ import React from 'react'; -import TodoList from './todo-list'; import './todo-list-item.css'; - //компонент -класс export default class TodoListItem extends React.Component { diff --git a/src/components/todo-list.css b/src/components/todo-list/todo-list.css similarity index 100% rename from src/components/todo-list.css rename to src/components/todo-list/todo-list.css diff --git a/src/components/todo-list.js b/src/components/todo-list/todo-list.js similarity index 89% rename from src/components/todo-list.js rename to src/components/todo-list/todo-list.js index 0ded45c..6ecc9a2 100644 --- a/src/components/todo-list.js +++ b/src/components/todo-list/todo-list.js @@ -1,6 +1,6 @@ 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, onDeleted }) => { @@ -17,7 +17,7 @@ const TodoList = ({ todos, onDeleted }) => { //Взять каждое значение из объекта item и передать его в качестве аттрибута const elements = todos.map((item) => { - const {id, ... itemProps } = item; + const {id, ... itemProps } = item; return (
  • { - this.setState (( { todoData }) => { - const idx = todoData.findIndex ((el) => el.id === id ); - - const newArray = [ - ... todoData.slice(0, idx), //before - ... todoData.slice(idx +1) //after - ]; - - return { - todoData: newArray - }; - }); - }; - - render () { - return ( -
    - - - -
    - ); - }; - } - - - - +import App from './components/app/app'; ReactDom.render(, document.getElementById('root') ) \ No newline at end of file From a4920e4f8ea2d79d960d113bc21a5b8022b8cb3e Mon Sep 17 00:00:00 2001 From: Yuliya Date: Mon, 21 Sep 2020 13:43:22 +0300 Subject: [PATCH 4/4] Added corrections on PR converstions --- src/components/add-item/add-item.js | 27 +++++++++++++++++++++++---- src/components/app/app.js | 5 +++-- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/components/add-item/add-item.js b/src/components/add-item/add-item.js index 8d125c1..e222160 100644 --- a/src/components/add-item/add-item.js +++ b/src/components/add-item/add-item.js @@ -14,18 +14,37 @@ export default class AddItem extends React.Component { }); }; - onSubmit = (e) => { - e.preventDefault(); //Чтобы страница не перезагружалась + onClick = (e) => { + //e.preventDefault(); //Чтобы страница не перезагружалась this.props.onItemAdded(this.state.label); this.setState({ label: '' }); }; + render() { + return ( +
    + + +
    + ); + }; + + /*render() { return (
    + onSubmit = {this.onSubmit}>
    ); - }; + };*/ }; \ No newline at end of file diff --git a/src/components/app/app.js b/src/components/app/app.js index 911734b..a943c46 100644 --- a/src/components/app/app.js +++ b/src/components/app/app.js @@ -19,12 +19,13 @@ export default class App extends React.Component { deleteItem = (id) => { this.setState (( { todoData }) => { - const idx = todoData.findIndex ((el) => el.id === id ); + 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