Purpose of this Lab

In the last two labs, we looked at the basics of React and implemented a small chat application web client making use of React and our server-side code from last term’s labs. This lab will provide some extra information and choices that you may use to help improve your React application and make them easier to create and maintain.

In this lab we will re-create the chat app from Lab 4 using a proper UI component library Material UI, more advanced component rendering using props, and state management using Zustand.

This lab does cover some more advanced concepts that can be dificult to easily show in the form of a lab handout. Thus, to get a full understanding of the concepts covered we suggest you make use of online documentation where applicable and play around with the code given to properly understand what is happening.

1 Exercise 1: Initial Setup

We are going to refactor our front-end application for the chat app we wrote in Lab 4, to prepare for this lab we suggest creating a copy of your Lab 4 directory for use. Note: To save time don’t copy the node_modules folder, instead copy all other files and re-run the npminstall command.

2 Component UI libraries

When creating any sotware application, it is prudent to see what libraries are already available, as they provide a structured way to get functionality that may otherwise be very time consuming to create from scratch.  We have already seen this to a degree when we used Bootstrap to style our application in Lab 4. Installing a full library through our package manager provides a nicer way to use functionality. In this case we will be looking at component UI libraries as this is an important part of making your website look good.

This lab will specifically look at the Component Library MUI1. However, there are many diferent ones that you can use, and due to the popularity of React many of these have great documentation and tutorials you can use. When looking for a UI library there are several things to keep in mind:

●  Is it compatible with my version of React?

● Are there good documentation and examples online?

●  Does it look good / Do I like the look of it?

2.1 Material UI (MUI)

2.1.1 Exercise 2.1: Adding Material UI to Your Project

Material UI requires several packages depending on what you are using. The most important being @mui/mater ial, we will also be making use of icons from @mui/icons -mater ial, and we will need to include @emotion/react and

@emotion/styled.

1.  Run the command npminstall --save for each of the packages above OR to save time simply run the shorthand command npmi -S@mui/mater ial@mui/icons -mater ial@emotion/react

@emotion/styled.

2.  If you have the Bootstrap CDN link included from the previous lab remove it so you can see exactly what styling MUI is producing.

3.  Run your app to make sure nothing has broken, then we are ready to start making use of some new compon- ents.

2.1.2 Exercise 2.2: Replacing Modal with Dialogs

MUI has the component Dialog2that acts similar to the modals we made use of in the previous lab. Some diferences are the fact that Dialogs depend on our React state and make use of proper HTML tags.

1.  In Lab 4 we suggested creating two modals for each user in the list as an easy way to get around some of the limitations raw modals have. Now with proper dialogs we can more easily interact with our state. To start with, remove the code for the delete modal.

2. Ater the list of users place the following code for the delete dialog. There is a lot going on here but notice the open={ . . . } this is where we reference our state variable (a boolean) that defines whether the dialog should is open or not. We also have handleDeleteDialogClose being called on close (this is a method that will handle updating the aforementioned variable, along with any other code we want to run when the dialog is closed). Finally note that we have made use of some other new HTML tags, specifically we have several inner Dialog tags which are hopefully self-descriptive; we also have new Buton tags, these are explicitly MUI buton components.

1 const [openDeleteDialog,  setOpenDeleteDialog]  =  React .useState(false)

2 const [dialogUser,  setDialogUser]  =  React .useState({  username :  "" ,  user_id :  -1  })

3 const handleDeleteDialogOpen  =  (user :  User )  =>  {

4                          setDialogUser(user )

5                          setOpenDeleteDialog(true); 6               };

7 const handleDeleteDialogClose  =  ()  =>  {

8                          setDialogUser({  username :  "" ,  user_id :  -1  })

9                          setOpenDeleteDialog(false);

10               };