Ericka Barnes-Emery (advanced)

README.md

@@ -2,41 +2,39 @@
 * From address book directory, run yarn install, yarn start
 
 ### Do
-* Import the array of users into index.js
-* Create a folder in src called components to hold all our components
-* Create the UserDetail and ListOfUsers functional components
-* Import and use components in App
-* Send the user array into Apps and then into ListOfUsers
-* Send the first user from the array down into the UserDetail component
+* DONE--- Import the array of users into index.js
+* DONE--- Create a folder in src called components to hold all our components
+* DONE--- Create the UserDetail and ListOfUsers functional components
+* DONE--- Import and use components in App
+* DONE--- Send the user array into Apps and then into ListOfUsers
+* DONE--- Send the first user from the array down into the UserDetail component
 
 ### Do
-* Add a button to the ListOfUsers component that says Hide
-* Add an onClick to the button and a handler
-* Make clicking the button hide the list and change the text to “Show”
-* If you click it again it will show the list and change the text back to “Hide”
+* DONE--- Add a button to the ListOfUsers component that says Hide
+* DONE--- Add an onClick to the button and a handler
+* DONE--- Make clicking the button hide the list and change the text to “Show”
+* DONE--- If you click it again it will show the list and change the text back to “Hide”
 
 ### Do
-* Change ListOfUsers to be a class component
-* Add a constructor
-* Add a property called “state” that is an object
-* Add a property on the state object called "visible"
-* Add a method called “render” that returns the jsx the function returned
+*  DONE--- Change ListofUsers to be a class component
+*  DONE--- Add a constructor
+*  DONE--- Add a property called “state” that is an object
+*  DONE--- Add a property on the state object called "visible"
+*  DONE--- Add a method called “render” that returns the jsx the function returned
 
 ### Do
-* Add text box anywhere to ListOfUsers with a label “Search”
-* In ListOfUsers add a state property “searchText”, default to “”
-* Assign searchText to the value attribute of the text box
+* DONE--- Add text box anywhere to ListOfUsers with a label “Search”
+* DONE--- In ListOfUsers add a state property “searchText”, default to “”
+* DONE--- Assign searchText to the value attribute of the text box
 
 ### Do
-* Add onChange to text box
-* In onChange handler function, setState the searchText to the value from the textbox
+* DONE--- Add onChange to text box
+* DONE--- In onChange handler function, setState the searchText to the value from the textbox
 
 ### Do
-* Create a variable called currentUser in index.js. 
-* Define a function in index.js called selectUser that will take a user as a parameter and then set that user as the currentUser.
-* Send this function down the child tree so that ListOfUsers can call it
-* Change index.js to send currentUser down the child tree instead of App.js hard coding the first one
+* DONE--- Create a variable called currentUser in index.js.
+* DONE--- Define a function in index.js called selectUser that will take a user as a parameter and then set that user as the currentUser.
+* DONE--- Send this function down the child tree so that ListOfUsers can call it
+* DONE--- Change index.js to send currentUser down the child tree instead of App.js hard coding the first one (app should give currentUser to UserDetail)
 * Register click event for ListOfUsers view link, call the function sent into props by parents, supply the argument of whatever user was clicked on.
 * Re render the components
-
-

src/App.js

@@ -1,17 +1,22 @@
 import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
+import ListofUsers from "./components/ListofUsers"
+import UserDetail from "./components/UserDetail"
 
-function App() {
+
+function App(props) {
   return (
     <div className="App">
       <div className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <h2>Welcome to React</h2>
+        <h2>React Address Book</h2>
+      </div>
+      <div>
+      <br></br>
+      <ListofUsers users={props.users}/>
+      <UserDetail user={props.users[0]}/>
       </div>
-      <p className="App-intro">
-        To get started, edit <code>src/App.js</code> and save to reload.
-      </p>
     </div>
   );
 }

src/components/ListofUsers.js

@@ -0,0 +1,56 @@
+import React from 'react';
+
+// I need props to have a property called users
+// and it needs to be an array of user objects
+
+class ListofUsers extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      visible: true,
+      searchText: "",
+    };
+  }
+  render() {
+    const users = this.props.users;
+    let userDivs = "";
+    if (this.state.visible) {
+      userDivs = users.map(function (user, i) {
+        return <div key={i}> {user.first_name} </div>;
+      });
+    }
+    else{
+      userDivs = "";
+    }
+
+    return (
+      <div className="ListofUsers">
+        <input
+         onChange={
+           (e) => {
+             this.setState({
+             searchText: e.target.value
+            });
+           }
+         }
+        value={this.state.searchText}>
+        </input>
+      <button onClick={
+        (e) => {
+          var state = {
+            visible: !this.state.visible
+          };
+          this.setState(state);
+        }
+      }
+
+      type="button">Hide</button>
+      {userDivs}
+      </div>
+    );
+  }
+}
+
+// same thing as HW 1, importing map function as a variable.
+
+export default ListofUsers;

src/components/UserDetail.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+function UserDetail(props) {
+  return (
+    <div>
+        <h1>{props.user.first_name} {props.user.last_name}</h1>
+        <div>{props.user.address}</div>
+        <div>{props.user.phone}</div>
+        <div>{props.user.occupation}</div>
+        <div><img src={props.user.avatar} /></div>
+    </div>);
+}
+
+export default UserDetail;

src/index.js

@@ -4,11 +4,22 @@ import App from "./App";
 import "./index.css";
 import users from "./users";
 
+let currentUser = "";
+
+function selectUser(user) {
+  currentUser = user;
+  render();
+};
 
 function render() {
   ReactDOM.render(
-    <App />,
+    <App users={users}
+    selectUser={selectUser}
+    user={currentUser}
+    />,
     document.getElementById("root")
   );
 }
 render();
+
+export default selectUser;