mehmet.sonmezates.atx.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
+*- 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”
+*- 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
-* 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
+*- 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
+*- 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
+*- 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
-
-
+*- 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

src/App.js

@@ -1,17 +1,21 @@
 import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
+import UserDetail from "./components/UserDetail";
+import ListOfUsers from "./components/ListOfUsers";
 
-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>
-      </div>
-      <p className="App-intro">
-        To get started, edit <code>src/App.js</code> and save to reload.
-      </p>
+      <ListOfUsers
+        users={props.users}
+        selectUser={props.selectUser}
+        currentUser={props.currentUser}
+      />
+
+      <UserDetail
+        currentUser={props.currentUser}
+      />
     </div>
   );
 }

src/components/ListOfUsers.js

@@ -0,0 +1,60 @@
+import React from "react";
+
+class ListOfUsers extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      visible: true,
+      searchText: "",
+    }
+  }
+
+  handleClickBtn = () => {
+    this.setState(prevState => {
+      return {
+        visible : !prevState.visible,
+      }
+    });
+  }
+  handleSearchBox = (event) => {
+    this.setState({
+      searchText : event.target.value,
+    });
+  }
+
+  render() {
+    // console.log(this.state.searchText);
+    const filterUsers = this.props.users.filter(u => {
+      if(this.state.searchText === "") {
+        return true;
+      }
+      return u.last_name.indexOf(this.state.searchText) > -1;
+    });
+
+    const userDivs = filterUsers.map(user => {
+      if(this.state.visible) {
+        return (
+          <div key={user.id}>
+            {user.first_name} - {user.last_name}
+            <a href="#" onClick={
+                () => {
+                  this.props.selectUser(user);
+                }
+              }>View</a>
+          </div>);
+      }
+    });
+
+    return (
+      <div>
+        <input label="Search" autoFocus onChange={this.handleSearchBox}/>
+        {userDivs}
+        <button onClick={this.handleClickBtn}>
+          {this.state.visible ? "Hide" : "Show"}
+        </button>
+      </div>
+    );
+  }
+}
+
+export default ListOfUsers;

src/components/UserDetail.js

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

src/index.js

@@ -4,10 +4,20 @@ 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}
+      currentUser={currentUser}
+    />,
     document.getElementById("root")
   );
 }