james.puckett.atx.advanced1

README.md

@@ -32,11 +32,12 @@
 * In onChange handler function, setState the searchText to the value from the textbox
 
 ### Do
-* Create a variable called currentUser in index.js. 
+* 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
 * 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
 
 
+James Puckett

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "foreman": "^2.0.0",
     "json-server": "^0.9.4",
+    "prop-types": "^15.5.8",
     "react": "^15.3.2",
     "react-dom": "^15.3.2"
   },
@@ -24,5 +25,5 @@
     "test": "npm run lint && react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy" : "http://localhost:3001"
+  "proxy": "http://localhost:3001"
 }

src/App.js

@@ -1,17 +1,13 @@
 import React from "react";
-import logo from "./logo.svg";
 import "./App.css";
+import ListOfUsers from "./components/ListOfUsers";
 
-function App() {
+
+function App(props) {
+	// console.log(props);
   return (
     <div className="App">
-      <div className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <h2>Welcome to React</h2>
-      </div>
-      <p className="App-intro">
-        To get started, edit <code>src/App.js</code> and save to reload.
-      </p>
+      <ListOfUsers users={props.users} />
     </div>
   );
 }

src/components/ListOfUsers.js

@@ -0,0 +1,47 @@
+import React from "react";
+// import PropTypes from "prop-types";
+import UserDetail from "./UserDetail";
+import UserDivs from "./UserDivs";
+
+
+class ListOfUsers extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      wasClicked: false,
+      visible: false,
+    };
+  }
+  handleButtonClick(event) {
+    console.log("handle click", event);
+
+    this.setState({
+      wasClicked: !this.state.wasClicked,
+    });
+  }
+  handleUserClick(event) {
+    console.log("user", event, this);
+//    this.setState({
+//      idOfUser: this.id,
+//    });
+  }
+  render() {
+    const users = this.props.users;
+    return (
+      <div>
+        <div>
+          <button onClick={this.handleButtonClick.bind(this)}>{this.state.wasClicked ? "Hide" : "Show"}</button>
+          {this.state.wasClicked && <UserDivs props={users} />}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ListOfUsers;
+
+// ListOfUsers.propTypes = {
+//  user: PropTypes.object.isRequired,
+// };
+
+// <UserDivs />

src/components/UserDetail.js

@@ -0,0 +1,38 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function UserDetail(props) {
+  const {user} = props;
+  const {
+				id,
+				firstName, 
+				lastName, 
+				occupation, 
+				phone, 
+				address, 
+				avatar
+				} = user;
+  return (
+    <div key={id}>
+      <h3>{firstName} {lastName}</h3>
+      <h4>{occupation}</h4>
+      <p>{phone}</p>
+      <p>{address}</p>
+      <img src={avatar} />
+    </div>
+  );
+}
+
+UserDetail.propTypes = {
+  user: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    firstName: PropTypes.string.isRequired,
+    lastName: PropTypes.string.isRequired,
+    address: PropTypes.string.isRequired,
+    phone: PropTypes.number.isRequired,
+    occupation: PropTypes.string.isRequired,
+    avatar: PropTypes.string.isRequired
+  }).isRequired,
+};
+
+export default UserDetail;

src/components/UserDivs.js

@@ -0,0 +1,32 @@
+import React from "react";
+import UserDetail from "./UserDetail";
+
+class UserDivs extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+  handleUserClick(event) {
+    const users = this.props.props;
+    console.log("user", event, users);
+    this.setState({
+      idOfUser: this.id,
+    });
+  }
+  render() {
+    const users = this.props.props;
+    console.log("i got props", users);
+    const userD = users.map((user, index) => {
+      return <div onClick={this.handleUserClick.bind(this)} key={index}>{user.firstName}</div>;
+    });
+    console.log("userD", userD[1]);
+    return (
+      <div>
+        {userD}
+        <UserDetail user={users[0]} />
+      </div>
+    );
+  }
+}
+export default UserDivs;

src/index.js

@@ -7,8 +7,9 @@ import users from "./users";
 
 function render() {
   ReactDOM.render(
-    <App />,
+    <App users={users} />,
     document.getElementById("root")
   );
 }
 render();
+

src/users.js

@@ -1,57 +1,57 @@
 export default [
   {
-    "id": 1,
-    "first_name": "george",
-    "last_name": "bluth",
-    "address": "4116 Magnolia Drive, Portland, ME 04103",
-    "phone": 15551234567,
-    "occupation": "father",
-    "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
+    id: 1,
+    firstName: "george",
+    lastName: "bluth",
+    address: "4116 Magnolia Drive, Portland, ME 04103",
+    phone: 15551234567,
+    occupation: "father",
+    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
   },
   {
-    "id": 2,
-    "first_name": "lucille",
-    "last_name": "bluth",
-    "address": "6428 3rd Street East, Zion, IL 60099",
-    "phone": 15552345678,
-    "occupation": "mother",
-    "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
+    id: 2,
+    firstName: "lucille",
+    lastName: "bluth",
+    address: "6428 3rd Street East, Zion, IL 60099",
+    phone: 15552345678,
+    occupation: "mother",
+    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
   },
   {
-    "id": 3,
-    "first_name": "oscar",
-    "last_name": "bluth",
-    "address": "4797 Sycamore Lane, Dover, NH 03820",
-    "phone": 15553456789,
-    "occupation": "uncle",
-    "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
+    id: 3,
+    firstName: "oscar",
+    lastName: "bluth",
+    address: "4797 Sycamore Lane, Dover, NH 03820",
+    phone: 15553456789,
+    occupation: "uncle",
+    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
   },
   {
-    "id": 4,
-    "first_name": "steve",
-    "last_name": "holt",
-    "address": "3722 Circle Drive, Bristow, VA 20136",
-    "phone": 15554567890,
-    "occupation": "friend",
-    "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
+    id: 4,
+    firstName: "steve",
+    lastName: "holt",
+    address: "3722 Circle Drive, Bristow, VA 20136",
+    phone: 15554567890,
+    occupation: "friend",
+    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
   },
   {
-    "id": 5,
-    "first_name": "gob",
-    "last_name": "bluth",
-    "address": "959 Hilltop Road, Apple Valley, CA 92307",
-    "phone": 15555678901,
-    "occupation": "brother",
-    "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
+    id: 5,
+    firstName: "gob",
+    lastName: "bluth",
+    address: "959 Hilltop Road, Apple Valley, CA 92307",
+    phone: 15555678901,
+    occupation: "brother",
+    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
   },
   {
-    "id": 6,
-    "first_name": "tracey",
-    "last_name": "bluth",
-    "address": "2640 Primrose Lane, Longview, TX 75604",
-    "phone": 15556789012,
-    "occupation": "wife",
-    "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
+    id: 6,
+    firstName: "tracey",
+    lastName: "bluth",
+    address: "2640 Primrose Lane, Longview, TX 75604",
+    phone: 15556789012,
+    occupation: "wife",
+    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
   }
 
 ];