Questions
Question XXXXXXXXXXpts) 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 XXXXXXXXXX for
an admin user and XXXXXXXXXX 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
ut 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
esponse 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 XXXXXXXXXXpts) 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
efore and after screen shots. I get something like:
After first delete
After second delete
Question XXXXXXXXXXpts) 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 a
ay 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 XXXXXXXXXXpts) 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 XXXXXXXXXX for
an admin user and XXXXXXXXXX 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
ut 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
esponse 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 XXXXXXXXXXpts) 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
efore and after screen shots. I get something like:
After first delete
After second delete
Question XXXXXXXXXXpts) 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 a
ay 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.