restaurant buttons on page #15 #103

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets" : ["es2015", "react"]
+  "presets" : ["es2015", "react"],
+  "plugins" : ["transform-object-assign"]
 }

package.json

@@ -30,6 +30,7 @@
     "babel-cli": "^6.3.15",
     "babel-core": "^6.0.15",
     "babel-loader": "^6.0.0",
+    "babel-plugin-transform-object-assign": "^6.3.13",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.1.2",

src/js/components/basket.jsx

@@ -107,6 +107,21 @@ let Basket = React.createClass({
     })
   },
 
+  getUniqueTags: function(menu, tagName){
+    let arrIncludes = function(array, search){
+      return array.reduce(function(includes, elem){
+        return includes || elem === search;
+      }, false)
+    }
+   return menu.reduce(function(uniqueTags, menuItem){
+     if (!arrIncludes(uniqueTags, menuItem[tagName])) {
+       uniqueTags.push(menuItem[tagName])
+     }
+      return uniqueTags;
+   }, []);
+
+  },
+
   addItem: function(itemID) {
       // faster solution. use this.state.menu[itemID]
       var menu = this.state.basket.map(function(item, i, array) {
@@ -173,7 +188,8 @@ let Basket = React.createClass({
       },
       helpers: {
         filterMenu: this.filterMenu,
-        orderMenu: this.orderMenu
+        orderMenu: this.orderMenu,
+        getUniqueTags: this.getUniqueTags
       }
     };
 

src/js/components/views/select-menu.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+//let MenuComponent = require('../menu.jsx');
+
+let SelectMenu = React.createClass({
+
+  getRestaurantList: function() {
+    var getUniqueTags = this.props.helpers.getUniqueTags;
+    var uniqueTags = getUniqueTags(this.props.basket, "restaurant");
+    return uniqueTags.map(function(tag){
+      return (
+        <button>{tag}</button>
+      )
+    });
+  },
+
+  render: function(){
+    var restaurantList = this.getRestaurantList();
+
+    return(
+      <div>
+          <input type="text" placeholder="Search by food type or name"></input>
+          {restaurantList}
+      </div>
+    )
+  }
+
+});
+
+module.exports = SelectMenu;

src/js/main.jsx

@@ -16,6 +16,7 @@ let Login             = require('./components/views/login.jsx');
 let CreateAccount     = require('./components/views/create-account.jsx').Page;
 let Payment           = require('./components/views/pay.jsx');
 let OrderConfirmation = require('./components/views/order-confirmation.jsx');
+let SelectMenu        = require('./components/views/select-menu.jsx');
 
 console.log(typeof Basket);
 console.log(typeof BasketPage);
@@ -36,6 +37,7 @@ render((
       <Route path="basket" component={Basket}>
         // <Route path="/basket/page" component={BasketPage} />
         <Route path="/basket/menu" component={Menu} />
+        <Route path="/basket/select-menu" component={SelectMenu} />
       </Route>
       <Route path="login" component={Login} />
       <Route path="create-account" component={CreateAccount} />