CS 651 Fall 2021 Homework 7

React class components and interactivity

Dr. Greg M. Bernstein

Due Wednesday, October 13th, 2021 by 11:59PM, 50 points.

General Instructions

Topics this week: More React Class Components and interactivity. Networking.

Create and Use a new Branch hw7

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

# Homework #7 Solution
**Your name**
**NetID: yourNetID**


To receive full credit for problems 1-3 your deployed code/app must work.

Question 1 (10 pts) Change App state with Menu

Update your App and Menu components to change the “view” (component shown by your App) when the user clicks a menu button. Note: we are finally making the App/Menu combination from homework #6 functional. You need to use proper React techniques. You should be able to use .bind() to avoid writing a bunch of trivial functions.

(a) Explain Changes to App Component

Explain here what changes were needed to the App component. Show how you now call the menu component (just a code snippet not the entire file).

(b) Explain Changes to Menu Component

Explain here what changes were needed to the Menu component. Show how a “menu item” changes the App state (just a code snippet not the entire file).

Question 2. (10 pts) Membership Application Component

We are going to upgrade our “club application” function based React component to be a React class component so we can easily gather up the various “form” fields from the user. We still don’t have a server to send to so we will demonstrate functionality with a message “modal dialog” when the user click the “apply” button. However, we will do all our processing including adding/removing CSS classes via React. This will get up practice prior to the more complicated user interface for managing activities.

(a) Convert to class and Set up state

Convert your membership application component, i.e., the one with the “form” to apply to the club, from a React function component to a React class component. Add properties in the state for each input, selection, text area widget in your form. Show the JavaScript code for the constructor only here.

(b) Add handlers for input/change events

For each “form widget” create a handler function to deal with input or change events as appropriate and use these to update the components state. Make sure these work by looking at the “Components” React developer plugin. Show the JavaScript for these event handlers here and take a screenshot of the developer tool panel showing the components state. My screenshot looks like:

Dev Tools

(c) Thanks Section

Below the form inputs add a <section> to either thank the user for signing up or give an error message if there is a problem with a form field. Take screenshots on error and success. I get:




(d) Thanks Modal Dialog

Now by adding some more state (see course slides on interactivity) and the appropriate CSS classes make the <section> in part (c) display like a “modal dialog” box when the “sign me up” button is click. Show the JSX code and CSS classes just for this section and take a screenshot. I get something like:

Modal Dialog

Question 3. (15 pts) Activity Management

We are going to create a component to allow administrators or members to add and delete club activities.

(a) Club Activity Management Mockup

Create a new component for club activity management. Call it AdminActivity.js. “Mock up” the user interface to include functionality for adding and deleting club activities, but don’t provide any functionality yet. Take a screen shot. My screen shot looks like the following:

Activity administration mockup

(b) Menu Item for “Manage Activities”

Create an additional menu item in the menu for members/admins. Mine looks like:

Admin activity menu

(c) Add Activity Functionality

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

After Adding Activities

Notes We will not have this component get its activities from the App component since in our final version this component will talk directly to the server. Hence you can have this component import some JSON data directly from a JSON file for development purposes. You do not need to let the App component know about changes to “activities”.

(d) AdminActivity 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 an activity. Do not show the entire render function.

(f) Show Event handling functions

Show the event handling functions you needed to write.

Question 4. Deleting Activities (15 pts)

(a) Functionality to Delete Activities

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

Prior to activity delete

(b) Show Modification to JSX

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

(c) Show Event Handler

Show your event handler to for the “delete” buttons here.

(d) Deploy to Server

Do a production build and deploy to a server. Put the link here.