Todo List X MVC with React

This is frist submit of M7

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • API
  • What I learned
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

• This project was bootstrapped with Create React App.
• Users can login to edit personal to-dos.
• Users can create, revise, and delete to-dos in the app.

Screenshot

Links

• Solution URL: https://github.com/Chious/M7-todo-list
• Live Site URL: https://chious.github.io/M7-todo-list/

My process

Built with

• Semantic HTML5 markup
• React
• React Router -- help to design multiple page
• clsx -- help to setup css quickly by className
• sweetalert -- friendly design for popup
• axios -- send http request to backend

API

Edit Todos

Name	Explain	HTTP Verb	API Request URI
getTodos	View to-do data	GET	{{API_URI}}/todos
createTodo	Create new to-do to backend	POST	{{API_URI}}/todos
patchTodo	Revise exist to-do with new data	PATCH	{{API_URI}}/todos/:id
deleteTodo	Delete exist to-do	DELETE	{{API_URI}}/todos/:id

Authorization

Name	Explain	HTTP Verb	API Request URI
Register	Register new account	POST	{{API_URI}}/api/auth/register
Login	Login to exist account	POST	{{API_URI}}/api/auth/login
Authorization	Check if user has been login	GET	{{API_URI}}/api/auth/test-token

What I learned

1. Why and how to use Router?

• Since we browser to different page, it would send a request to backend and re-render the page. Router gives a more efficiency way to upload the page.

• How to use Router?

import {BrowserRouter,Routes,Route,} from "react-router-dom";

  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
          <Route path="new" element={<NewTeamForm />} />
          <Route index element={<LeagueStandings />} />
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>

// Use <Link/> to control navigation of the page
<Link to="about">About</Link>

2. How to trigger funtion from children to mother component

For example:

// This would trigger function onToggleDone that define on mother component with data todo.id
<span
  className="icon icon-checked"
  onClick={() => {
    onToggleDone?.(todo.id);
  }}
/>

3. How to authorization access token by http request in axois (as copy from comment in stackoverflow)

const config = {
    headers: { Authorization: `Bearer ${token}` }
};

const bodyParameters = {
   key: "value"
};

Axios.post( 
  'http://localhost:8000/api/v1/get_token_payloads',
  bodyParameters,
  config
).then(console.log).catch(console.log);

The first parameter is the URL.
The second is the JSON body that will be sent along your request.
The third parameter are the headers (among other things). Which is JSON as well.

Useful resources

• How to use React Router(Youtube Video)
• useState -- help to define event and handler by React.
• react-script build conflict(Private Discord Discussion)
• JWT -- This project follow JWT Token to make sure authorization is completed from user side.

Author

• Github - Chious