radium solution round 1

Author: Joe Seifi

01-react-css3/solution/App.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { FoodItem, BuyStrip } from './components/index'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 
-import { foodListData } from './api'
+import { foodListData } from '../../public/API'
 import './app.css'
 
 export default class App extends Component {

03-radium/solution/App.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react'
+import { FoodItem, BuyStrip } from './components/index'
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+
+import { foodListData } from '../../public/API'
+import './app.css'
+
+export default class App extends Component {
+
+  state = {
+    totalPrice: 0,
+    confirmed: false
+  }
+
+  onBuy () {
+    this.setState({
+      confirmed: true
+    })
+  }
+
+  updateTotal (price, inCart) {
+    this.setState({
+      totalPrice: inCart ? this.state.totalPrice + price : this.state.totalPrice - price
+    })
+  }
+
+  render () {
+    const { totalPrice, confirmed } = this.state
+
+    return (
+      <div>
+        <header className="header">
+          <h1 className="logo"><span>Taco Shack</span></h1>
+        </header>
+        <section className="order">
+          <main className="food">
+            <figure className="food_header">
+              <img className="food_header_image" src="../../workshop/img/taco.jpg" />
+            </figure>
+            <ReactCSSTransitionGroup
+              transitionName="closefoods"
+              transitionEnterTimeout={ 500 }
+              transitionLeaveTimeout={ 600 }>
+            { !confirmed &&
+            <div className="food_menu">
+              <ul className="food_items">
+              {
+                foodListData.map( ({ id, name, price, photoPath }) => {
+                  return <FoodItem 
+                    key={ id }
+                    name={ name }
+                    price={ price }
+                    photoPath={ photoPath }
+                    updateTotal= { this.updateTotal.bind(this) }
+                   />
+                })
+              }
+              </ul>
+            </div>
+          }
+          </ReactCSSTransitionGroup>
+          </main>
+          <BuyStrip 
+            totalPrice={ totalPrice }
+            confirmed={ confirmed }
+            onBuy={ this.onBuy.bind(this) }
+          />
+        </section>
+        <footer className="footer">
+          123 Narrow Road, San Francisco, CA
+        </footer>
+      </div>
+    )
+  }
+}

03-radium/solution/app.css

@@ -0,0 +1,2 @@
+@import url("../../public/workshop/css/reset.css");
+@import url("../../public/workshop/css/app.css")

03-radium/solution/components/Button.js

@@ -0,0 +1,82 @@
+import React, { Component, PropTypes } from 'react'
+import Radium from 'radium'
+
+const buttonStyles = {
+  btn: {
+    display: 'inline-block',
+    outline: 'none',
+    textAlign: 'center',
+    font: 'bold 15px helvetica',
+    padding: '10px',
+    border: '0',
+    cursor: 'pointer',
+    color: '#fff',
+    backgroundColor: '#ec4800',
+    userSelect: 'none',
+    transition: 'all 120ms',
+    ':hover': {
+      backgroundColor: '#f98d00'
+    },
+    depressed: {
+      color: '#848484',
+      backgroundColor: '#bebebe',
+      ':hover': {
+        backgroundColor: '#bebebe'
+      }
+    },
+    icon: {
+      content: '',
+      display: 'inline-block',
+      width: '12px',
+      height: '12px',
+      marginLeft: '6px',
+      backgroundSize: '12px',
+      backgroundPosition: '50% 50%',
+      backgroundRepeat: 'no-repeat',
+      depressed: {
+        display: 'none'
+      }
+    },
+    'icon-add': {
+      backgroundImage: 'url(/workshop/svg/add.svg)'
+    }
+  }
+}
+
+const Button = ({
+  icon,
+  classNames,
+  customStyles,
+  depressed, 
+  disabled,
+  onClick,
+  children,
+  ...otherProps
+}) => {
+
+  return (
+    <button 
+      style={ [
+        buttonStyles.btn,
+        depressed && buttonStyles.btn.depressed,
+        customStyles.btn
+      ] }
+      className={ classNames } 
+      onClick={ onClick }
+      { ...otherProps }
+    >
+      { children }
+      {
+        <span style={ [
+          icon && buttonStyles.btn.icon,
+          icon && buttonStyles.btn['icon-'+icon],
+          depressed && buttonStyles.btn.icon.depressed
+        ] }></span>
+      }
+    </button>
+  )
+
+}
+
+const DecoratedButton = Radium(Button)
+export { DecoratedButton as Button }

03-radium/solution/components/ButtonAddToCart.js

@@ -0,0 +1,49 @@
+import React, { Component, PropTypes } from 'react'
+import { Button } from './index'
+import Radium from 'radium'
+
+const customStyles = {
+  btn: { 
+    minWidth: '110px' 
+  }
+}
+
+export class ButtonAddToCart extends Component {
+
+  state = {
+    depressed: false,
+    buttonText: 'Add'
+  }
+
+  static propTypes = {
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func.isRequired
+  }
+
+  onButtonClicked = () => {
+    this.props.onClick(!this.state.depressed)
+    this.setState({
+      buttonText: this.state.depressed ? 'Add' : 'Remove',
+      depressed: !this.state.depressed
+    })
+  }
+
+  render () {
+    const { depressed, buttonText } = this.state
+    const { disabled, onClick, ...otherProps } = this.props
+    
+    return (
+      <Button 
+        icon="add"
+        customStyles={ customStyles }
+        depressed={ depressed }
+        disabled={ disabled }
+        onClick={ this.onButtonClicked }
+        { ...otherProps }
+      >
+        { buttonText }
+      </Button>
+    )
+    
+  }
+}

03-radium/solution/components/ButtonBuyNow.js

@@ -0,0 +1,60 @@
+import React, { Component, PropTypes } from 'react'
+import { Button } from './index'
+// import '../../../public/workshop/css/button-buy-now.css'
+import Radium from 'radium'
+
+const customStyles = {
+  btn: {
+    backgroundColor: '#fff',
+    color: '#000',
+    boxShadow: '1px -1px 2px rgba(0, 0, 0, 0.2)',
+    width: '110px',
+    ':hover': {
+      backgroundColor: '#000',
+      color: '#fff'
+    },
+    depressed: {
+      boxShadow: '1px -1px 2px rgba(0, 0, 0, 0)'
+    }
+  }
+}
+
+export class ButtonBuyNow extends Component {
+
+  state = {
+    depressed: false,
+    disabled: false,
+    buttonText: 'Buy Now'
+  }
+
+  static propTypes = {
+    onClick: PropTypes.func.isRequired
+  }
+
+  onButtonClicked = () => {
+    this.props.onClick()
+    this.setState({
+      buttonText: 'Confirmed',
+      depressed: true,
+      disabled: true
+    })
+  }
+
+  render () {
+    const { depressed, disabled, buttonText } = this.state
+    const { onClick, ...otherProps } = this.props
+
+    return (
+      <Button 
+        customStyles={ customStyles }
+        depressed={ depressed }
+        disabled={ disabled }
+        onClick={ this.onButtonClicked }
+        { ...otherProps }
+      >
+        { buttonText }
+      </Button>
+    )
+    
+  }
+}

03-radium/solution/components/BuyStrip.js

@@ -0,0 +1,35 @@
+import React, { Component, PropTypes } from 'react'
+import { ButtonBuyNow } from './index'
+import numeral from 'numeral'
+import '../../../public/workshop/css/buy-strip.css'
+
+export class BuyStrip extends Component {
+
+  static propTypes = {
+    totalPrice: PropTypes.number.isRequired,
+    confirmed: PropTypes.bool.isRequired,
+    onBuy: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { totalPrice, confirmed } = this.props
+    const formattedPrice = numeral(totalPrice).format('$0.00')
+
+    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>
+        <ButtonBuyNow 
+          onClick={ this.props.onBuy }
+          disabled={ totalPrice === 0 }>
+          Buy Now
+        </ButtonBuyNow>
+      </aside>
+    )
+  }
+
+}

03-radium/solution/components/FoodItem.js

@@ -0,0 +1,40 @@
+import React, { Component, PropTypes } from 'react'
+import { ButtonAddToCart } from './index'
+import numeral from 'numeral'
+import '../../../public/workshop/css/food-item.css'
+
+export class FoodItem extends Component {
+
+  state = {
+    inCart: false
+  }
+
+  static propTypes = {
+    id: PropTypes.number,
+    name: PropTypes.string,
+    price: PropTypes.number,
+    photoPath: PropTypes.string,
+    disabled: PropTypes.bool,
+    updateTotal: PropTypes.func.isRequired
+  }
+
+  addToCart (inCart) {
+    this.props.updateTotal(this.props.price, inCart)
+  }
+
+  render () {
+    const { id, name, price, photoPath, disabled } = this.props
+
+    return (
+      <li className="food_item">
+        <figure className="food_item_figure"><img className="food_item_image" src={ photoPath } /></figure>
+        <div className="food_item_name">{ name }<span className="food_item_price">{ numeral(price).format('$0.00') }</span></div>
+        <ButtonAddToCart 
+          onClick={ this.addToCart.bind(this) } 
+          disabled={ disabled }
+        />
+      </li>
+    )
+  }
+
+}

03-radium/solution/components/index.js

@@ -0,0 +1,7 @@
+export { Button } from './Button'
+
+export { ButtonAddToCart } from './ButtonAddToCart'
+export { ButtonBuyNow } from './ButtonBuyNow'
+
+export { FoodItem } from './FoodItem'
+export { BuyStrip } from './BuyStrip'

03-radium/solution/entry.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { AppContainer } from 'react-hot-loader'
+import App from './App'
+
+render (
+  <AppContainer>
+    <App />
+  </AppContainer>, 
+  document.getElementById('app')
+)
+
+// Hot Module Replacement API
+if (module.hot) {
+  module.hot.accept('./App', () => {
+    const NextApp = require('./App').default
+    render(
+      <AppContainer>
+        <NextApp/>
+      </AppContainer>,
+      document.getElementById('app')
+    )
+  })
+}