Merge pull request #34 from FACN1/Feature/SelectGHouse

Feature/select g house

Author: jbesraa

src/components/search_bar.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const SearchButton = (props) => {
+  const handle = () => {
+    props.clickHandler(props.currentGHouse);
+  };
+
+  return (
+    <button onClick={handle}>{props.currentGHouse}</button>
+  );
+};
+export default SearchButton;

src/components/search_button.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import SearchButton from './search_button.jsx';
+
+const SearchList = props =>
+  (
+    <div>
+      {props.db.map(guestHouses =>
+        // const boundItemClick = handleClick.bind(this, guestHouses.name);
+        <SearchButton
+          key={guestHouses.name}
+          clickHandler={props.updateCurrent}
+          currentGHouse={guestHouses.name}
+        />,
+      )}
+    </div>
+  );
+
+export default SearchList;

src/components/search_list.jsx

@@ -3,20 +3,37 @@ import axios from 'axios';
 
 import Header from '../components/header.jsx';
 import TextBox from '../components/text_box.jsx';
-import SearchBar from '../components/search_bar.jsx';
+import SearchList from '../components/search_list.jsx';
 
 
 class SelectGuesthouse extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      db: {},
+      title: 'PAS',
+      tagLine: 'Park & Sleep',
+      guestHouseList: [],
+      currentGuestHouse: {},
     };
+    this.currentGuestHouse = this.currentGuestHouse.bind(this);
+  }
+
+  currentGuestHouse(guestHouse) {
+    const current = this.state.db.filter((GHouse) => {
+      if (GHouse.name === guestHouse) {
+        return GHouse;
+      }
+      return current;
+    });
+    this.setState({
+      currentGuestHouse: current,
+    });
   }
 
   componentDidMount() {
     axios.get('/api')
     .then((res) => {
+      // console.log(res.data);
       this.setState({ db: res.data });
     });
   }
@@ -26,7 +43,9 @@ class SelectGuesthouse extends Component {
       <div>
         <Header />
         <TextBox />
-        <SearchBar guesthouses={this.state.db} />
+        <SearchList
+          db={this.state.guestHouseList}
+          updateCurrent={this.currentGuestHouse} />
       </div>
     );
   }