Signed-off-by: Joseph Angelo Ferrer Barrozo <jabarrozo@gmail.com>pull/418/head
parent
da7f38c3e8
commit
06051db7b9
@ -1,55 +1,47 @@ |
|||||||
import React from "react"; |
import React, { useState, useEffect } from "react"; |
||||||
import axios from "axios"; |
|
||||||
import "./App.scss"; |
import "./App.scss"; |
||||||
import AddTodo from "./components/AddTodo"; |
import AddTodo from "./components/AddTodo"; |
||||||
import TodoList from "./components/TodoList"; |
import TodoList from "./components/TodoList"; |
||||||
|
|
||||||
export default class App extends React.Component { |
const MainApp = () => { |
||||||
constructor(props) { |
const [todos, setTodos] = useState([]); |
||||||
super(props); |
|
||||||
|
|
||||||
this.state = { |
async function getTodos() { |
||||||
todos: [], |
try { |
||||||
}; |
const todoListResponse = await fetch("/api", { |
||||||
} |
method: "GET", |
||||||
|
}); |
||||||
|
|
||||||
componentDidMount() { |
if (!todoListResponse.ok) { |
||||||
axios |
console.log("Fetch failed"); |
||||||
.get("/api") |
} else { |
||||||
.then((response) => { |
const updatedTodos = await todoListResponse.json(); |
||||||
this.setState({ |
setTodos([...updatedTodos.data]); |
||||||
todos: response.data.data, |
} |
||||||
}); |
} catch (error) { |
||||||
}) |
console.log("Error :", error); |
||||||
.catch((e) => console.log("Error : ", e)); |
} |
||||||
} |
} |
||||||
|
|
||||||
handleAddTodo = (value) => { |
useEffect(() => { |
||||||
axios |
getTodos(); |
||||||
.post("/api/todos", { text: value }) |
}, []); |
||||||
.then(() => { |
|
||||||
this.setState({ |
|
||||||
todos: [...this.state.todos, { text: value }], |
|
||||||
}); |
|
||||||
}) |
|
||||||
.catch((e) => console.log("Error : ", e)); |
|
||||||
}; |
|
||||||
|
|
||||||
render() { |
return ( |
||||||
return ( |
<div className="App container"> |
||||||
<div className="App container"> |
<div className="container-fluid"> |
||||||
<div className="container-fluid"> |
<div className="row"> |
||||||
<div className="row"> |
<div className="col-xs-12 col-sm-8 col-md-8 offset-md-2"> |
||||||
<div className="col-xs-12 col-sm-8 col-md-8 offset-md-2"> |
<h1>Todos</h1> |
||||||
<h1>Todos</h1> |
<div className="todo-app"> |
||||||
<div className="todo-app"> |
<AddTodo todos={todos} setTodos={setTodos} /> |
||||||
<AddTodo handleAddTodo={this.handleAddTodo} /> |
<TodoList todos={todos} /> |
||||||
<TodoList todos={this.state.todos} /> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
); |
</div> |
||||||
} |
); |
||||||
} |
}; |
||||||
|
|
||||||
|
export default MainApp; |
||||||
|
@ -1,33 +1,52 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
|
|
||||||
export default class AddTodo extends React.Component { |
const AddTodo = (props) => { |
||||||
handleSubmit = (e) => { |
const { todos, setTodos } = props; |
||||||
|
|
||||||
|
async function handleSubmit(e) { |
||||||
e.preventDefault(); |
e.preventDefault(); |
||||||
const { value } = e.target.elements.value; |
const { value } = e.target.elements.value; |
||||||
if (value.length > 0) { |
if (value.length > 0) { |
||||||
this.props.handleAddTodo(value); |
try { |
||||||
e.target.reset(); |
const newTodoResponse = await fetch("/api/todos", { |
||||||
} |
method: "POST", |
||||||
}; |
headers: { |
||||||
|
"Content-Type": "application/json", |
||||||
|
}, |
||||||
|
body: JSON.stringify({ text: value }), |
||||||
|
}); |
||||||
|
|
||||||
render() { |
if (!newTodoResponse.ok) { |
||||||
return ( |
console.log("Fetch failed"); |
||||||
<form |
} else { |
||||||
noValidate |
const newTodo = await newTodoResponse.json(); |
||||||
onSubmit={this.handleSubmit} |
setTodos([...todos, newTodo.data]); |
||||||
className="new-todo form-group" |
e.target.reset(); |
||||||
> |
} |
||||||
<input |
} catch (error) { |
||||||
type="text" |
console.log("Error :", error); |
||||||
name="value" |
} |
||||||
required |
} |
||||||
minLength={1} |
|
||||||
className="form-control" |
|
||||||
/> |
|
||||||
<button className="btn btn-primary" type="submit"> |
|
||||||
Add Todo |
|
||||||
</button> |
|
||||||
</form> |
|
||||||
); |
|
||||||
} |
} |
||||||
} |
|
||||||
|
return ( |
||||||
|
<form |
||||||
|
noValidate |
||||||
|
onSubmit={(e) => handleSubmit(e)} |
||||||
|
className="new-todo form-group" |
||||||
|
> |
||||||
|
<input |
||||||
|
type="text" |
||||||
|
name="value" |
||||||
|
required |
||||||
|
minLength={1} |
||||||
|
className="form-control" |
||||||
|
/> |
||||||
|
<button className="btn btn-primary" type="submit"> |
||||||
|
Add Todo |
||||||
|
</button> |
||||||
|
</form> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AddTodo; |
||||||
|
@ -1,49 +1,31 @@ |
|||||||
import React from "react"; |
import React, { useState } from "react"; |
||||||
|
|
||||||
export default class TodoList extends React.Component { |
const TodoList = (props) => { |
||||||
constructor(props) { |
const { todos } = props; |
||||||
super(props); |
const [activeIndex, setActiveIndex] = useState(0); |
||||||
|
|
||||||
this.state = { |
return todos.length > 0 ? ( |
||||||
activeIndex: 0, |
<ul className="list-group"> |
||||||
}; |
{todos.map((todo, index) => ( |
||||||
} |
<li |
||||||
|
className={ |
||||||
|
"list-group-item cursor-pointer " + |
||||||
|
(index === activeIndex ? "active" : "") |
||||||
|
} |
||||||
|
key={todo._id} // todos queried from the database have an _id value that is better used here than index
|
||||||
|
onClick={() => { |
||||||
|
setActiveIndex(index); |
||||||
|
}} |
||||||
|
> |
||||||
|
{todo.text} |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
) : ( |
||||||
|
<div className="alert alert-primary" role="alert"> |
||||||
|
No Todos to display |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
handleActive(index) { |
export default TodoList; |
||||||
this.setState({ |
|
||||||
activeIndex: index, |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
renderTodos(todos) { |
|
||||||
return ( |
|
||||||
<ul className="list-group"> |
|
||||||
{todos.map((todo, i) => ( |
|
||||||
<li |
|
||||||
className={ |
|
||||||
"list-group-item cursor-pointer " + |
|
||||||
(i === this.state.activeIndex ? "active" : "") |
|
||||||
} |
|
||||||
key={i} |
|
||||||
onClick={() => { |
|
||||||
this.handleActive(i); |
|
||||||
}} |
|
||||||
> |
|
||||||
{todo.text} |
|
||||||
</li> |
|
||||||
))} |
|
||||||
</ul> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
render() { |
|
||||||
let { todos } = this.props; |
|
||||||
return todos.length > 0 ? ( |
|
||||||
this.renderTodos(todos) |
|
||||||
) : ( |
|
||||||
<div className="alert alert-primary" role="alert"> |
|
||||||
No Todos to display |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
||||||
|
Loading…
Reference in new issue