Building a Sport Scheduling App
Using CRUD functionality in React
My most recent development project was to build a scheduling application for a fake recreational hockey league. This was a great learning experience that helped me develop a foundation for using React as well as a deeper understanding and appreciation for how requests are made and data is transferred between a frontend and backend. While the frontend was built using React, the backend was set up using JSON Server which will build a fake REST API that you can use to test your frontend. These were split into two separate projects, one for the frontend and one for the backend, and the app itself can be viewed here.
As an overview of the app, there are two pages the user can navigate to- a home page and an admin page. The home page shows a list of upcoming games in the schedule so that players can see when their next upcoming game is. The admin page includes the same information but adds a form so that new games can be added to the schedule, as well as functionality to either delete individual games from the schedule or mark them as being canceled. Part of this project was to have full CRUD functionality which means the app can Create, Read, Update, and Delete data from a database. For this article we will focus in on the Update aspect and show how this is used to toggle the canceled status of a game. Take a look at the following images to see how it works.
So what is actually going on here? When the toggle switch is clicked, a PATCH request is being made to the JSON server to update the data being stored. Each game in the schedule is represented as an object that has a few basic properties: id, home team, away team, date, time, and a boolean value representing if the game is canceled or not. When the toggle is clicked, we make a copy of that individual game object but set the canceled value to the opposite of what it originally was. We then pass that object to the JSON server and say “Hey, replace the object in your list of games that has a matching id with this object that I am giving you.” Let’s take a look at how this happens in the code.
To start off, we have a function called cancelGame that takes a parameter of updatedGame- this is an object representing the game with the updated cancel status. Lines 55–61 sets up the configuration of the PATCH request we are about to make.
Line 63 kicks off our PATCH request by making a fetch request to our JSON server for a game with a specific id. This will update the JSON server data on the backend and we will also get this updated object sent back to us as a confirmation response. This response is handled in the .then methods on lines 64 and 65.
At this point, our PATCH request has been successfully completed. However the last thing to do is update the frontend to reflect the changes that have been made. Lines 68–77 takes care of this by making a new list of games. It adds the original games from the old list but when it comes across a game from the original list that has the same id as the newly updated game from the PATCH request, it adds this new game to the list instead. Once the new list of updated games is complete, it updates the state on line 77 which will cause a re-render and display the changes on the screen.
And that is how we make our PATCH request in React! I had a fun time working on this project and learned a lot along the way. I am eager to go deeper into React and keep learning. Now it is time to start thinking about the next project.
