Search list buttons

database/db_build.js

@@ -16,8 +16,9 @@ MongoClient.connect(DB_URL, (err, db) => {
   });
   // inserts data to the collection
   guestHouse.insert({
-    GuestHouses: {
-      Daher: {
+    GuestHouses: [
+      {
+        id: 0,
         name: 'Daher',
         address: '6098 St 8, Nazareth',
         phone: '052-535-0691',
@@ -32,7 +33,8 @@ MongoClient.connect(DB_URL, (err, db) => {
           longitude: 35.298813,
         },
       },
-      SimSim: {
+      {
+        id: 1,
         name: 'SimSim',
         address: '632 St 3, Nazareth',
         phone: '077-551-7275',
@@ -47,7 +49,8 @@ MongoClient.connect(DB_URL, (err, db) => {
           longitude: 35.298813,
         },
       },
-      Vitrage: {
+      {
+        id: 2,
         name: 'Vitrage',
         address: '6083 St 4, Nazareth',
         phone: '04-601-2130',
@@ -62,7 +65,7 @@ MongoClient.connect(DB_URL, (err, db) => {
           longitude: 35.298813,
         },
       },
-    },
+    ],
   }, (insertErr) => {
     if (insertErr) throw insertErr;
     // searches through the collection to make sure that the data that we inserted is there

mockData.js

@@ -0,0 +1,51 @@
+module.exports =
+[
+  {
+    id: 0,
+    name: 'Daher',
+    address: '6098 St 8, Nazareth',
+    phone: '052-535-0691',
+    coordinates: {
+      latitude: 32.704783,
+      longitude: 35.298489,
+    },
+    parkingLotName: 'Al Mutran Parking',
+    parkingLotAddress: '6100 St, Nazareth',
+    parkingLotCoordinates: {
+      latitude: 32.705329,
+      longitude: 35.298813,
+    },
+  },
+  {
+    id: 1,
+    name: 'SimSim',
+    address: '632 St 3, Nazareth',
+    phone: '077-551-7275',
+    coordinates: {
+      latitude: 32.704375,
+      longitude: 35.298083,
+    },
+    parkingLotName: 'Al Mutran Parking',
+    parkingLotAddress: '6100 St, Nazareth',
+    parkingLotCoordinates: {
+      latitude: 32.705329,
+      longitude: 35.298813,
+    },
+  },
+  {
+    id: 2,
+    name: 'Vitrage',
+    address: '6083 St 4, Nazareth',
+    phone: '04-601-2130',
+    coordinates: {
+      latitude: 32.705086,
+      longitude: 35.298032,
+    },
+    parkingLotName: 'Al Mutran Parking',
+    parkingLotAddress: '6100 St, Nazareth',
+    parkingLotCoordinates: {
+      latitude: 32.705329,
+      longitude: 35.298813,
+    },
+  },
+];

server.js

@@ -1,16 +1,13 @@
-import { matchPath } from 'react-router-dom';
-
 const express = require('express');
 const webpackDevMiddleware = require('webpack-dev-middleware');
 const webpack = require('webpack');
 const path = require('path');
 
 const webpackConfig = require('./webpack.config.js');
-const DB_URL = require('./database/url.js');
-const db = require('./database/db.js');
-const Routes = require('./src/routes.jsx');
+const mockData = require('./mockData.js');
 
 const app = express();
+
 // initiates webapck using your config rules
 const compiler = webpack(webpackConfig);
 
@@ -27,32 +24,12 @@ app.use(webpackDevMiddleware(compiler, {
   historyApiFallback: true,
 }));
 
-// have express parse url and send it to react react-router
-app.get('*', (request, response, next) => {
-  matchPath({ Routes, location: request.url }, () => {
-    response.sendFile(path.resolve(__dirname, 'public', 'index.html'));
-  });
-  next();
-});
 
 app.get('/api', (request, response) => {
-  const data = db.get();
-  let result = {};
-  const guestHouse = data.collection('GuestHouse');
-  guestHouse.find({ }).toArray((error, documents) => {
-    result = documents[0].GuestHouses;
-    response.send(result);
-  });
+  response.send(mockData);
 });
 
 // connects with the database before starting the server
-db.connect(DB_URL, (err) => {
-  if (err) {
-    console.log('Unable to connect to mongo');
-    process.exit(1);
-  } else {
-    app.listen(process.env.PORT || 3000, () => {
-      console.log('Listening on port 3000');
-    });
-  }
+app.listen(process.env.PORT || 3000, () => {
+  console.log('Listening on port 3000');
 });

src/components/search_list.jsx

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+
+class SearchList extends Component {
+  constructor(props) {
+    super(props);
+    this.renderList = this.renderList.bind(this);
+
+    this.state = {};
+  }
+
+  renderList() {
+    return this.props.guesthouses.map(guesthouse =>
+     (
+        <Link to="/method" key={guesthouse.id}>
+          <li>
+            {guesthouse.name}
+          </li>
+        </Link>
+      ),
+    );
+  }
+
+  render() {
+    // console.log(this.props.guesthouses);
+    return (
+      <ul>
+        {this.renderList()}
+        </ul>
+    );
+  }
+}
+
+export default SearchList;

src/containers/select_guesthouse.jsx

@@ -3,18 +3,18 @@ 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: {},
+      db: [],
     };
   }
 
-  componentDidMount() {
+  componentWillMount() {
     axios.get('/api')
     .then((res) => {
       this.setState({ db: res.data });
@@ -26,7 +26,7 @@ class SelectGuesthouse extends Component {
       <div>
         <Header />
         <TextBox />
-        <SearchBar guesthouses={this.state.db} />
+        <SearchList guesthouses={this.state.db} />
       </div>
     );
   }

src/routes.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, browserHistory, Switch } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import SelectGuesthouse from './containers/select_guesthouse.jsx';
 import TravelMethod from './containers/travel_method.jsx';
@@ -11,12 +11,12 @@ import Success from './containers/success.jsx';
 const Routes = () =>
   (
     <Switch>
-      <Route exact path='/method' component={TravelMethod} history={browserHistory} />
-      <Route exact path='/map' component={MapRoute} history={browserHistory} />
-      <Route exact path='/walking' component={WalkingDirections} history={browserHistory} />
-      <Route exact path='/success' component={Success} history={browserHistory} />
-      <Route exact path='/' component={SelectGuesthouse} history={browserHistory} />
-      <Route path='/*' component={SelectGuesthouse} history={browserHistory} />
+      <Route exact path='/method' component={TravelMethod} />
+      <Route exact path='/map' component={MapRoute} />
+      <Route exact path='/walking' component={WalkingDirections} />
+      <Route exact path='/success' component={Success} />
+      <Route exact path='/' component={SelectGuesthouse} />
+      <Route path='/*' component={SelectGuesthouse} />
     </Switch>
   );
 

tests/components.jsx

@@ -1,19 +1,20 @@
 /* eslint-disable import/no-extraneous-dependencies */
 
-// Commented out text is for future reference
-
-// import React from 'react';
+import React from 'react';
 import tape from 'tape';
-// import { shallow } from 'enzyme';
+import { shallow } from 'enzyme';
+
+import SelectGuesthouse from '../src/containers/select_guesthouse.jsx';
+import SearchList from '../src/components/search_list.jsx';
 
 tape('Check tape is working', (t) => {
   t.pass('a message');
   t.end();
 });
 
-// tape('Check that a button is rendered', (t) => {
-//   const wrapper = shallow(<Counter />);
-//
-//   t.equal(wrapper.exists(<button/>), true);
-//   t.end();
-// });
+tape('Check that the SearchList component is rendered', (t) => {
+  const wrapper = shallow(<SelectGuesthouse />);
+
+  t.equal(wrapper.exists(<SearchList />), true);
+  t.end();
+});

webpack.config.js

@@ -2,20 +2,13 @@ const path = require('path');
 
 module.exports = {
   context: path.join(__dirname, 'src'),
-  entry: [
-    './index.jsx',
-  ],
+  entry: './index.jsx',
   output: {
     path: path.join(__dirname, 'public'),
     filename: 'bundle.js',
   },
   module: {
     rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loaders: ['babel-loader'],
-      },
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
@@ -27,9 +20,4 @@ module.exports = {
       },
     ],
   },
-  resolve: {
-    modules: [
-      path.join(__dirname, 'node_modules'),
-    ],
-  },
 };