<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>
var todos = [
{ "id": 1, "isActive": true, title: "title1"},
{ "id": 2, "isActive": true, title: "title2"},
{ "id": 3, "isActive": true, title: "title3"},
{ "id": 4, "isActive": true, title: "title4"},
]
// modal window comfirm delete item
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {getTodos} from '../utils/fetchUtils';
class ToDoC extends Component {
constructor() {
super();
this.state = {
todos: []
}
this.toggleActive = this.toggleActive.bind(this);
this.deleteItem = this.deleteItem.bind(this);
this.editItem = this.editItem.bind(this);
}
componentDidMount() {
getTodos().then(todos => this.setState({ todos }))
}
toggleActive(id, active) {
const todos = this.state.todos;
const arrId = todos.findIndex(todo => todo.id == id);
todos[arrId].isActive = active;
this.setState({ todos });
}
deleteItem(id) {
this.setState({
todos: this.state.todos.filter(todo => todo.id != id)
})
}
editItem(id, title) {
const todos = this.state.todos;
const arrId = todos.findIndex(todo => todo.id == id);
todos[arrId].title = title;
this.setState({ todos })
}
render() {
const todos = this.state.todos;
return (
<div className="c-todo">
{todos.map(todo => <TodoItem
key="todo"+{todo.id}
{...todo}
toggleActive={this.toggleActive}
editItem={this.editItem}
deleteItem={this.deleteItem}/>)}
</div>
)
}
}
class TodoItem extends Component {
constructor() {
super();
this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
}
handleCheckboxChange(e) {
this.props.toggleActive(this.props.id, e.target.value);
}
render() {
return (
<div className="c-todo__item">
<input
type="checkbox"
className="todo-active"
onChange={this.handleCheckboxChange} />
<div
className="item__title">{this.props.title}</div>
<TodoEditForm
id={this.props.id}
deleteItem={this.props.deleteItem}
editItem={this.props.editItem} />
</div>
)
}
}
TodoItem.PropTypes = {
id: PropTypes.number.isRequired,
toggleActive: PropTypes.func.isRequired,
editItem: PropTypes.func.isRequired,
deleteItem: PropTypes.func.isRequired
}
class TodoEditForm extends Component {
constructor() {
super();
this.state = {
inputValue: "",
isEditing: false
}
this.handleClick = this.handleClick.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
handleClick() {
if (this.state.isEditing) {
this.props.editItem(this.props.id);
}
this.setState({isEditing: !isEditing});
}
handleInputChange(e) {
this.setState({ inputValue: e.target.value })
}
render(){
const inputStyle = {
display: {this.state.isEditing ? 'inline-block' : 'none'}
}
return (
<div className="todo-edit__form">
<input
type="text"
value={this.state.inputValue}
onChange={this.handleInputChange}
className={inputStyle} />
<button
type="button"
className="todo-edit-btn"
handleClick={this.handleClick}>{this.state.isEditing ? "ok" : "E"}</button>
<TodoRemove
id={this.props.id}
deleteItem={this.props.deleteItem} />
</div>
)
}
}
TodoEditForm.PropTypes = {
id: PropTypes.number.isRequired,
deleteItem: PropTypes.func,
editItem: PropTypes.func
}
class TodoRemove extends Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
confirm("Are you sure?", this.props.deleteItem(this.props.id))
}
render() {
return {
<button
type="button"
className="btn remove-btn"
onClick={this.handleClick}>x</button>
}
}
}
TodoRemove.PropTypes = {
id: PropTypes.number.isRequired,
deleteItem: PropTypes.func.isRequired
}
export default ToDoC;
