Client-Side JavaScript Frameworks (React)

Part 1: Fetching Data From the Server Part 2: Updating Data on Server and Client

Due Tue 4/23 midnight. Late penalty by Thu 4/25 at class time.

Assignment

This is a continuation of the last assignment. If you didn't finish the last assignment, you'll need work on it here. I'll give you up to 50% credit on that part for finishing it for this one.

In this assignment, you will make your last assignment (schedule builder) connect to a server-side database.

Setup

https://classroom.github.com/a/K8Pf0TwK

• clone the repository containing the pre-made db, .gitignore, and server.js

• copy your files from the last assignment into the new repo

  you can move node-modules or reinstall with npm i

• test that you can run and see your scheduler app

You must be logged into Blackboard for the videos below to show!

Fetching Data From the Server

Following the next video example, update your app to retrieve the course, section, and instructor data from the server database.

Server Setup

• open a second terminal in the repo root and use npm to install express, sqlite, and sqlite3
• run nodemon server.js and verify that it operates
• update server.js with a route that serves the list of instructors and the course/section data from the db in json
  • this is the same data we hardcoded in the last assignment
  • one route needs to return all the data
    • to return multiple results, just put them both in a json object with keys like courses and instructors
  • you can use an SQL join to select all the course/section data from the db in one call, or make multiple db calls
  • either way, you'll want to organize the db results in json to be the same as the state data your client already uses
• test your route through the browser
• add the cors middleware as shown in the first video

Client Connection

• create (or reuse) state variable(s) to hold the data
  • simplest: create a new data state variable and get the retrieve part working
  • alternative: use the course state variable you already have from the last part of the last assignment, and add additional state variables as needed
• make an axios call to fetch all the data from the server in your App component

User Feedback (loading indicator and errors)

Following the next video example, update your app to show "Loading" and "Error" during data retrieval.

Using the Data

To complete this part, update your app to use the retrieved data instead of the hardcoded data. If your route returns the data in the same format as the hardcoded data in the app, it should be straightforward to comment out the latter and switch to use the former.