CS 351 Fall 2019 Homework 11

React Class Components and Interactivity

Dr. Greg M. Bernstein

Due Wednesday, December 4th, 2019 by 11:59PM, 50 points.

General Instructions

Your Last CS351 Homework Ever!!!

React Class Components and Interactivity

Create and Use a new Branch hw11

We will create a new git branch called hw11 for use in this assignment. The branch you create must exactly match the one I’ve given you for you to receive any credit for this homework.

Prior to creating this new branch make sure your working directory is “clean”, i.e., consistent with the last commit you did when you turned in homework 10. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw11. Review the section on submission for using push with a new branch.

Use README.md for Answers

You will modify the README.md file to contain the answers to this homework.

Questions

Question 1. (10 pts) App State by Role

(a) Main Page Rendering in by Role

We are going to update our App component to control the entire state of our application by role to ensure the users are only shown information and options appropriate to their role. You can use the following outline for your index.js as a start:

(b) Guest App, Customer App, and Admin App Outlines

Guests, customers, and admin users will have different “views” or “sub apps”. We will create three new components GuestApp.js, CustomerApp.js, AdminApp.js to customize the menus/options available to these three classes of users. Add an adjust a menu (navigation) for each of these subcomponents to something appropriate for each class of user (note the links are not functional yet!) besides the menu just show your “Home” component in each sub app. My initial GuestApp.js looks like:

In your highest level App make sure that you can change between the guest, customer, and administration screens by changing the role field of the state. Take screen shots of your three different screens and show them here. I get something like:

Guest App
Guest App
Customer App
Customer App
Admin App
Admin App

Question 2. (10 pts) Sub-app state/Nav

(a) GuestApp State Based Rendering

Add the ability to the GuestApp component to show either the Home or About component based on the user clicking on the menu. If they click on something not implemented show some kind of simple message.

Show the JavaScript code you add to implement this functionality. Both the JSX enhancements to the menu items and the handler code.

Here are some example screen shots with the component developer panel showing.

(b) CustomerApp State Based Rendering

Add the capability for the CustomerApp component to show a sub-component like you did for the GuestApp. Take an example screen shot and show it here.

I have something like:

Customer Tour State
Customer Tour State

(c) AdminApp State Based Rendering

Similarly add state based rendering to your AdminApp component. Take a screenshot. I get something like:

Admin Customer State
Admin Customer State

Question 3. (10 pts) Login and Logout

We don’t have a server yet but we can “mock” up this functionality and implement transitions between guest, customer, and admin roles.

(a) Login

Create a Login component that takes an email and password, and has a button to initiate the login. Use this with your GuestApp component. Take a screen shot which also shows the component hierarchy. I get something like:

Login
Login

(b) Mocking Customer and Admin Logins

We need our Login component to be able to change the state of the entire application if a customer or admin logs in. To do this the App component needs to pass a function down through the component hierarchy for the Login component to call. At a minimum this function should take the new role and user information as parameters.

To handle “mock” logins have your Login component check for admin@email.org for an admin user and cust@email.org for a customer user (this must be exactly implemented since I’ll use them to test your web app). For user info return an object with your name and anything else you want to include. Do not check the password.

Show the function you added to App and the code in Login to handle the login button click.

(c) Logout

You can now test logging in as an admin or customer using a similar mechanism add the capability to logout from the AdminApp or CustomerApp, i.e., you’ll return the role to guest and remove any user information from the application state.

Show the code used to implement logout in your AdminApp component here.

Question 4. (10 pts) Tour Management

(a) Tour Management Mockup

Create a new component for tour management by an admin user. Call it AdminTour.js. You can start with your Tour.js component from last weeks assignment. “Mock up” the user interface to include functionality for adding and deleting tours, but don’t provide any functionality yet. Take a screen shot. My screen shot looks like the following:

Tour administration mockup
Tour administration mockup

Note that I had the complication of two distinctly different tour types. Do what is appropriate for your tour company.

(b) Add Tour Functionality

For the UI mockup it didn’t matter if the React component was function or class based. Now we want to keep the tour information as state and manipulate it. What kind of component should we use? Add the capability to this component to add a tour. Take a screen shot after you have added a couple tours and show the react component view. I get something like:

After Adding Tours
After Adding Tours

(d) Show Component Constructor.

Show the code for your component constructor function here.

(e) Show JSX code for Inputs and Buttons

I just want to see the portion of your component’s render function that shows the widgets for adding a tour. Do not show the entire render function.

(f) Show Event handling functions

Question 5. Deleting Tours (10 pts)

(a) Functionality to Delete Tours

Now give the admin user the ability to delete tours. Demonstrate it here via before and after screen shots. I get something like:

Prior to tour delete
Prior to tour delete
After tour delete
After tour delete

(b) Show Modification to JSX

Show modifications to your JSX to support tour deletion. Show subcomponents if you used them.

(c) Show Event Handlers