Overview

You can refer to the screenshots at the beginning of this document to understand more of the components.

In this lab, we will only modify “App.js” to achieve the web page. Before you modify “App.js”, the initial page is as follows when you launch the app using “npm start”:

Part 2. Implement the login and logout functionalities.

Step 3. Handle input changes in the two input boxes

In “App.js”, class component Lab7App has a state of four key-value pairs: (1) isLogin is a boolean variable indicating whether the user has logged in; (2) loginName is a string variable containing the name of the logged-in user; (3) inputUserName is updated with the value of the username input box; (4) inputUserPswd is updated with the value of the password input box. By using handleInputChange() function as handler of the onChange event on the input boxes, values of the state variables inputUserName and inputUserPswd are always in sync with values of the input boxes. We have also provided the implementation of function handleInputChange(), where we use this.setState{[name]: value} to set value of a state variable according to the respective input value, where name refers to the value of the name attribute of the input element and value refers to the input value. Learn more about the usage of [name] at https://reactjs.org/docs/forms.html (“Handling Multiple Inputs” section).

Step 4. Implement the login and logout functionalities

4.1. In the render() function of Lab7App, remove “{/* step 4.1 */}”, and in its place, render the LoginButton component. The LoginButton component receives three props:

1. username: which equals the value of state variable inputUserName;

2. password: which equals the value of state variable inputUserPswd;

3. handleStatusChange: which equals this.handleStatusChange. We have provided the implementation of function handleStatusChange(), which receives the login status (boolean type) and the name of the logged-in user (string type) as arguments, and set the state variables isLogin and loginName to the argument values, respectively.

4.2. Go to class LoginButton. In its render() function, we are rendering a login button with the handler function this.handleClick bound to the onclick event. Implement the function handleClick(): If the input username and password are valid, use this.props.handleStatusChange(xx, yy) received from class Lab7App to update the state variables of Lab7App, where xx equals “true” and yy equals this.props.username received from class Lab7App; otherwise, alert the message “Login failed!” Hint: you can use the provided function checkValid() to check if the input username and password are valid, which returns true if the inputs are included in the predefined array userDB, and returns false, otherwise. Read more about the array find() function at https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Array/find.

4.3. Go to class Lab7App. In the render() function, remove "{/* step 4.3*/}" and add an onClick event handler to the logout button, which is an arrow function ()=>this.handleStatusChange() where handleStatusChange() receives a “false” value and an empty string as arguments.

After this step, when you click the login with incorrect passwords, you will see pages as follows:

when you successfully login:

then clicking logout will lead you to the initial page:

Step 5. Render topics list in class component Contents

Go to class Contents, which has a state of one key-value pair: topics stores the list of topics to be shown on the page, initialized using the given array topicsDB. Complete the render() function of class Contents: within { }, apply map() function on topics to create a number of

elements, each presenting information of one topic in the topics array as

Section: {topic.section}; Topic Name: {topic.topic}

. The handler function handleTopicsChange() is to change the state variable topics upon selecting a different option in the drop-down list (to be implemented later).

After this step, you will see the topics list shown up on the page:

Step 6. Render a drop-down list in function component DropDownList

Now go to function DropDownList, which receives the handler function handleTopicsChange of class Contents in its props. Complete its render() function as follows: remove "{/* step 6*/}", and in its place, create a drop-down list using the element with four options (with values “all”, “section-1”, “section-2” and “section-3”, respectively). The option “all” should be associated with the attribute “selected” as the default option. Add an event handler function to onChange event on the element (to track the change of selected option and update topics list accordingly), which should be e => props.handleTopicsChange(e.target.value).

After this step, you will see the drop-down list above the topics list, but the topics list will not change according to different options selected yet.

Step 7. Implement filtering of topics list

Now implement the function handleTopicsChange() in class Contents as follows: if value of the argument option is not “all” (i.e., it is one of the three sections instead), apply filter() function on topicsDB to obtain a filtered topics array where each topic’s section is option (learn more about JavaScript Array filter method at https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), and set the state variable Topics to be the filtered array; otherwise, set the state variable Topics to be topicsDB. Note that you need to use this.setState() to change a state variable’s value.

After this step, when you select one section from the drop-down list, the topics list will change accordingly:

Congratulations! Now you have finished Lab 7. You should test the page and the final results should look similar to the screenshots at the beginning of this document.