Question 1. JSON Server Post Now lets add an “interface” to add a activity to the server from a client.  Note : you can just use simple JavaScript array manipulation with your activities array that...

Now lets add an “interface” to add a activity to the server from a client.Note: you can just use simple JavaScript array manipulation with your activities array that you read in from the JSON file. You will not persist this information on the server at this time, i.e., do not write it to a file, we’ll be using a database for that later.

(a) Add Activity

Create another “interface” to your club server that receives a new activity via a JSON POST to /activities. After you add the activity to the activities array on the server return the updated array to the client via JSON. After testing it in part (b) show the code for this interface only here. Hint: you may need to use some “middleware” to deal with JSON.

(b) Test with Requests

Write a separate Node.js program called addActivityTest.js to test the interface in part (a) by getting and printing out the current list of activities and then adding a single activity and printing out the updated list of activities. Appropriately use promises (or async/await) to make sure these steps happen in order. Show a screen shot and your test code here. My screen shot looks like:

Question2: Activities Component

Create a Activities component in a activities.js file and have it show the club events in a nice table. You must use appropriate React idioms such asmap to transform data, usingkey attribute to avoid warning messages etc. See course slides for more info. Pass the Activities component the event information you got from the JSON file. I added the following to my index.js for this purpose:

import React from "react";

import ReactDOM from "react-dom";

import Activities from "./activities";
// Imports component

import events from "./eventData.json";
// Imports event data

function
Hello(props) {
// A function component

return
h1> Hello React from Your name and net ID here! >;

}

// Uses the function component

ReactDOM.render(div>Hello/>

    Activities events={events} />

    >,

    document.getElementById("root")

);

Show the code for your Activities component here. Take a screen shot with the React developer tools showing the components.

My Screen shot looks like: