Chapter 11: Adding CRUD Functionalities

This chapter describes how we can implement CRUD functionalities in our frontend. We are going to use the components that we learned about in Chapter 9, Useful Third-Party Components for React. We will fetch data from our backend and present the data in a table. Then, we will implement the delete, edit, and add functionalities. In the final part of this chapter, we will add features so that we can export data to a CSV file.

In this chapter, we will cover the following topics:

• Creating the list page
• Deleting, adding, and updating data using the REST API
• How to show toast messages to the user
• Exporting data to the CSV file from the React app

Technical requirements

The Spring Boot application that we created in Chapter 10, Setting Up the Frontend for Our Spring Boot RESTful Web Service (the unsecured backend), is required, as is the React app that we created in the same chapter (carfront).

The following GitHub link will also be required: https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-and-React/tree/main/Chapter11.

Check out the following video to see the Code in Action: https://bit.ly/3z78Fcj

Creating the list page

In the first phase, we will create the list page to show cars with paging, filtering, and sorting features. Run your unsecured Spring Boot backend. The cars can be fetched by sending the GET request to the http://localhost:8080/api/cars URL, as shown in Chapter 4, Creating a RESTful Web Service with Spring Boot.

Figure 11.1 – Fetching cars

Now, let's inspect the JSON data from the response. The array of cars can be found in the _embedded.cars node of the JSON response data.

Once we know how to fetch cars from the backend, we are ready to implement the list page to show the cars. The following steps describe this in practice:

1. Open the carfront React app with VS Code (the React app we created in the previous chapter).
2. When the app has multiple components, it is recommended that you create a folder for them. Create a new folder called components in the src folder. With VS Code, you can create a folder by right...

The delete functionality

Items can be deleted from the database by sending the DELETE method request to the http://localhost:8080/api/cars/{carId} endpoint. If we look at the JSON response data, we can see that each car contains a link to itself and it can be accessed from the _links.self.href node, as shown in the following screenshot. We already used the link field to set a unique ID for every row in the grid. That row ID can be used in deletion, as we can see later:

Figure 11.7 – Car link

The following steps demonstrate how to implement the delete functionality:

1. Here, we will create a button for each row in the table. The field of the button will be _links.self.href, which is a link to a car. If you need more complex cell content, you can use a renderCell prop that you can use to define how a cell content is rendered.

Let's add a new column to the table using renderCell to render the button element. The row argument that is passed...

The add functionality

The next step is to create an add functionality for the frontend. We will implement this using the MUI modal dialog. We already went through the utilization of the MUI modal form in Chapter 9, Useful Third-Party Components for React. We will add the New Car button to the user interface, which opens the modal form when it is pressed. The modal form contains all the fields that are required to add a new car, as well as the button for saving and canceling.

We have already installed the MUI component library to our frontend app in Chapter 10, Setting Up the Frontend for Our Spring Boot RESTful Web Service.

The following steps show you how to create the add functionality using the modal dialog component:

1. Create a new file called AddCar.js in the components folder and write some function component base code to the file, as shown here. Add the imports for the MUI Dialog component:

   import React from 'react';
   import Dialog from '@mui/material...

The edit functionality

We will implement the edit functionality by adding the Edit button to each table row. When the row Edit button is pressed, it opens the modal form, where the user can edit the existing car and finally save the changes:

1. First, we will create a skeleton of the EditCar component, which will be the form for editing an existing car. Create a new file called EditCar.js in the components folder. The EditCar component code is similar to the AddCar component, but for now, in the handleSave function, we should call the update function that we will implement later:

   import React, { useState } from 'react';
   import Dialog from '@mui/material/Dialog';
   import DialogActions from '@mui/material/DialogActions';
   import DialogContent from '@mui/material/DialogContent';
   import DialogTitle from '@mui/material/DialogTitle';
   function EditCar(props) {
     const [open, setOpen] = useState(false);
     const [car, setCar...

Other functionalities

One feature that we will also implement is a comma-separated values (CSV) export of the data. We don't need any extra library for the export because the MUI data grid provides this feature:

1. First, we will import the following components to the Carlist.js file:

   import { DataGrid, GridToolbarContainer, GridToolbarExport,   
     gridClasses } from '@mui/x-data-grid';

2. Next, we will create the toolbar component that renders the Export button using the MUI GridToolbarContainer and GridToolbarExport components:

   // Carlist.js
   function CustomToolbar() {
     return (
       <GridToolbarContainer 
         className={gridClasses.toolbarContainer}>
         <GridToolbarExport />
       </GridToolbarContainer>
     );
   }

3. Finally, we have to enable our toolbar that contains the Export button. To enable the...

Summary

In this chapter, we implemented all the functionalities for our app. We started with fetching the cars from the backend and showing these in the MUI data grid, which provides paging, sorting, and filtering features. Then, we implemented the delete functionality and used the toast component to give feedback to the user.

The add and edit functionalities were implemented using the MUI modal dialog component. Finally, we implemented the ability to export data to a CSV file.

In the next chapter, we are going to style the rest of our frontend using the React MUI component library.

Questions

1. How do you fetch and present data using the REST API with React?
2. How do you delete data using the REST API with React?
3. How do you add data using the REST API with React?
4. How do you update data using the REST API with React?
5. How do you show toast messages with React?
6. How do you export data to a CSV file with React?

Further reading

Packt has other great resources available for learning about React. These are as follows:

• React - The Complete Guide, by Academind GmbH: https://www.packtpub.com/product/react-the-complete-guide-includes-hooks-react-router-and-redux-2021-updated-second-edition-video/9781801812603
• React 17 Design Patterns and Best Practices – Third Edition, by Carlos Santana Roldán: https://www.packtpub.com/product/react-17-design-patterns-and-best-practices-third-edition/978800560444