Welcome back. Congratulation on completing part 1 of the tutorial on how to create a todo app with React and NodeJS.
In part 2, we will create the react frontend and connect it to our API backend to GET, POST, UPDATE, and DELETE our todos.
Additional Packages
Before we can start coding, we have to install some additional packages to make this work.
-
Axios - allows us to send http request from out react frontend to our todo API run
npm install axiosin thetodo-frontenddirectory -
Cors - allows cross domain http request. In other words, without enabling cors on the backend, even Axios will not able to send our request to the API. run
npm install corsin thetodo-backenddirectory, and then add the snippet below to the top of yourindex.jsfile in the root oftodo-backenddirectory
const cors = require("cors")
app.use(cors())
Almost There :)
Since the frontend for this application is pretty straight forward, we are going to make changes to two files: App.js and the APIHelper.js (we will have to create)
Let's create the APIHelper.js file in the src directory of the todo-frontend .
touch APIHelper.js
Copy the following code into the APIHelper.js file
import axios from "axios"
const API_URL = "http://localhost:3000/todos/"
async function createTodo(task) {
const { data: newTodo } = await axios.post(API_URL, {
task,
})
return newTodo
}
async function deleteTodo(id) {
const message = await axios.delete(`${API_URL}${id}`)
return message
}
async function updateTodo(id, payload) {
const { data: newTodo } = await axios.put(`${API_URL}${id}`, payload)
return newTodo
}
async function getAllTodos() {
const { data: todos } = await axios.get(API_URL)
return todos
}
export default { createTodo, deleteTodo, updateTodo, getAllTodos }
Let Me Explain
We have four functions that mimic our API createTodo, deleteTodo, updateTodo, getAllTodos .
createTodo(task) - accepts a task and sends a post via axios.post to our API_URL and returns the newTodo. Note: axios stores the response of our requests in a field called data,
deleteTodo(id) - accepts an id and sends a delete request to our API.
updateTodo - accepts an id and a payload object contain fields that we want to update => payload= {completed: true} .It sends a PUT request to update the todo.
getAllTodos - fetching all the todos from our API via axios.get
And we make all these functions accessible in other files using an export function export default { createTodo, deleteTodo, updateTodo, getAllTodos };
App.js
Copy the following code into your App.js file
import React, { useState, useEffect } from "react"
import "./App.css"
import APIHelper from "./APIHelper.js"
function App() {
const [todos, setTodos] = useState([])
const [todo, setTodo] = useState("")
useEffect(() => {
const fetchTodoAndSetTodos = async () => {
const todos = await APIHelper.getAllTodos()
setTodos(todos)
}
fetchTodoAndSetTodos()
}, [])
const createTodo = async e => {
e.preventDefault()
if (!todo) {
alert("please enter something")
return
}
if (todos.some(({ task }) => task === todo)) {
alert(`Task: ${todo} already exists`)
return
}
const newTodo = await APIHelper.createTodo(todo)
setTodos([...todos, newTodo])
}
const deleteTodo = async (e, id) => {
try {
e.stopPropagation()
await APIHelper.deleteTodo(id)
setTodos(todos.filter(({ _id: i }) => id !== i))
} catch (err) {}
}
const updateTodo = async (e, id) => {
e.stopPropagation()
const payload = {
completed: !todos.find(todo => todo._id === id).completed,
}
const updatedTodo = await APIHelper.updateTodo(id, payload)
setTodos(todos.map(todo => (todo._id === id ? updatedTodo : todo)))
}
return (
<div className="App">
<div>
<input
id="todo-input"
type="text"
value={todo}
onChange={({ target }) => setTodo(target.value)}
/>
<button type="button" onClick={createTodo}>
Add
</button>
</div>
<ul>
{todos.map(({ _id, task, completed }, i) => (
<li
key={i}
onClick={e => updateTodo(e, _id)}
className={completed ? "completed" : ""}
>
{task} <span onClick={e => deleteTodo(e, _id)}>X</span>
</li>
))}
</ul>
</div>
)
}
export default App
Let Me Explain
We start by creating two states: todo and todos. States are like information about your components. todo will store the user input when creating a new todo and todos will store all of our todos.
Lets see what the component looks like on paper.
return (
<div className="App">
<div>
<input
id="todo-input"
type="text"
value={todo}
onChange={({ target }) => setTodo(target.value)}
/>
<button type="button" onClick={createTodo}>
Add
</button>
</div>
<ul>
{todos.map(({ _id, task, completed }, i) => (
<li
key={i}
onClick={e => updateTodo(e, _id)}
className={completed ? "completed" : ""}
>
{task} <span onClick={e => deleteTodo(e, _id)}>X</span>
</li>
))}
</ul>
</div>
)
To keep things simple we have a text input, a button for submitting the input, and a list.
The text input has an onChange event handler for handling user inputs. When the user clicks the Add button, the onClick event handler is triggered- createTodo() is invoked.
Creating Todo
lets look at what the createTodo function does
const createTodo = async e => {
e.preventDefault()
if (!todo) {
// check if the todo is empty
alert("please enter something")
return
}
if (todos.some(({ task }) => task === todo)) {
// check if the todo already exists
alert(`Task: ${todo} already exists`)
return
}
const newTodo = await APIHelper.createTodo(todo) // create the todo
setTodos([...todos, newTodo]) // adding the newTodo to the list
}
Overall, it validates the input, create the todo using the APIHelper.js we created, and then add it to the list of todos
Displaying the Todos
<ul>
{todos.map(({ _id, task, completed }, i) => (
<li
key={i}
onClick={e => updateTodo(e, _id)}
className={completed ? "completed" : ""}
>
{task} <span onClick={e => deleteTodo(e, _id)}>X</span>
</li>
))}
</ul>
We are mapping over the list of todos and creating a new list item with li
How do we load the todos when the page loads? React offers a useful function call useEffect which is called after the component is rendered
useEffect(() => {
const fetchTodoAndSetTodos = async () => {
const todos = await APIHelper.getAllTodos()
setTodos(todos)
}
fetchTodoAndSetTodos()
}, [])
we create an async function called fetchTodoAndSetTodos which call the APIHelper's getAllTodos function to fetch all the todos. It then sets the todos state of the component to include these todos.
Marking Todo As Completed
;(
<li
key={i}
onClick={e => updateTodo(e, _id)}
className={completed ? "completed" : ""}
>
{task} <span onClick={e => deleteTodo(e, _id)}>X</span>
</li>
)``
When the task is completed we add the class completed. you can declare this css class in a separate file. create-react-app provides an App.css file for this purpose.
.completed {
text-decoration: line-through;
color: gray;
}
Notice each todo item (<li onClick={updateTodo}>{task}</li>) has an onClick event handler. When we click an li we trigger the updateTodo function.
const updateTodo = async (e, id) => {
e.stopPropagation()
const payload = {
completed: !todos.find(todo => todo._id === id).completed,
}
const updatedTodo = await APIHelper.updateTodo(id, payload)
setTodos(todos.map(todo => (todo._id === id ? updatedTodo : todo)))
}
e is the event object on which we invoked e.stopPropagation() to prevent the click event from propagating to the parent element. Next, we find the todo in the list of todos and flip its completed status(completed = true => !completed == false) . We add this new completed status to the payload object. we then call APIHelper.updateTodo and pass in the id and payload of the todo.
The next bit of code is a little confusing. we call todos.map which maps over the array and return a new array. With each iteration we are check if the id matches. If it matches, then we return the updatedTodo which is effectively updating the todo. Otherwise, we return the original todo and leave it unchanged.
Deleting a Todo
<li
key={i}
onClick={e => updateTodo(e, _id)}
className={completed ? "completed" : ""}
>
{task} <span onClick={e => deleteTodo(e, _id)}>X</span>
</li>
Notice how we have a <span onClick={DeleteTodo(e, _id)}>X</span> next to the task. When this span is clicked, it triggers the deleteTodo function that will delete the todo.
Here is the function for deleting the todo.
const deleteTodo = async (e, id) => {
try {
e.stopPropagation()
await APIHelper.deleteTodo(id)
setTodos(todos.filter(({ _id: i }) => id !== i))
} catch (err) {}
}
we call APIHelper.deleteTodo and pass in the id of the todo we want to delete. If you refresh the page, the todo will be deleted. What if you were lazy and did not feel like refreshing the page or you didn't know better? Well, we have to remove it manually from the todos state. We remove it by calling todos.filter which will filter out the todo with the id we just deleted.
Show Time
Here is a quick demo:
This tutorial's source code can be found on github
originally posted at https://www.devsurvival.com/todo-app-react-frontend/
Top comments (0)