Skip to content

Latest commit

 

History

History
60 lines (35 loc) · 2.98 KB

wave-04.md

File metadata and controls

60 lines (35 loc) · 2.98 KB
Raw

Wave 04: useEffect And Axios

Learn Topics: useEffect and Calling APIs required for this wave

In Wave 04 we will add the axios library to our project. We will use this library to make a request to our API to get the list of tasks. For this wave you should make sure that that you are on the main branch.

When the user deletes or updates a task we will make calls to the API to update the list of tasks.

Make Axios requests in App.jsx

Create or refactor the following features to connect the Task List Front End to the Task List Back End (Task List API)

  • In the App, use the useEffect hook to make an API call to get the list of tasks from the database when the React app is loaded.
  • Update the toggleCompleteTask callback function (the function that toggles the state of completion; you may have named it something different) in the App such that marking a task complete or incomplete in the front end makes a change to the state of the task in the database.
  • Update the deleteTask callback function (the function that deletes a task; you may have named it something different) in the App such that deleting a task in the front end deletes the task from the database.

API Endpoints:

The source code for this Task List API is available on the task-list-front-end branch

Detailed specifications for the Task List API can be reviewed in the Task List API README

You may also use your deployed version of Task List API. If you are using your own Task List API, you will need to update it to handle CORS (see below).

We can see a summary of the API endpoints that we will work with for the front end features below:

Verb Path Body of Request What it does
GET /tasks None Retrieves a list of tasks
PATCH /tasks/<task_id>/mark_complete None Marks a task complete
PATCH /tasks/<task_id>/mark_incomplete None Marks a task incomplete
POST /tasks { title: titleText, description: '' }
optional key: completed_at: (date or null)		 Creates a new Task
DELETE /tasks/<task_id> None Deletes a task

Cross-Origin Resource Sharing (CORS)

The deployed Task List API uses the package flask-cors to handle Cross Origin Resource Sharing.

The __init__.py file uses the flask-cors package as viewed here

If you would like to use your Task List API with this project, you will need to make the changes for flask-cors in the example below and re-deploy your Task List backend with the updates.

# __init__.py

from flask_cors import CORS
  
...
  
def create_app(test_config=None):
    app = Flask(__name__)
    CORS(app)
    app.config['CORS_HEADERS'] = 'Content-Type'
  
  ...