Adding CRUD Functionalities

This chapter describes how we can implement Create, Read, Update, and Delete (CRUD) functionalities in our frontend. We are going to use the components that we learned about in Chapter 11, 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 create functionalities. In the final part of this chapter, we will add features so that we can export our data to a CSV file.

In this chapter, we will cover the following topics:

• Creating the list page
• Adding the delete functionality
• Adding the add functionality
• Adding the edit functionality
• Exporting the data to CSV

Technical requirements

The Spring Boot cardatabase application that we created in Chapter 12, 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-3-and-React-Fourth-Edition/tree/main/Chapter13.

Creating the list page

In this first section, we will create the list page to show cars with paging, filtering, and sorting features:

1. 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. 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:

Figure 13.1: Fetching cars

2. Open the carfront React app with Visual Studio Code (the React app we created in the previous chapter).
3. We are using React Query for networking, so we have to initialize the query provider first.

You learned the basics of React Query in Chapter 10, Consuming the REST API with React.

The QueryClientProvider component is used to connect and provide QueryClient to your application. Open your App.tsx file and add the...

Adding 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, which can be accessed from the _links.self.href node, as shown in the following screenshot:

Figure 13.8: Car link

We already used the link field in the previous section to set a unique ID for every row in the grid. That row ID can be used in deletion, as we will see later.

The following steps demonstrate how to implement the delete functionality:

1. First, we will create a button for each row in the MUI DataGrid. When we need more complex cell content, we can use the renderCell column property to define how a cell’s contents are rendered.

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

Adding the add functionality

The next step is to add an add functionality to the frontend. We will implement this using the MUI modal dialog.

We went through the MUI modal form in Chapter 11, 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 buttons for saving and canceling.

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

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

   import Dialog from '@mui/material/Dialog';
   import DialogActions from '@mui/material/DialogActions';
   import DialogContent from '@mui/material/DialogContent';
   import DialogTitle from &apos...

Adding 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 a modal form where the user can edit the existing car and save their changes. The idea is that we pass car data from the grid row to the edit form, and the form fields are populated when the form is opened:

1. First, create a file called EditCar.tsx in the components folder. We have to define a FormProps type for our props, and this can be defined inside our component because we don’t need this type anywhere else. The type of data that will be passed to the EditCar component is the CarResponse type. We will also create a state for car data like we did in the add functionality section. The code for the EditCar.tsx file looks like the following:

   // EditCar.tsx
   import { useState } from 'react';
   import { Car, CarResponse } from '../types';
   type FormProps = {
     cardata: CarResponse;
   ...

Exporting the data to CSV

One feature that we will also implement is a comma-separated values (CSV) export of the data. We don’t need any extra libraries for the export because the MUI data grid provides this feature. We will activate the data grid toolbar, which contains a lot of nice features:

1. Add the following import to the Carlist.tsx file. The GridToolbar component is a toolbar for the MUI data grid that contains nice functionalities, such as export:

   import { 
     DataGrid, 
     GridColDef, 
     GridCellParams,
     GridToolbar
   } from '@mui/x-data-grid';
   

2. We need to enable our toolbar, which contains the Export button and other buttons. To enable the toolbar in the MUI data grid, you have to use the slots prop and set the value to toolbar: GridToolbar. The slots prop can be used to override the data grid’s internal components:

   return(
     <>
       <AddCar />
       <DataGrid
         rows={cars}
         columns={columns...

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 DataGrid, which provides paging, sorting, and filtering features. Then, we implemented the delete functionality and used the SnackBar 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 Material UI 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 show toast messages with React and MUI?
4. How do you add data using the REST API with React?
5. How do you update data using the REST API with React?
6. How do you export data to a CSV file with React?

Further reading

There are other good resources available for learning about React and React Query. For example:

• Practical React Query – TkDoDo’s blog, by Dominik Dorfmeister (https://tkdodo.eu/blog/practical-react-query)
• Material Design Blog, by Google (https://material.io/blog/)

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask the author questions, and learn about new releases – follow the QR code below:

https://packt.link/FullStackSpringBootReact4e