diff --git a/README.md b/README.md
index 9c7fd665..fa60f8c3 100644
--- a/README.md
+++ b/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
+
+
+### Do: COMPLETE
+
+
+
+
+
+### Do: COMPLETE
+
+
+
+
+
+
+### Do: COMPLETE
+
+
+
+### Do: COMPLETE
+
### 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
+
+
+
* 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
-
-
diff --git a/package.json b/package.json
index a449367b..cb655ff4 100644
--- a/package.json
+++ b/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"
}
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 0042c777..00000000
--- a/src/App.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import logo from "./logo.svg";
-import "./App.css";
-
-function App() {
- return (
-
-
-
-
Welcome to React
-
-
- To get started, edit src/App.js and save to reload.
-
-
+
+
+ );
+}
+
+App.propTypes = {
+ userSelect: PropTypes.func.isRequired,
+ users: PropTypes.array.isRequired
+};
+
+export default App;
diff --git a/src/App.test.js b/src/components/App.test.js
similarity index 100%
rename from src/App.test.js
rename to src/components/App.test.js
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 00000000..9b667e3f
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+function Footer() {
+ return (
+
+ );
+}
+
+export default Footer;
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 00000000..485549a3
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,12 @@
+import React from "react";
+import logo from "./logo.svg";
+
+function Header() {
+ return (
+
+
+
Welcome to React
+
+ To get started, edit src/App.js and save to reload.
+
+ );
+}
+
+export default Intro;
diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
new file mode 100644
index 00000000..f4059282
--- /dev/null
+++ b/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 (
+
+ {letter}
+ { users.map((user, index) => {
+ return (user.lastName.substring(0, 1).toUpperCase() === letter) ?
+
+ );
+ } else {
+ return null;
+ }
+ });
+
+ return (
+
+
+ {renderLetters && renderLetters(this.props.users, this.state.letters)}
+
+ {this.state.visible ? "Hide" : "Show"}
+
+
+ );
+ }
+}
+
+ListOfUsers.propTypes = {
+ users: PropTypes.array.isRequired
+};
+
+export default ListOfUsers;
diff --git a/src/components/Main.js b/src/components/Main.js
new file mode 100644
index 00000000..7824d6ac
--- /dev/null
+++ b/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 (
+
+
+ );
+}
+
+Main.propTypes = {
+ userSelect: PropTypes.func.isRequired,
+ user: PropTypes.object,
+ users: PropTypes.array.isRequired
+};
+
+export default Main;
diff --git a/src/components/Section1.js b/src/components/Section1.js
new file mode 100644
index 00000000..5d4e3879
--- /dev/null
+++ b/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 (
+
+
+ );
+}
+
+Section1.propTypes = {
+ userSelect: PropTypes.func,
+ users: PropTypes.array.isRequired
+};
+
+export default Section1;
diff --git a/src/components/Section2.js b/src/components/Section2.js
new file mode 100644
index 00000000..d7a97638
--- /dev/null
+++ b/src/components/Section2.js
@@ -0,0 +1,16 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function Section2() {
+ return (
+
+ stuff
+
+ );
+}
+
+Section2.propTypes = {
+ users: PropTypes.array.isRequired
+};
+
+export default Section2;
diff --git a/src/components/Section3.js b/src/components/Section3.js
new file mode 100644
index 00000000..20ed906b
--- /dev/null
+++ b/src/components/Section3.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+function Section3(props) {
+ return (
+
+
+ {props.user.firstName} {props.user.lastName}
+
+
+ {firstName} {lastName}
+
+ );
+}
+
+UserDetail.propTypes = {
+ user: PropTypes.object.isRequired
+};
+
+export default UserDetail;
diff --git a/src/logo.svg b/src/components/logo.svg
similarity index 100%
rename from src/logo.svg
rename to src/components/logo.svg
diff --git a/src/index.js b/src/index.js
index 8e6bfe35..14ca50d5 100644
--- a/src/index.js
+++ b/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(
- 
-