In-Class exercise: React Components

1. This is an extension of the exercise from last class. The instructions were to:

   Create one component that is responsible for displaying the people list as a whole, and then a second component that is responsible for displaying the person in each row.

   We're shooting for generating something like:
   

    

   You may either:

   • Use your project from last class as-is, or
   • Create a new React project and use the following starter code:

     App.js (note that it's missing the code for the People Component):

     import './App.css';
     
     const data = [
         {
             id: "1276",
             name: "Neil Rhodes",
             email: "rhodes@hmc.edu",
             phone: "(909) 555-1212"
         },
         {
             id: "787",
             name: "Barack Obama",
             email: "ex-prez@whitehouse.gov",
             phone: "(312) 555-1212"
         }
     ];
     
     function Person(props) {
         return <div className="person"}>
             <div className="name">{props.name}</div>
             <div className="email">{props.email}</div>
             <div className="phone">{props.phone}</div>
         </div>
     }
     
     
     function App() {
         return <div>
             <People list={data}/>
         </div>;
     }
     
     export default App;
     

     App.css:

     
     .person {
       display: flex;
       width: 400pt;
       justify-content: space-between;
     }
     
     .name {
       font-weight: bold;
     }
     
     .email {
       font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
     }
     

   At this point, you should have an app that is displaying each person using two components: one for the list, and one for each row.

2. Now, support selecting a row. This'll require setting up state in some component. Which one?
   1. Modify that component to support selecting a row (and thereby deselecting other rows) by clicking on it. (If a row is already selected, clicking on it should do nothing.)

      Hint: In React, you can specify an onClick attribute for a component whose value is a JavaScript callback function. When the component, or some descendant of the component, is clicked, this callback function will be called with an event, e.

   2. Modify the header above the list that says "People" to instead say "People (numSelected/totalNum selected)" where the total number of people, and the number that are selected are calculated based on the current data. As an example, it might say "People (1/2 selected)", or "People (0/2 selected)", or (if you add more people to the data array): "People (1/5 selected)".

   3. Implement some mechanism for showing the selection (highlight the row by, for example, adding a border or a background color).

      Hint: In JavaScript, if a is an array of strings ["red", "green", "blue"], then a.join(" ") yields "red green blue".

3. Make the highlighting obnoxious by blinking the row. It can be done using animation from CSS, but we're not going to do that in this exercise. Instead, setup a JavaScript timer to flip the opacity between 100% and 50% every second (actually, to change the CSS class every second causing the opacity to change).

   Hint: Add a useEffect hook.

4. Challenge: support multiple selection: If the shift-key is down when a row is clicked, toggle the selected state of that row.

   Hint: DOM events contain a shiftKey boolean attribute.