CS 651 Spring 2020 Homework 6

React Class Components and Interactivity

Dr. Greg M. Bernstein

Due Monday, March 16th, 2020 by 11:59PM, 50 points.

General Instructions

React Class Components and Interactivity

No Late Submissions

Create and Use a new Branch hw6

We will create a new git branch called hw6 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 5. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw5. 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

Work on UI for their club. Guest screens (sign up for club, about), Member screens, Administrator (list of members, add/edit/del activities)

Question 1. (10 pts) App and State

Set up React tour project, JSON fake customer list (I provide), JS list of tours they provide.

(a) Project initialization

Create a directory at the highest level of your repo and call it ReactClub. Set up a package.json file and install React. Create a basic index.html and index.js for use with Parcel and React such as in the course notes.

(b) Main Page Rendering in React

We are going to create an App component to control the entire state of our application. You can use the following outline for your index.js as a start:

To get adjusted to showing your nice club home page in React start with a component that just shows our club home page. There are a number of issues to be fixed as we take the raw HTML from our project and bring it in as JSX. One is that all HTML class attributes that you may have been using for styling need to be changed to className attributes in JSX.

In addition images need to be brought in via a two step process. First import you images and then use that imported item for the src attribute, e.g.,

Take a screen shot of your progress showing the React developer panel with the component view. I get something like:

(c) Guest App, Member App, and Admin App Outlines

Guests, Members and Admins will have different “views” or “sub apps”. We will create three new components guestApp.js, memberApp.js, adminApp.js to customize the menus/options available to these three classes of users. Adjust the menu (navigation) for each of these subcomponents to something appropriate for each class of user (note the links are not functional yet!). Note that you should remove any old JavaScript and styling that you were using for drop down menus. Anything like this needs to be done within React.

Take screen shots of your three different screens and show them here. I get something like:

Guest App
Guest App
Member App
Member App
Admin App
Admin App

(d) Role Based App Display

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. Show the JavaScript code for this here.

Question 2. (10 pts) Factor out Static Components, Sub-app state

(a) Factor out static components

Across all my “sub-apps” I can show the user the company home page, and an about page. Let’s turn those into separate components and respond to menu clicks to show those components. Create Home.js and About.js files to hold simple React function components for what used to be “static pages”.

(b) 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.

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

Guest Home State
Guest Home State
Guest About State
Guest About State
Guest Login State
Guest Login State

Question 3 Customer and Admin State Based Rendering

(a) MemberApp State Based Rendering

Add the capability for the MemberApp 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:

Member State
Member State

(b) AdminApp State Based Rendering

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

Admin State
Admin State

Question 4. (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 member@email.org for a member (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 5. (10 pts) Club Activities Data and Display, Test, Deploy

(a) Activities Data

Create some mock activities data and put it into a JSON file named activities.json, you can include any type of information about the activities you want but you must have some type of name and date information. Show a portion of this file here.

(b) Club Activities Component

Create a Tours component for use with theGuestApp have it show the activities from the JSON file. Note in the future the acitivies information will come from our server so we are just using the activities.json file as a standin.

Take a screen shot and show the code for your Activities component here.

My Screen shot looks like:

Activities Component
Activities Component

(c) Test and Deployment

Create a production build of your application with Parcel.js, test and deploy to the department server. Put a link to your app here. Your app must demonstrate the functionality of this homework to receive credit.