React Component and Fetch
Questions Question 1. (15 pts) React Login Component We are going to do a number of development steps prior to integrating the login capabilities of our React app with our server. These steps insure that we test and verify desired functionality as we develop. In this problem we only deal with the React app and not the server. (a) Login Component Mockup Create a Login component that takes an email and password, and has a button to initiate the login, but has no functionality yet, i.e., doesn’t respond to button clicks or text inputs. Take a screenshot. I get something like: Login Component Mockup (b) Login Component Functionality Add state to the Login component to keep track of the email and password that the user types. Add a button handler for the “login” button. Show your event handling code here. (c) Change Role in App (Mocking member and admin logins) We need our Login component to be able to change the state of the entire application if a member 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. Add role and user to the App state. To handle “mock” logins have your Login component check for
[email protected] for an admin user and
[email protected] 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 Functionality Add a menu item to implement “logout” functionality. You don’t need a component here but just set the role to guest and the user to null. Show your code that handles this functionality here. (d) Role Based Menu Now we have logins for members and administrators, but we show all the menu items to all users. Only admins should see the “member” information, only admins and members should see the “activities” information. To fix this adjust/generate the app menu in response to changes in the role portion of the app state. Show your code for this here and screen shots for “guest” and “admin” roles. Mine look like: Guest Menu Admin Menu Question 2. (15 pts) React Activity Management Component For this component you can keep the activities as “local” state rather than working with the App state. In a real deployment this component could directly talk to the server. (a) Prototype UI 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 (b) 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 (c) Delete Activity Functionality Now give the admin user the ability to delete club activities. Demonstrate it here using before and after screen shots. I get something like: After first delete After second delete Question 4. (10 pts) React Fetch Activities Now lets get the activities data for members from our server! (a) Members Activities Component You should have created a members activities component to show your activities to the members. However we want to use the life cycle method componentDidMount as the place to make the fetch call. If you Activities component is not a class based component update it here with its state containing the array of activities. (b) Fetch Activities in the Component Add the component life cycle method componentDidMount and use fetch to get the list of activities from the server. Take a screenshot that shows the network panel with the fetch to activities and some of the data returned. My screenshot looks like: Fetching Activities Show your updated Activities component code here. Questions Question 1. (15 pts) React Login Component We are going to do a number of development steps prior to integrating the login capabilities of our React app with our server. These steps insure that we test and verify desired functionality as we develop. In this problem we only deal with the React app and not the server. (a) Login Component Mockup Create a Login component that takes an email and password, and has a button to initiate the login, but has no functionality yet, i.e., doesn’t respond to button clicks or text inputs. Take a screenshot. I get something like: Login Component Mockup (b) Login Component Functionality Add state to the Login component to keep track of the email and password that the user types. Add a button handler for the “login” button. Show your event handling code here. (c) Change Role in App (Mocking member and admin logins) We need our Login component to be able to change the state of the entire application if a member 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. Add role and user to the App state. To handle “mock” logins have your Login component check for
[email protected] for an admin user and
[email protected] 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 Functionality Add a menu item to implement “logout” functionality. You don’t need a component here but just set the role to guest and the user to null. Show your code that handles this functionality here. (d) Role Based Menu Now we have logins for members and administrators, but we show all the menu items to all users. Only admins should see the “member” information, only admins and members should see the “activities” information. To fix this adjust/generate the app menu in response to changes in the role portion of the app state. Show your code for this here and screen shots for “guest” and “admin” roles. Mine look like: Guest Menu Admin Menu Question 2. (15 pts) React Activity Management Component For this component you can keep the activities as “local” state rather than working with the App state. In a real deployment this component could directly talk to the server. (a) Prototype UI 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 (b) 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 (c) Delete Activity Functionality Now give the admin user the ability to delete club activities. Demonstrate it here using before and after screen shots. I get something like: After first delete After second delete Question 4. (10 pts) React Fetch Activities Now lets get the activities data for members from our server! (a) Members Activities Component You should have created a members activities component to show your activities to the members. However we want to use the life cycle method componentDidMount as the place to make the fetch call. If you Activities component is not a class based component update it here with its state containing the array of activities. (b) Fetch Activities in the Component Add the component life cycle method componentDidMount and use fetch to get the list of activities from the server. Take a screenshot that shows the network panel with the fetch to activities and some of the data returned. My screenshot looks like: Fetching Activities Show your updated Activities component code here.