sold behavior

Joe Seifi · Joe Seifi · commit 7f7752599159 · 2017-02-23T23:29:27.000-08:00
diff --git a/01-react-css3/solution/App.js b/01-react-css3/solution/App.js
@@ -1,15 +1,21 @@
 import React, { Component } from 'react'
-import { AddToCartButton, BuyNowButton, Button } from './Buttons'
-import { FoodItem, BuyStrip } from './Order'
-import numeral from 'numeral'
+import { AddToCartButton, BuyNowButton , FoodItem, BuyStrip } from './components/index'
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 
 import { foodList } from './api'
 import './app.css'
 
 export default class App extends Component {
 
   state = {
-    totalPrice: 0
+    totalPrice: 0,
+    confirmed: false
+  }
+
+  onBuy () {
+    this.setState({
+      confirmed: true
+    })
   }
 
   updateTotal (price, inCart) {
@@ -19,7 +25,7 @@ export default class App extends Component {
   }
 
   render () {
-    const { totalPrice } = this.state
+    const { totalPrice, confirmed } = this.state
 
     return (
       <div>
@@ -31,6 +37,11 @@ export default class App extends Component {
             <figure className="food_photo">
               <img className="food_photo_image" src="../../workshop/img/taco.jpg" />
             </figure>
+            <ReactCSSTransitionGroup
+              transitionName="closefoods"
+              transitionEnterTimeout={ 500 }
+              transitionLeaveTimeout={ 600 }>
+            { !confirmed &&
             <div className="food_menu">
               <ul className="food_items">
               {
@@ -41,13 +52,19 @@ export default class App extends Component {
                     price={ price }
                     photoPath={ photoPath }
                     updateTotal= { this.updateTotal.bind(this) }
+                    disabled={ confirmed }
                    />
                 })
               }
               </ul>
             </div>
+          }
+          </ReactCSSTransitionGroup>
           </main>
-          <BuyStrip totalPrice={ numeral(totalPrice).format('$0.00') } />
+          <BuyStrip 
+            totalPrice={ totalPrice }
+            onBuy={ this.onBuy.bind(this) }
+          />
         </section>
         <footer className="footer">
           123 Narrow Road, San Francisco, CA
diff --git a/01-react-css3/solution/Buttons/index.js b/01-react-css3/solution/Buttons/index.js
diff --git a/01-react-css3/solution/Order/BuyStrip.js b/01-react-css3/solution/Order/BuyStrip.js
diff --git a/01-react-css3/solution/Order/index.js b/01-react-css3/solution/Order/index.js
diff --git a/01-react-css3/solution/components/AddToCartButton.js b/01-react-css3/solution/components/AddToCartButton.js
@@ -10,7 +10,7 @@ export class AddToCartButton extends Component {
     buttonText: 'Add'
   }
 
-  onButtonClicked = (e) => {
+  onButtonClicked = () => {
     this.props.onClick(!this.state.depressed)
     this.setState({
       buttonText: this.state.depressed ? 'Add' : 'Remove',
@@ -20,13 +20,14 @@ export class AddToCartButton extends Component {
 
   render () {
     const { buttonText, depressed } = this.state
-    const { classNames, onClick, ...otherProps } = this.props
+    const { classNames, onClick, disabled, ...otherProps } = this.props
     const buttonClassNames = classnames('icon icon-add', classNames)
     
     return (
       <Button 
         classNames={ buttonClassNames } 
         depressed={ depressed }
+        disabled={ disabled }
         onClick={ this.onButtonClicked }
         { ...otherProps }
       >
diff --git a/01-react-css3/solution/components/Button.js b/01-react-css3/solution/components/Button.js
diff --git a/01-react-css3/solution/components/BuyNowButton.js b/01-react-css3/solution/components/BuyNowButton.js
@@ -8,7 +8,7 @@ export class BuyNowButton extends Component {
     buttonText: 'Buy Now'
   }
 
-  onButtonClicked = (e) => {
+  onButtonClicked = () => {
     this.props.onClick()
     this.setState({
       buttonText: 'Confirmed',
diff --git a/01-react-css3/solution/components/BuyStrip.js b/01-react-css3/solution/components/BuyStrip.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import { BuyNowButton } from './index'
+import numeral from 'numeral'
+
+export class BuyStrip extends Component {
+
+  state = {
+    confirmed: false
+  }
+
+  buyNowClicked () {
+    this.props.onBuy()
+    this.setState({ confirmed: true })
+  }
+
+  render () {
+    const { totalPrice } = this.props
+    const formattedPrice = numeral(totalPrice).format('$0.00')
+    const { confirmed } = this.state
+
+    return confirmed ? 
+    (
+      <aside className="buy sold">
+        <div className="buy_title"><p>Get Ready to eat!</p> Your order is confirmed. Your card was charged <span className="buy_total">{ formattedPrice }</span></div>
+      </aside>
+    ) : (
+      <aside className="buy">
+        <div className="buy_title">Total:<span className="buy_total">{ formattedPrice }</span></div>
+        <BuyNowButton 
+          onClick={ this.buyNowClicked.bind(this) }
+          classNames="buy_button"
+          disabled={ totalPrice === 0 }>
+          Buy Now
+        </BuyNowButton>
+      </aside>
+    )
+  }
+
+}
diff --git a/01-react-css3/solution/components/FoodItem.js b/01-react-css3/solution/components/FoodItem.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { AddToCartButton } from '../Buttons'
+import { AddToCartButton } from './index'
 import numeral from 'numeral'
 
 export class FoodItem extends Component {
@@ -13,14 +13,18 @@ export class FoodItem extends Component {
   }
 
   render () {
-    const { id, name, price, photoPath } = this.props
+    const { id, name, price, photoPath, disabled } = this.props
     const { inCart } = this.state
 
     return (
       <li className="food_item">
         <figure className="food_item_image"><img className="food_item_photo" src={ photoPath } /></figure>
         <div className="food_item_name">{ name }<span className="food_item_price">{ numeral(price).format('$0.00') }</span></div>
-        <AddToCartButton onClick={ this.addToCart.bind(this) } classNames="food_add_button" />
+        <AddToCartButton 
+          onClick={ this.addToCart.bind(this) } 
+          classNames="food_add_button" 
+          disabled={ disabled }
+        />
       </li>
     )
   }
diff --git a/01-react-css3/solution/components/index.js b/01-react-css3/solution/components/index.js
@@ -0,0 +1,6 @@
+export { Button } from './Button'
+export { AddToCartButton } from './AddToCartButton'
+export { BuyNowButton } from './BuyNowButton'
+
+export { FoodItem } from './FoodItem'
+export { BuyStrip } from './BuyStrip'
diff --git a/jsconfig.json b/jsconfig.json
@@ -4,8 +4,5 @@
     "module": "system",
     "experimentalDecorators": true
   },
-  "exclude": [
-    "node_modules",
-    "**/node_modules"
-  ]
+  "exclude": [ "node_modules" ]
 }
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "postcss-loader": "^1.3.0",
     "radium": "^0.18.1",
     "react": "^15.4.2",
+    "react-addons-css-transition-group": "^15.4.2",
     "react-css-modules": "^4.1.0",
     "react-dom": "^15.4.2",
     "react-hot-loader": "^3.0.0-beta.6",
diff --git a/public/workshop/css/main.css b/public/workshop/css/main.css
@@ -146,7 +146,7 @@ body, a {
 
 @media screen and (min-width: 608px) {
   .food_item_photo {
-    width: 100%;
+    height: 100%;
   }
 }
 
@@ -194,6 +194,7 @@ body, a {
   box-sizing: border-box;
   background-color: #EA491C;
   color: #fff;
+  transition: height 300ms ease 60ms;
 }
 
 @media screen and (min-width: 608px) {
@@ -202,10 +203,16 @@ body, a {
     position: inherit;
     bottom: inherit;
     justify-content: center;
+    transition: height 300ms ease 260ms;
   }
 }
 
+.sold.buy {
+  height: 200px;
+}
+
 .buy_title {
+  display: flex;
   flex-grow: 1;
   font-weight: bold;
 }
@@ -215,12 +222,31 @@ body, a {
   }
 }
 
+.sold .buy_title {
+  font-weight: normal;
+  display: block;
+  line-height: 1.2;
+  text-align: center;
+}
+
+@media screen and (min-width: 608px) {
+  .sold .buy_title {
+    line-height: 2;
+  }
+}
+
 .buy_total {
   padding-left: 10px;
-  padding-right: 30px;
+  padding-right: 10px;
+  min-width: 80px;
   font-weight: normal;
 }
 
+.sold .buy_total {
+  padding-left: 0;
+  min-width: auto;
+}
+
 .buy_button {
   background-color: #fff;
   color: #000;
@@ -242,4 +268,27 @@ body, a {
   text-align: center;
   padding: 20px;
   font-size: 12px;
+}
+
+/* animate close food list */
+.closefoods-enter {
+  opacity: 0.01;
+  max-height: 0;
+}
+
+.closefoods-enter-active {
+  opacity: 1;
+  max-height: 1000;
+  transition: all 500ms ease-in;
+}
+
+.closefoods-leave {
+  max-height: 1000px;
+  opacity: 1;
+}
+
+.closefoods-leave-active {
+  opacity: 0.01;
+  max-height: 0;
+  transition: all 600ms ease;
 }
diff --git a/templates/app.html b/templates/app.html
@@ -5,6 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-  <div id="app"></div>
+  <div id="app" class="app"></div>
 </body>
 </html>
diff --git a/yarn.lock b/yarn.lock
@@ -4932,6 +4932,13 @@ rc@^1.1.2, rc@~1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-addons-css-transition-group@^15.4.2:
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.4.2.tgz#b7828834dfa14229fe07750e331e8a8cb6fb7745"
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react-css-modules@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/react-css-modules/-/react-css-modules-4.1.0.tgz#848e3d5089ec6596feabf6c0daaacc06866c58e7"

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ export class BuyNowButton extends Component {`
`8`	`8`	`buttonText: 'Buy Now'`
`9`	`9`	`}`
`10`	`10`
`11`		`- onButtonClicked = (e) => {`
	`11`	`+ onButtonClicked = () => {`
`12`	`12`	`this.props.onClick()`
`13`	`13`	`this.setState({`
`14`	`14`	`buttonText: 'Confirmed',`