Assignment 5 - Routing and API calls

First, complete assignment 4 if you haven't already. That assignment is prerequisite; it would be a poor use of time to learn about routing and API calls if you aren't already familiar with React.

In workshop 5, we covered client-side routing and added new routes to an ecommerce app using react-router-dom. Then, we learned about how the JavaScript engine handles asynchronous functions, and we used fetch to make requests to a products API.

In assignment 5, you’ll add routing and API calls to your web app.

Setup

  1. You’ll begin with your web app from assignment 4. We will build off of that repository this week.

  2. Navigate to your local project repository from assignment 4. Make sure you are on the hw-4 branch (or whatever branch contains all your changes from assignment 4).

    • Run git branch to check what branch you are on.
    • Run git checkout branch-name to switch to a different branch.

  3. Run git checkout -b hw-5 to create a new branch called “hw-5” that branches off your hw-4 branch. All of the work on your project MUST be done on this branch. You should NOT modify the main branch, or the hw-4 branch.

  4. Run git push -u origin hw-5 to publish this new branch on github.

  5. Dedicate one terminal window to running your code with npm.

    • Run npm start in this terminal to run your app and view your changes in the browser.
    • If you want to stop running your code at any time, use Ctrl+C inside this terminal.

  6. Dedicate another terminal window to running normal terminal commands, like git commands.

    • git add . stages all of your current changes so you can commit them
    • git status displays your changes, showing what’s staged and what isn’t
    • git commit -m “commit message here” bundles everything on the stage into a commit
    • git push publishes your commit(s) to github

  7. Now you are ready! Go forth and code!

    • As you progress on this assignment, continue grouping your changes into commits and pushing them to the hw-5 branch on github. All of your commits MUST be on the hw-5 branch, not the main branch or the hw-4 branch.

Core requirements

  • Add 1 new page to your web app using react-router-dom.
  • Retrieve and display information from the users API. Use the getAllUsers function to get an array of all the users from the database. Once you have this array, you can map over it to display a card for each user.
    • Hint 1: store the array of users in a state variable
    • Hint 2: you only want to fetch the users the first time you load the page, instead of every time your app renders. useEffect can help us out here.

The users API

  • An API is just a group of functions. The users API is a group of functions we’ve built that enable you to interact with a real database of users.
    • You’ll be building your own database and API in a couple weeks!
  • Here are the functions we provide in this API:
    • getAllUsers: gives an array of all the users in the database
    • getUserByID: gives information about a specific user in the database
    • createUser: adds a new user to the database
    • updateUser: updates an existing user in the database
    • deleteUser: deletes a user from the database
  • A machine in Ohio is set up with the code to execute these functions. This machine is called a server because its job is to serve information and provide other services (such as modifying a database). In order to run functions of the users API, you’ll need to communicate with this server.
    • The scheme that the server uses to communicate is https. This means that you will communicate with this server by making HTTP requests.
    • The domain/hostname of the server is: disc-assignment-5-users-api.onrender.com
  • Below is the information you’ll need to build your requests
FunctionMethodPathAdditional request informationResponse
getAllUsersGET/api/usersnoneAn array of User objects.
Each User object has the following fields:
  • id: integer
  • firstName: string
  • lastName: string
  • email: string
  • bio: string
  • major: string
  • graduationYear: string
  • profilePicture: string
  • created_at: timestamp string
getUserByIDGET/api/users/:idnoneA single User object
createUserPOST/api/usersThe body of the request must contain these fields:
  • firstName: string
  • lastName: string
  • email: string
  • bio: string
  • major: string
  • graduationYear: string
  • image: File
A single User object representing the user you just created
updateUserPUT/api/users/:idThe body of the request must contain these fields:
  • firstName: string
  • lastName: string
  • email: string
  • bio: string
  • major: string
  • graduationYear: string
  • image: File
A single User object representing the user you just updated
deleteUserDELETE/api/users/:idnonenone
  • For example, say I wanted to delete the user named “Bob”.
  • Use the fetch API to make requests to the server in your JavaScript code.
    • For createUser, and updateUser, the Content-Type you need to use for your request body is multipart/form-data. If you are unfamiliar with how to work with this type of content, read this guide
    • Remember that fetch returns a promise. How do we deal with promises?
  • Important note: the server will go to sleep if it hasn’t received any requests in a long time. If that happens, the next time it receives a request, it will take a long time to complete the request because it has to un-sleep. This means that some requests might take up to 5 minutes to complete.
    • To wake the server, you can make a GET request to it by opening this URL in your browser: https://disc-assignment-5-users-api.onrender.com/api/users. That’s right, every time you go to a link in your browser, it’s really just making a HTTP GET request to that url and displaying the result.
  • Having trouble? Check out Ethan's user API demo.

Additional requirements:

  • Add more pages to your web app.
  • Use the other functions in the users API to add more features to your web app. We recommend integrating the functions in this order:
    • getAllUsers
    • getUserByID – should be very easy after you have getAllUsers working
    • createUser
    • updateUser – should be very easy after you have createUser working
    • deleteUser – should be very easy after you have getUserByID working
      • Each time after you delete a user, create a new user. Deleting users deletes them for everyone else working on this assignment, and we don’t want to be left with 0 users. This means do not implement deleteUser until you have createUser working.
  • Add a loading screen or animation that shows up while the requests load.

Tips

  • Read this page very carefully.
  • Use console.log everywhere all the time to see what all your variables look like. This is especially helpful when working with complex objects, such as fetch response objects.
  • The first route you add, and the first API you call, will always be the hardest. Once you figure it out once, it will be much easier to do it again!
  • In almost all cases, you should be using the response from an API call to set some state variable.
  • If you keep your code organized, this assignment will be easier. We love helper functions.
  • There is a small chance that the users API doesn't work due to an issue in our implementation. If you suspect that is the case, reach out to Ethan Pineda on discord.

Resources

Submission

For feedback from DISC exec

Follow these instructions if you are submitting to get feedback from DISC exec. The deadline for your submission is 1 week after the associated workshop.

  1. Make sure all your changes are committed and pushed onto github (the hw-4 branch, NOT the main branch or hw-4 branch).
  2. On github, make a pull request from your hw-5 branch. Do NOT merge the pull request.
  3. Once you've created the pull request, copy its URL from the browser.
  4. Fill out this google form

For the Discover Program Application

If you are not submitting for DISC exec feedback, but for your Discover Program Application, follow the submission instructions in the application form.