-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Solution by Anna Kuvarina #15
base: master
Are you sure you want to change the base?
Changes from all commits
96e540e
967566a
31494f8
115dd6e
29ad9dd
a31da10
db275e3
eaf56cd
b62cca9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,75 +1,147 @@ | ||
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 = { | ||
visibleTodos: [], | ||
currentFilter: 'all', | ||
}; | ||
|
||
<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({ | ||
visibleTodos: getTodos, | ||
}); | ||
} | ||
|
||
addTodo = (title) => { | ||
this.setState(prevState => ({ | ||
visibleTodos: [ | ||
...prevState.visibleTodos, | ||
{ | ||
title, | ||
id: Math.ceil(Math.random() * 1000 + prevState.visibleTodos.length), | ||
completed: false, | ||
}, | ||
], | ||
})); | ||
}; | ||
|
||
handlerChangeCompleted = (id) => { | ||
this.setState(prevState => ({ | ||
visibleTodos: prevState.visibleTodos.map((todo) => { | ||
if (todo.id === id) { | ||
return { | ||
...todo, | ||
completed: !todo.completed, | ||
}; | ||
} | ||
|
||
return todo; | ||
}), | ||
})); | ||
}; | ||
|
||
handleChangeCompletedAll = () => { | ||
this.setState(prevState => { | ||
if (prevState.visibleTodos.every(todo => !todo.completed) | ||
|| prevState.visibleTodos.every(todo => todo.completed)) { | ||
return { | ||
visibleTodos: prevState.visibleTodos.map(todo => ({ | ||
...todo, | ||
completed: !todo.completed, | ||
})), | ||
}; | ||
} else { | ||
return { | ||
visibleTodos: prevState.visibleTodos.map(todo => ({ | ||
...todo, | ||
completed: true, | ||
})), | ||
}; | ||
} | ||
}); | ||
}; | ||
|
||
handleRemoveTodo = (id) => { | ||
this.setState(prevState => ({ | ||
visibleTodos: prevState.visibleTodos.filter(todo => ( | ||
todo.id !== id | ||
)), | ||
} | ||
)); | ||
}; | ||
|
||
handlerFilter = () => { | ||
const { currentFilter, visibleTodos } = this.state; | ||
|
||
switch (currentFilter) { | ||
case 'all': | ||
return visibleTodos; | ||
case 'active': | ||
return visibleTodos.filter(todo => ( | ||
!todo.completed)); | ||
case 'completed': | ||
return visibleTodos.filter(todo => ( | ||
todo.completed)); | ||
} | ||
}; | ||
|
||
<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' }} | ||
toggleCurrentFilter = (newCurrentFilter) => { | ||
this.setState({ currentFilter: newCurrentFilter }) | ||
}; | ||
|
||
handlerClearCompleted = () => { | ||
this.setState(prevState => ({ | ||
visibleTodos: prevState.visibleTodos.filter(todo => ( | ||
!todo.completed | ||
)), | ||
})); | ||
}; | ||
|
||
render() { | ||
const { visibleTodos } = this.state; | ||
|
||
return ( | ||
<section className="todoapp"> | ||
<header className="header"> | ||
<h1>todos</h1> | ||
<TodoApp addTodo={this.addTodo} /> | ||
</header> | ||
|
||
<TodoList | ||
todos={this.handlerFilter()} | ||
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.toggleCurrentFilter} | ||
/> | ||
|
||
<button | ||
type="button" | ||
className="clear-completed" | ||
style={{ display: 'block' }} | ||
onClick={this.handlerClearCompleted} | ||
> | ||
Clear completed | ||
</button> | ||
</footer> | ||
</section> | ||
); | ||
} | ||
} | ||
|
||
export default App; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import React from 'react'; | ||
|
||
class Todo extends React.Component { | ||
render() { | ||
const { todo, changeCompleted, removeTodo} = this.props; | ||
|
||
return ( | ||
<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}`} | ||
> | ||
{ todo.title } | ||
</label> | ||
<button | ||
type="button" | ||
className="destroy" | ||
onClick={() => removeTodo(todo.id)} | ||
/> | ||
</div> | ||
); | ||
} | ||
|
||
} | ||
|
||
export default Todo; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import React from 'react'; | ||
import propTypes from 'prop-types'; | ||
import classnames from 'classnames'; | ||
import './styles/todoList.css'; | ||
import Todo from './Todo'; | ||
|
||
const TodoList = ({ todos, changeCompleted, changeCompletedAll, removeTodo}) => ( | ||
<section className="main"> | ||
<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, | ||
'todo-completed': todo.completed, | ||
}); | ||
|
||
return ( | ||
<li className={classes} key={todo.id}> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. а ось це вже окремий компонент Todo |
||
<Todo | ||
todo={todo} | ||
changeCompleted={changeCompleted} | ||
removeTodo={removeTodo} | ||
/> | ||
</li> | ||
) | ||
}) | ||
} | ||
</ul> | ||
</section> | ||
); | ||
|
||
TodoList.propTypes = { | ||
todos: propTypes.arrayOf().isRequired, | ||
changeCompleted: propTypes.func, | ||
changeCompletedAll: propTypes.func, | ||
}; | ||
|
||
export default TodoList; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import React from 'react'; | ||
import propTypes from 'prop-types'; | ||
|
||
const TodosFilter = ({ handlerFilter }) => { | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. порада на майбутнє для таких речей створюєш масив цих фільтрів щось подібне:
І тоді не пишеш стільки коду при рендері, просто проходишся map по свому масиву і створєш список потрібних фільтрів, кількість коду менша, а змінити, щось буде набагато простіше, в одному місці міняєш, а міняється всюди) |
||
return ( | ||
<ul className="filters"> | ||
<li> | ||
<a href="#/" className="filters--active" onClick={() => handlerFilter('all')}> | ||
All | ||
</a> | ||
</li> | ||
|
||
<li> | ||
<a href="#/active" className="filters--active" onClick={() => handlerFilter('active')}> | ||
Active | ||
</a> | ||
</li> | ||
|
||
<li> | ||
<a href="#/completed" className="filters--active" onClick={() => handlerFilter('completed')}> | ||
Completed | ||
</a> | ||
</li> | ||
</ul> | ||
); | ||
}; | ||
|
||
TodosFilter.propTypes = { | ||
filterAll: propTypes.func, | ||
filterCompleted: propTypes.func, | ||
filterActive: propTypes.func, | ||
}; | ||
|
||
export default TodosFilter; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
по-хорошому Footer це окремий компонент