micah.monfrini.atx.advanced1

README.md

@@ -1,42 +1,40 @@
 ### Setup
 * From address book directory, run yarn install, yarn start
 
-### Do
-* Import the array of users into index.js
+### Do: COMPLETE
+<!-- * 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
-
-### 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”
+* Send the first user from the array down into the UserDetail component -->
+
+### Do: COMPLETE
+<!-- * 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” -->
+
+### Do: COMPLETE
+<!-- * 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 -->
+
+### Do: COMPLETE
+<!-- * 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 -->
+
+### Do: COMPLETE
+<!-- * Add onChange to text box
+* In onChange handler function, setState the searchText to the value from the textbox -->
 
 ### 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
-
-### 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
-
-### Do
-* Add onChange to text box
-* 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
+<!-- * 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
-
-

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.css → src/components/App.css

@@ -18,6 +18,31 @@
   font-size: large;
 }
 
+.Main-container {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  height: 300px;
+}
+
+.Section-content {
+  width: 300px;
+  height: 100px;
+  color: red;
+}
+
+.Footer-container {
+  width: 100%;
+  height: 200px;
+  background-color: grey;
+}
+
+.Footer-text {
+  padding-top: 60px;
+  font-size: 70px;
+  font-weight: 600;
+}
+
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }

src/components/App.js

@@ -0,0 +1,25 @@
+import React from "react";
+import "./App.css";
+import Header from "./Header";
+import Main from "./Main";
+import PropTypes from "prop-types";
+
+function App(props) {
+  return (
+    <div className="App">
+      <Header />
+      <Main
+        users={props.users}
+        userSelect={props.userSelect}
+        currentUser={props.currentUser}
+      />
+    </div>
+  );
+}
+
+App.propTypes = {
+  userSelect: PropTypes.func.isRequired,
+  users: PropTypes.array.isRequired
+};
+
+export default App;

src/components/Footer.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+function Footer() {
+  return (
+    <div className="Footer-container">
+      <p className="Footer-text">
+        THE END
+      </p>
+    </div>
+  );
+}
+
+export default Footer;

src/components/Header.js

@@ -0,0 +1,12 @@
+import React from "react";
+import logo from "./logo.svg";
+
+function Header() {
+  return (
+    <div className="App-header">
+      <img src={logo} className="App-logo" alt="logo" />
+      <h2>Welcome to React</h2>
+    </div>
+  );
+}
+export default Header;

src/components/Intro.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Intro() {
+  return (
+    <p className="App-intro">
+      To get started, edit <code>src/App.js</code> and save to reload.
+    </p>
+  );
+}
+
+export default Intro;

src/components/ListOfUsers.js

@@ -0,0 +1,67 @@
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import UserDetail from "./UserDetail";
+
+class ListOfUsers extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: true,
+      searchText: "",
+      letters: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
+        "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
+    };
+  }
+
+  handleClick() {
+    this.setState({
+      visible: !this.state.visible
+    });
+  }
+
+  render() {
+    const renderLetters = (users, letters) => letters.map((letter, index) => {
+      if (this.state.visible) {
+        return (
+          <ul key={index}>
+            <h1>{letter}</h1>
+            { users.map((user, index) => {
+              return (user.lastName.substring(0, 1).toUpperCase() === letter) ?
+                <UserDetail key={index} user={user} /> : null;
+            })}
+          </ul>
+        );
+      } else {
+        return null;
+      }
+    });
+
+    return (
+      <div>
+        <form>
+          <input
+            type="text"
+            label="Search"
+            value={this.state.searchText}
+            onChange={(event) => {
+              this.setState({
+                searchText: event.target.value
+              });
+            }}
+          />
+        </form>
+        {renderLetters && renderLetters(this.props.users, this.state.letters)}
+        <button
+          onClick={this.handleClick.bind(this)}>
+          {this.state.visible ? "Hide" : "Show"}
+        </button>
+      </div>
+    );
+  }
+}
+
+ListOfUsers.propTypes = {
+  users: PropTypes.array.isRequired
+};
+
+export default ListOfUsers;

src/components/Main.js

@@ -0,0 +1,27 @@
+import React from "react";
+import Section1 from "./Section1";
+import Section2 from "./Section2";
+import PropTypes from "prop-types";
+
+function Main(props) {
+  return (
+    <div className="Main-container">
+      <Section1
+        users={props.users}
+        userSelect={props.userSelect}
+        currentUser={props.currentUser}
+      />
+      <Section2
+        users={props.users}
+      />
+    </div>
+  );
+}
+
+Main.propTypes = {
+  userSelect: PropTypes.func.isRequired,
+  user: PropTypes.object,
+  users: PropTypes.array.isRequired
+};
+
+export default Main;

src/components/Section1.js

@@ -0,0 +1,22 @@
+import React from "react";
+import ListOfUsers from "./ListOfUsers";
+import PropTypes from "prop-types";
+
+function Section1(props) {
+  return (
+    <div className="Section-content">
+      <ListOfUsers
+        users={props.users}
+        userSelect={props.userSelect}
+        currentUser={props.currentUser}
+      />
+    </div>
+  );
+}
+
+Section1.propTypes = {
+  userSelect: PropTypes.func,
+  users: PropTypes.array.isRequired
+};
+
+export default Section1;

src/components/Section2.js

@@ -0,0 +1,16 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function Section2() {
+  return (
+    <div className="Section-content">
+      stuff
+    </div>
+  );
+}
+
+Section2.propTypes = {
+  users: PropTypes.array.isRequired
+};
+
+export default Section2;

src/components/Section3.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+function Section3(props) {
+  return (
+    <div className="Section-content">
+      <p>
+        {props.user.firstName} {props.user.lastName}
+      </p>
+    </div>
+  );
+}
+
+export default Section3;

src/components/UserDetail.js

@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function UserDetail(props) {
+  const firstName = (props.user.firstName);
+  const lastName = (props.user.lastName);
+  return (
+    <ul>
+      <li>{firstName} {lastName}</li>
+    </ul>
+  );
+}
+
+UserDetail.propTypes = {
+  user: PropTypes.object.isRequired
+};
+
+export default UserDetail;

src/index.js

@@ -1,13 +1,23 @@
 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";
 
+let currentUser;
+
+function selectUser(user) {
+  currentUser = user;
+  return currentUser;
+}
 
 function render() {
   ReactDOM.render(
-    <App />,
+    <App
+      users={users}
+      userSelect={selectUser}
+      currentUser={currentUser}
+    />,
     document.getElementById("root")
   );
 }