build select shop view presentational components

Author: amituuush

client/components/App/App.jsx

@@ -5,12 +5,13 @@ import OrderTotal from '../OrderTotal/OrderTotal'
 
 
 // NEXT STEPS:
-// use setTimeout for add item to order notification/confirmation
-// combine dummyData into single file
+
+// ???? combine dummyData into single file
 // create views for other pages and switch out root component in meantime
 // react router implementation
 // implement propTypes to components
 
+// DONE use setTimeout for add item to order notification/confirmation
 // DONE user cannot add item unless all form elements are filled out
 // DONE clear all form elements after add to order button is clicked
 // DONE delete functionality on orderTotal
@@ -21,6 +22,7 @@ import OrderTotal from '../OrderTotal/OrderTotal'
 // DONE tax is included in order total calculation
 
 var App = React.createClass({
+
     getInitialState: function() {
         return {
             items: [],
@@ -54,10 +56,19 @@ var App = React.createClass({
         })
     },
 
+    propTypes: {
+        toggleNotification: React.PropTypes.func,
+        notificationState: React.PropTypes.bool,
+        handleAddItemToOrder: React.PropTypes.func,
+        orderItems: React.PropTypes.array,
+        handleDeleteItemFromOrder: React.PropTypes.func
+  },
+
     render: function() {
         return (
             <div>
                 <NavAndTitle
+                    title='Create Your Order'
                     toggleNotification={this._toggleNotification}
                     notificationState={this.state.notification} />
                 <MenuFormContainer

client/components/ClickForMore/ClickForMore.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import sass from './click-for-more.scss'
+
+var ClickForMore = React.createClass({
+    render: function() {
+        return (
+            <div className="click-for-more-container">
+                <button>Click for more results</button>
+            </div>
+        )
+    }
+});
+
+module.exports = ClickForMore;

client/components/ClickForMore/click-for-more.scss

@@ -0,0 +1,4 @@
+.click-for-more-container {
+    width: 11em;
+    margin: 3em auto 0 auto;
+}

client/components/MenuFormContainer/MenuFormContainer.jsx

@@ -5,6 +5,11 @@ import sass from './menu-form-container.scss'
 
 var MenuFormContainer = React.createClass({
 
+    propTypes: {
+        slug: React.PropTypes.string,
+        handleAddItemToOrder: React.PropTypes.func,
+        toggleNotification: React.PropTypes.func
+    },
 
     render: function() {
         return (

client/components/NavAndTitle/NavAndTitle.jsx

@@ -4,6 +4,12 @@ import AddItemNotification from '../AddItemNotification/AddItemNotification'
 
 var NavAndTitle = React.createClass({
 
+
+    propTypes: {
+        toggleNotification: React.PropTypes.func,
+        notificationState: React.PropTypes.bool
+    },
+
     render: function() {
         return (
             <div>
@@ -18,7 +24,7 @@ var NavAndTitle = React.createClass({
                         <li>Log Out</li>
                     </ul>
                 </nav>
-                <h1>Create your order</h1>
+                <h1>{this.props.title}</h1>
             </div>
         )
     }

client/components/NextButton/NextButton.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import sass from './next-button.scss'
+
+var NextButton = React.createClass({
+
+    render: function() {
+        return (
+            <input className="next-button" type="submit" value="Next" />
+
+        )
+    }
+});
+
+module.exports = NextButton;

client/components/NextButton/next-button.scss

@@ -0,0 +1,14 @@
+.next-button {
+    margin-top: 1em;
+    padding: 1.2em 3em;
+    border-radius: 5px;
+    border: none;
+    box-shadow: none;
+    background: #3879D9;
+    color: #fff;
+
+    &:hover {
+        cursor: pointer;
+    }
+
+}

client/components/OrderTotal/OrderTotal.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import OrderTotalRow from '../OrderTotalRow/OrderTotalRow'
 import OrderTax from '../OrderTax/OrderTax'
 import OrderTotalTotal from '../OrderTotalTotal/OrderTotalTotal'
+import NextButton from '../NextButton/NextButton'
 import sass from './order-total.scss'
 
 
@@ -38,7 +39,7 @@ var OrderTotal = React.createClass({
                         </tbody>
                     </table>
                 </section>
-                <input className="next-button" type="submit" value="Next" />
+                <NextButton />
             </div>
         )
     }

client/components/OrderTotal/order-total.scss

@@ -1,14 +0,0 @@
-.next-button {
-    margin-top: 1em;
-    padding: 1.2em 3em;
-    border-radius: 5px;
-    border: none;
-    box-shadow: none;
-    background: #3879D9;
-    color: #fff;
-
-    &:hover {
-        cursor: pointer;
-    }
-
-}

client/components/SelectShop/SelectShop.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import NavAndTitle from '../NavAndTitle/NavAndTitle'
+import ShopSearch from '../ShopSearch/ShopSearch'
+import ShopList from '../ShopList/ShopList'
+
+var SelectShop = React.createClass({
+
+
+    render: function() {
+        return (
+            <div>
+                <NavAndTitle title='Select a Coffee Shop!' />
+                <ShopSearch />
+                <ShopList />
+            </div>
+        )
+    }
+});
+
+module.exports = SelectShop;