ezworks assignment

MainSection.js

Import Statements

-> Importing React, useState from the 'react' library.
-> Importing the SmallBox component from '../components/SmallBoxes'.
-> Importing the data from '../utils/myData'.
-> Importing the emailRegex(form email validation) from '../utils/regex'.
-> Importing the submitEmail(calling the API) function from '../config/api'.

MainSection Component

-> This is a React functional component called MainSection.
It represents the main section of a web page.

State Variables

email: This state variable is used to store the email input from the user.
formError: It is used to display any error message related to form submission.
formMessage: This state variable displays success or informational messages after form submission.
loading: This state variable is used to control the loading state while submitting the form.

handleSubmit Function

This is an asynchronous function that handles the form submission.
It prevents the default form submission behaviour and sets loading to true to indicate that form submission is in progress.
It performs several validation checks on the email input:

-> Check if the email is not empty and display an error message if it is.
-> Validates the email using a regular expression (emailRegex) and displays an error message if it's invalid.
-> Check if the email ends with "@ez.works" and display an error message if it does.
-> If there are no errors, it clears any previous error or message and calls the submitEmail function with the email input.
-> It updates the formError and formMessage state variables based on the result of the submitEmail function.
-> Finally, it sets loading back to false.

SmallBox.js

Import Statements

-> Importing React from 'react'.
-> Importing a CSS file for styling.

SmallBox Component

This is a React functional component called SmallBox.
It represents a small box with an icon, title, and text.

Screenshot