15. Creating the Notifications, Security, and Subscription Pages
Devlin Basilan Duldulao1 and Ruby Jane Leyva Cabagnot1
(1)
Oslo, Norway
This last part of the series will make the Notifications, Security, and Subscription pages using Redux, Formik, and the Yup validation schema.
Overall, the aim here is to complete the UI of our React application with basic real-world functionalities and consolidate our learnings of how Redux works and how to use Formik and the Yup validation schema in our application.
Creating the Notifications Page
We will first do the Notifications page. This page is just for the design or overall UI look of the application.
Under the AccountView, we will need to create a file called Notifications.tsx:
account ➤ AccountView ➤ Notifications.tsx
Here are the named import components, as shown in Listing 15-1.
import React from 'react';
import clsx from 'clsx';
import {
Box,
Button,
Card,
CardContent,
CardHeader,
Checkbox,
Divider,
FormControlLabel,
Grid,
Typography,
makeStyles,
} from '@material-ui/core';
Listing 15-1
Adding the Named Components of the Notifications.tsx
And the shape of the Notifications component, as shown in Listing 15-2.
Our Notifications component here is just for aesthetics. At this point, we are not going to use any additional functionality here. The General Settings should do for our purpose of understanding the implementation flow of Redux.
However, you can update it on your own just to practice and solidify your learnings.
Creating the Security Page
Another React component we need to add is Security. Also, under AccountView, create a new file and name it Security.tsx.
We will be using here simple HTTP requests without Redux Toolkit. We are creating this to remind you that we DON’T need to use Redux in every HTTP request, similar to what we did in Chapter 6.
Okay, now let’s add the named components for the Security, as shown in Listing 15-4.
import React, { useState } from 'react';
import clsx from 'clsx';
import * as Yup from 'yup';
import { Formik } from 'formik';
import { useSnackbar } from 'notistack';
import { useSelector } from 'react-redux';
import {
Box,
Button,
Card,
CardContent,
CardHeader,
Divider,
FormHelperText,
Grid,
TextField,
makeStyles,
} from '@material-ui/core';
import { changePasswordAxios, ChangePasswordModel } from 'services/authService';
import { RootState } from 'store/reducers';
Listing 15-4
Importing the Named Components in Security
We are using Yup and Formik and the usual bunch of other components we need. We also imported the changePasswordAxios and ChangePasswordModel from authService and the RootState from reducers. As you can see, no action will send a request or update anything to the Store.
Next, we add the type of the object and use some React Hooks, as shown in Listing 15-5.
Adding the Props and Using Hooks for Subscription.tsx
In Listing 15-8, we access the profile and then render the Manage your subscription in the UI in Listing 15-9.
For example, we can access the subscription.currency, subscription.price, and subscription.name – because the subscription is a deconstructed object of the profile. The nested destructuring is a valid syntax here.
Listing 15-9 is the return statement of the Subscription component.
In the sidebar navigation, click Account, and you’ll see the default Settings page is the General page.
Click the other tabs such as the Subscription, Notifications, and Security.
To appreciate the power of using Redux in our app and how easily we can access or share a state of one component to another component, try to edit something in Settings ➤ General.
For example, edit the name and change it to Mok Kuh JR and save it. Once it’s saved, you’ll see the immediate update in the sidebar navigation also.
Figure 15-1
Screenshot of the updated Settings
So that’s the power of Redux – making the whole application reactive to any changes.
Summary
That’s it for this three-part series. In this last chapter, we finished the UI of our application, and hopefully we get into a complete understanding of how Redux works and how to use it in our applications whenever necessary. Hopefully, you have also deepened your knowledge and understanding of Formik and the Yup validation schema to build forms in applications.
Also, just keep in mind that Redux is good, but you DON’T need to use it everywhere in your application because it still adds complexity. For simple CRUD apps or if you don’t need to reuse the state in other components, you don’t need to use Redux.
But if you anticipate building an extensive application or an enterprise-level app, I would suggest setting up Redux in your application right from the get-go.
The setup would probably just take you an hour or two, and what’s good about this is that it is just there waiting to be used whenever you need it. You can then access the state in the reducer from any component.
In the next chapter, we will see how to make our React app mobile-friendly.
