|
@@ -0,0 +1,154 @@
|
|
|
+import React from "react";
|
|
|
+import ListItem from "./ListItem";
|
|
|
+import { getTodoList, createNewItem, updateItem, deleteItem } from "../static/js/api";
|
|
|
+
|
|
|
+export default class TodoList extends React.Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = { items: [], itemsCompleted: [], itemsCurrent: [], inputText: "" };
|
|
|
+
|
|
|
+ this.handleChange = this.handleChange.bind(this);
|
|
|
+ this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
|
+ this.addItem = this.addItem.bind(this);
|
|
|
+ this.deleteItem = this.deleteItem.bind(this);
|
|
|
+ this.completeItem = this.completeItem.bind(this);
|
|
|
+ }
|
|
|
+ componentDidMount() {
|
|
|
+ console.log(getTodoList());
|
|
|
+ getTodoList().then((data) => {
|
|
|
+ this.setState({
|
|
|
+ items: data,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const itemsCurrent = this.state.items.filter((el) => el.completed === false);
|
|
|
+ const itemsCompleted = this.state.items.filter((el) => el.completed === true);
|
|
|
+
|
|
|
+ const ListCurrent = ({ items }) => {
|
|
|
+ if (items.length === 0) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <ul className="todo-list">
|
|
|
+ <span className="todo-list-headline">Current</span>
|
|
|
+ {items.map((item, idx) => (
|
|
|
+ <ListItem
|
|
|
+ key={item.id}
|
|
|
+ item={item}
|
|
|
+ delete={this.deleteItem}
|
|
|
+ complete={this.completeItem}
|
|
|
+ number={idx + 1}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </ul>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const Listcompleted = ({ items }) => {
|
|
|
+ if (items.length === 0) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <ul className="todo-list complete">
|
|
|
+ <span className="todo-list-headline">Completed</span>
|
|
|
+ {items?.map((item, idx) => (
|
|
|
+ <ListItem
|
|
|
+ key={item.id}
|
|
|
+ item={item}
|
|
|
+ delete={this.deleteItem}
|
|
|
+ complete={this.completeItem}
|
|
|
+ number={idx + 1}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </ul>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="todo-wrapper">
|
|
|
+ <div className="todo-input-area">
|
|
|
+ <input
|
|
|
+ className="todo-input"
|
|
|
+ placeholder="Enter your text"
|
|
|
+ onKeyDown={this.handleKeyDown}
|
|
|
+ onChange={this.handleChange}
|
|
|
+ value={this.state.inputText}
|
|
|
+ />
|
|
|
+ <button className="todo-btn" onClick={this.addItem}>
|
|
|
+ Add
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ListCurrent items={itemsCurrent} />
|
|
|
+ <Listcompleted items={itemsCompleted} />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ addItem(e) {
|
|
|
+ const prevId = this.state.items.length > 0 ? this.state.items[this.state.items.length - 1].id : 0;
|
|
|
+ e.preventDefault();
|
|
|
+ if (this.state.inputText.trim() === "") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const newListItem = {
|
|
|
+ text: this.state.inputText,
|
|
|
+ id: prevId + 1,
|
|
|
+ completed: false,
|
|
|
+ error: false,
|
|
|
+ };
|
|
|
+
|
|
|
+ createNewItem(newListItem).then((res) => {
|
|
|
+ let status = res.status;
|
|
|
+ if (status) {
|
|
|
+ this.setState((state) => ({
|
|
|
+ items: state.items.concat(newListItem),
|
|
|
+ inputText: "",
|
|
|
+ }));
|
|
|
+ } else {
|
|
|
+ newListItem.text = res.error;
|
|
|
+ newListItem.error = true;
|
|
|
+ this.setState((state) => ({
|
|
|
+ items: state.items.concat(newListItem),
|
|
|
+ inputText: "",
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ deleteItem(id) {
|
|
|
+ createNewItem(id).then((res) => {
|
|
|
+ this.setState((state) => ({
|
|
|
+ items: state.items.filter((el) => el.id !== id),
|
|
|
+ }));
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ completeItem(id) {
|
|
|
+ this.state.items.find((el) => el.id === id).completed = true;
|
|
|
+
|
|
|
+ this.setState((state) => ({
|
|
|
+ items: state.items,
|
|
|
+ }));
|
|
|
+ }
|
|
|
+
|
|
|
+ handleKeyDown(e) {
|
|
|
+ console.log(this);
|
|
|
+ if (e.key === "Enter") {
|
|
|
+ this.addItem(e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ handleChange(e) {
|
|
|
+ this.setState({
|
|
|
+ inputText: e.target.value,
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|