functional, needs a little tidying

package.json

@@ -3,17 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "babel-eslint": "^7.1.1",
-    "eslint": "^3.14.0",
+    "babel-eslint": "^7.0.0",
+    "eslint": "^3.8.1",
     "eslint-plugin-babel": "^4.0.1",
-    "eslint-plugin-react": "^6.9.0",
-    "react-scripts": "0.7.0"
+    "eslint-plugin-react": "^6.4.1",
+    "react-scripts": "^0.7.0"
   },
   "dependencies": {
     "foreman": "^2.0.0",
     "json-server": "^0.9.4",
-    "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "react": "^15.6.1",
+    "react-dom": "^15.3.2",
+    "react-select": "^1.0.0-rc.5"
   },
   "scripts": {
     "start": "nf start",
@@ -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,8 +1,33 @@
 import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
+import ListOfUsers from './components/ListOfUsers';
+import UserDetail from './components/UserDetail';
+import Select from 'react-select';
+import SelectCont from './components/SelectCont';
+import courses from "./courses"
 
-function App() {
+<<<<<<< HEAD
+
+function App(props) {
+=======
+let days = [
+      {value:"M", label:"MON-WENS"}, 
+      {value:"T",label:"TUES-THURS"},
+      {value:"W", label:"WENS-FRI"},
+      {value:"S",label:"SAT"}
+    ];
+>>>>>>> 05556120e7ebd366568f7292041d48bdae49cbd6
+
+function App(props) {
+
+  // let names = props.users.map((x) => {
+  //   return {
+  //     value:x.first_name, 
+  //     label:x.first_name
+  //   }
+  //   });
+
   return (
     <div className="App">
       <div className="App-header">
@@ -12,6 +37,10 @@ function App() {
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
+       <ListOfUsers users={props.users} getUser={props.getUser} /> 
+       console.log(props)
+         <UserDetail user={props.curUser} />
+         <SelectCont />
     </div>
   );
 }

src/components/Button.js

@@ -0,0 +1,27 @@
+import React from 'react';
+export default class Button extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {showing: true};
+
+    // This binding is necessary to make `this` work in the callback
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    this.setState(prevState => ({
+      showing: !prevState.showing
+    }));
+  }
+
+  render() {
+    // let buttonVal =
+    //   this.state.showing ? 'Hide' : 'Show';
+    return (
+      <button onClick={this.handleClick}>
+        {this.state.showing ? 'Hide' : 'Show'}
+      </button>
+    );
+  }
+}

src/components/ListOfUsers.js

@@ -0,0 +1,65 @@
+import React from 'react';
+// import Button from './Button.js';
+// import users from '../users';
+
+export default class ListOfUsers extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+		    visible: true,
+			searchText: ''
+        }
+
+		this.onClick = this.onClick.bind(this); 
+        this.handleChange = this.handleChange.bind(this);
+        this.userClick = this.userClick.bind(this);
+   }
+    onClick()  {
+			if(document.getElementById('list').style.display === (""||'none')){
+				document.getElementById('list').style.display = 'block';
+			}else{
+				document.getElementById('list').style.display = 'none';
+			}
+        this.setState({
+            visible: this.state.visible ? false : true
+				})
+
+			}
+
+	handleChange(e) {
+			this.setState({
+				searchText: e.target.value
+			})
+        }
+
+    userClick(e) {
+       console.log(e.target);
+        let user = this.props.users.filter(function(x){ 
+            return x.first_name === e.target.innerHTML;
+        })
+        console.log(user[0]);
+        this.props.getUser(user);
+    }
+    render(){
+
+
+			 let show = this.state.visible ? 'Hide' : 'Show';
+		var filterUsers = this.props.users.filter((u)=>{
+                // if(this.state.searchText == ""){
+                //     return true;
+                // }
+                return u.first_name.indexOf(this.state.searchText) > -1 ? true : (this.state.searchText == "" ? true : false);
+            })
+            let userAr = filterUsers.map((x,i) => <div key={i}><a href='#' onClick={(e) =>{this.userClick(e)}}>{x.first_name}</a></div>);		
+             return(
+                <div>
+                    <input type='text' label='search' defaultValue='Search' onChange={(e)=>{this.handleChange(e)}}></input>
+                    <br />
+                    <button id='display' onClick={this.onClick}>{show}</button> 
+                    <div id='list'>{userAr}</div>
+                </div>
+			);
+
+
+    }
+}

src/components/SelectCont.js

@@ -0,0 +1,27 @@
+import React from "react";
+import {Component} from "react";
+import Select from 'react-select';
+import courses from "../courses";
+
+let days = [
+      {value:"M", label:"MON-WENS"}, 
+      {value:"T",label:"TUES-THURS"},
+      {value:"W", label:"WENS-FRI"},
+      {value:"S",label:"SAT"}
+    ];
+
+
+export default function SelectCont(props){
+
+  return(<div>
+    <input type="checkbox" value="off" label="M-W">MonWed</input>
+      <Select 
+      options={days}
+       />
+    </div>
+  )};
+
+
+//import Select from "react-select";
+
+//filter the options based on buttons, build the array to send to the select element. 

src/components/UserDetail.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export default function UserDetail(props){
+ if(props.user){
+    let person = props.user;
+    console.log(person);
+    let personKeys = Object.keys(person[0]).slice(1,6);
+    console.log(personKeys);
+    let pic = person[0].avatar;
+   console.log(person);
+   console.log(pic);
+
+  let profile = personKeys.map(key => <div key={key}>{key}: {person[0][key]}</div>)
+
+    return (
+    <div className='profile'>
+        <img src={pic} className='thumbnail' alt="log" />
+        {profile}
+    </div>);
+}else{
+    return null;
+}
+
+
+
+
+{//   return 
+
+//   (  
+
+//     <div> 
+//         <img className='thumbnail' src={pic} alt='logo' />
+//         <div className='profile'>{list}</div>)
+//   </div>);
+}
+  }

src/courses.js

@@ -0,0 +1,86 @@
+let courses = [
+  {
+    location: "Dallas",
+<<<<<<< HEAD
+    days: ["Mon", "Wed"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "San Antonio",
+    days: ["Mon","Tue","Wed","Thu"],
+    course: "Dot-Net",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "San-Antonio",
+    days: ["Mon", "Wed"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "Austin",
+    days: ["Tue","Thu"],
+    course: "Web-VR",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "Dallas",
+    days: ["Tue","Thu"],
+    course: "Web-VR",
+    startDate: new dateTime(9/15/17)},
+  {
+    location: "Austin",
+    days: ["Tue","Thu"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)},
+  {
+    location: "Austin",
+    days: ["Mon", "Wed","Tue","Thu"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)
+=======
+    days: ["M"],
+    course: "Full-Stack",
+    startDate: "9/3/17"
+  }, {
+    location: "San Antonio",
+    days: ["M","T"],
+    course: "Dot-Net",
+    startDate: "9/20/17"
+  }, {
+    location: "San-Antonio",
+    days: ["M"],
+    course: "Full-Stack",
+    startDate: "9/15/17"
+  }, {
+    location: "Austin",
+    days: ["T"],
+    course: "Web-VR",
+    startDate: "9/3/17"
+  }, {
+    location: "Dallas",
+    days: ["T"],
+    course: "Web-VR",
+    startDate: "9/20/17"
+  },
+    {
+    location: "Austin",
+    days: ["T"],
+    course: "Full-Stack",
+    startDate: "9/15/17"
+  },{
+    location: "Austin",
+    days: ["S"],
+    course: "Full-Stack",
+    startDate: "9/3/15"
+>>>>>>> 05556120e7ebd366568f7292041d48bdae49cbd6
+  },
+
+
+]
+<<<<<<< HEAD
+=======
+
+export default courses;
+>>>>>>> 05556120e7ebd366568f7292041d48bdae49cbd6

src/index.css

@@ -3,3 +3,28 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+#list{
+  display:block;
+
+}
+
+.thumbnail {
+  margin: 5px;
+  height: 8rem;
+  width: 6rem;
+  border: blue 2px;
+  box-shadow: blanchedalmond, 0342, 2349;
+
+}
+
+.profile {
+  margin: 7px;
+  background-color: lightcoral;
+  font-family: 'Times New Roman', Times, serif;
+  color: purple;
+  display: flex;
+  flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+}

src/index.js

@@ -1,13 +1,23 @@
+
+
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import "./index.css";
 import users from "./users";
+import 'react-select/dist/react-select.css';
 
+let currentUser;
+
+function selectUser(user) {
+  currentUser = user;
+  console.log(currentUser);
+  render();
+}
 
 function render() {
   ReactDOM.render(
-    <App />,
+    <App users={users} getUser={selectUser} curUser={currentUser} />,
     document.getElementById("root")
   );
 }