russ.savage.atx.advanced.1

package.json

@@ -12,8 +12,10 @@
   "dependencies": {
     "foreman": "^2.0.0",
     "json-server": "^0.9.4",
+    "prop": "^0.1.1",
     "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "react-dom": "^15.3.2",
+    "types": "^0.1.1"
   },
   "scripts": {
     "start": "nf start",
@@ -24,5 +26,5 @@
     "test": "npm run lint && react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy" : "http://localhost:3001"
+  "proxy": "http://localhost:3001"
 }

src/App.css → src/components/App.css

@@ -22,3 +22,10 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.Grey-back {
+  background-color: #999;
+  height: 70px;
+  color: blue;
+  padding-top: 10px;
+}

src/components/App.js

@@ -0,0 +1,31 @@
+import React from "react";
+import logo from "./logo.svg";
+import "./App.css";
+import ListOfUsers from "./ListOfUsers";
+import UserDetails from "./UserDetails";
+import PropTypes from "prop-types";
+
+
+
+function App(props) {
+
+  return (
+    <div className="App">
+      <div className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+      </div>
+      <div className="App-intro">
+        <h2>User List</h2>
+        <ListOfUsers arrayOfUsers={props.arrayOfUsers} />
+        <hr /><h2>User Details</h2><hr />
+        <UserDetails arrayOfUsers={props.arrayOfUsers} />
+      </div>
+    </div>
+  );
+}
+
+App.propTypes = {
+  arrayOfUsers: PropTypes.array
+};
+
+export default App;

src/components/Button.js

@@ -0,0 +1,15 @@
+import React, {Component} from "react";
+
+class Button extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <button>Show/Hide</button>
+    );
+  }
+}
+
+export default Button;

src/components/Component2.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+
+export default class Component2 extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Component2</h1>
+      </div>
+    );
+  }
+}

src/components/ListOfUsers.js

@@ -0,0 +1,61 @@
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+
+class ListOfUsers extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      buttonClicked: false
+    };
+  }
+
+  handleUserClick(event) {
+    console.log("Handle Click", event);
+
+    this.setState({
+      buttonClicked: !this.state.buttonClicked
+    });
+  }
+
+  render() {
+    if (!this.state.buttonClicked) {
+      return (
+        <div>
+          <hr />
+          {this.props.arrayOfUsers.map(user => {
+            return (
+              <p key={user.id} onClick={this.handleUserClick.bind(this)} > {user.firstName} </p>
+            );
+          })}
+        </div>
+      );
+    }
+    return (
+      <div>
+        <button onClick={this.handleUserClick.bind(this)}>
+          {this.state.buttonClicked ? "Show Names" : "Hide Names"}
+        </button>
+      </div>
+    );
+  }
+}
+
+// commented out old functional component once class component was built
+// function ListOfUsers(props) {
+//   return (
+//     <div>
+//       <hr />
+//       {props.arrayOfUsers.map(user => {
+//         return (
+//           <p key={user.id}> {user.firstName} </p>
+//         );
+//       })}
+//     </div>
+//   );
+// }
+
+ListOfUsers.propTypes = {
+  arrayOfUsers: PropTypes.array.isRequired
+};
+
+export default ListOfUsers;

src/components/UserDetails.js

@@ -0,0 +1,30 @@
+import React from "react";
+import * as Helpers from "../constants";
+import PropTypes from "prop-types";
+
+
+function UserDetails(props) {
+  // const selectUser = (array, index) => array[index];
+  // commented out and saved in my "constants" folder
+  const {firstName, lastName, phone, address, occupation, avatar} =
+  Helpers.selectUser(props.arrayOfUsers, 0);
+  return (
+    <div>
+      <img src={avatar} />
+      <p>{firstName}</p>
+      <p>{lastName}</p>
+      <p>{phone}</p>
+      <p>{address}</p>
+      <p>{occupation}</p>
+    </div>
+  );
+}
+
+UserDetails.propTypes = {
+  arrayOfUsers: PropTypes.shape({
+    firstName: PropTypes.string.isRequired,
+    lastName: PropTypes.string.isRequired,
+  })
+};
+
+export default UserDetails;

src/constants/index.js

@@ -0,0 +1,2 @@
+export const selectUser = (array, index) => array[index];
+export const log = a => console.log(a);

src/index.js

@@ -1,13 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import App from "./components/App";
 import "./index.css";
 import users from "./users";
 
 
 function render() {
   ReactDOM.render(
-    <App />,
+    <App arrayOfUsers={users} />,
     document.getElementById("root")
   );
 }