CS 651 Spring 2020 Homework 7

More React Interactivity and Networking

Dr. Greg M. Bernstein

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

General Instructions

React Class Components and Interactivity

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.

Questions

Question 1. (20 pts) Structure and Activity Management

Note that this question is worth 20 points, partially for the time and debugging it may take you to clean up the source structure, but also the new activity management component.

(a) Source Structure

We are going to be adding more capabilities to our club project. To do this we will had new components in addition to modifying existing components. To avoid confusion, especially if we choose to give some components similar names, we will put our source code into separate directories based on reasonable groupings. Note that doing this will break all your code until you adjust the import statements appropriately. Make sure your application works again! Take a screen shot to show me your new directory structure. I broke my source code into admin, member, and guest subdirectories and put components into those directories as appropriate, i.e., components visible to guests were put into the guest directory along with guestApp.js. My directory structure looks like:

Revised directory structure
Revised directory structure

(b) Club Activity Management Mockup

Create a new component for club activity management by an admin user. Call it AdminActivity.js. You can start with your Activities.js component from last weeks assignment. “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
Activity administration mockup

(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
After Adding 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 a tour. Do not show the entire render function.

(f) Show Event handling functions

Question 2. Deleting Activities (10 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 tour delete
Prior to tour delete
After tour delete
After tour delete

(b) Show Modification to JSX

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

(c) Show Event Handlers

Question 3. Networking (10 pts)

(a) Your Network Interfaces

We can use Node.js to find out about how your computer accesses the Internet. Put code like the following into a file and run it with Node.js

You may get a lot or a little output depending on your machine. Scroll through the list looking for the name of the interface that you are currently using, most likely Wi-Fi or Eth0, but not an interface associated with a virtual machine manager such as VirtualBox or VMWare. Within that interface find the entry that has a family of IPv4. Show me the IPv4 address and the MAC (Ethernet) address and take a screen shot.

My screenshot looks like:

(b) Ethernet Address of your machine(s)

Go to the Wireshark OUI lookup page and enter the Ethernet address from part (a). Who made your Ethernet adapter?

Take a screenshot. I get something like this for my laptop:

(b) Type of IP Addresses of your machine

Go to Wikipedia:IPv4 special use addresses and see if your IPv4 address from part (a) falls into one of the special use address categories, if so, which one?

(c) IP Address of a public website

Now let’s use the Domain Name Service (DNS) to look up an address of a website of your choosing (you cannot use mine!). This can be done with a Node.js program like the following:

Write the IP addresses returned here. For my site I get: [ '207.38.86.220' ].

(d) Where is the server?

Using the IP address you got from part (c) use an “IP location finder” website to give you information about the physical location of the computer with the IP address. I used KeyCDN but you can try any of the sites. Take a screen shot of the location information they give you.

I for my website’s IP address I get:

Question 4. this, Async JS and Promises (10 pts)

(a) this

What two purposes does JavaScript ascribe to the this keyword?

(b) this again

In the following code indicate the value of this at each function/method call, explain.

(c) SetTimeout and The Event Queue

Show what this code will print out and more importantly explain why?.

(d) Promises

What does the following code do? And how can you find out the winner of the “promise race”?