diff --git a/src/actions/app.js b/src/actions/app.js index 1b04387..762386c 100644 --- a/src/actions/app.js +++ b/src/actions/app.js @@ -37,9 +37,6 @@ const loadPage = page => dispatch => { case 'view2': import('../components/my-view2.js'); break; - case 'view3': - import('../components/my-view3.js'); - break; case 'oae': import('../components/oae.js'); break; diff --git a/src/actions/shop.js b/src/actions/shop.js deleted file mode 100644 index e3ee07e..0000000 --- a/src/actions/shop.js +++ /dev/null @@ -1,79 +0,0 @@ -/** -@license -Copyright (c) 2018 The Polymer Project Authors. All rights reserved. -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt -Code distributed by Google as part of the polymer project is also -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -*/ - -export const GET_PRODUCTS = 'GET_PRODUCTS'; -export const ADD_TO_CART = 'ADD_TO_CART'; -export const REMOVE_FROM_CART = 'REMOVE_FROM_CART'; -export const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS'; -export const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE'; - -const PRODUCT_LIST = [ - { id: 1, title: 'Cabot Creamery Extra Sharp Cheddar Cheese', price: 10.99, inventory: 2 }, - { id: 2, title: 'Cowgirl Creamery Mt. Tam Cheese', price: 29.99, inventory: 10 }, - { id: 3, title: 'Tillamook Medium Cheddar Cheese', price: 8.99, inventory: 5 }, - { id: 4, title: 'Point Reyes Bay Blue Cheese', price: 24.99, inventory: 7 }, - { id: 5, title: "Shepherd's Halloumi Cheese", price: 11.99, inventory: 3 } -]; - -export const getAllProducts = () => dispatch => { - // Here you would normally get the data from the server. We're simulating - // that by dispatching an async action (that you would dispatch when you - // succesfully got the data back) - - // You could reformat the data in the right format as well: - const products = PRODUCT_LIST.reduce((obj, product) => { - obj[product.id] = product; - return obj; - }, {}); - - dispatch({ - type: GET_PRODUCTS, - products - }); -}; - -export const checkout = () => dispatch => { - // Here you could do things like credit card validation, etc. - // If that fails, dispatch CHECKOUT_FAILURE. We're simulating that - // by flipping a coin :) - const flip = Math.floor(Math.random() * 2); - if (flip === 0) { - dispatch({ - type: CHECKOUT_FAILURE - }); - } else { - dispatch({ - type: CHECKOUT_SUCCESS - }); - } -}; - -export const addToCart = productId => (dispatch, getState) => { - const state = getState(); - // Just because the UI thinks you can add this to the cart - // doesn't mean it's in the inventory (user could've fixed it); - if (state.shop.products[productId].inventory > 0) { - dispatch(addToCartUnsafe(productId)); - } -}; - -export const removeFromCart = productId => { - return { - type: REMOVE_FROM_CART, - productId - }; -}; - -export const addToCartUnsafe = productId => { - return { - type: ADD_TO_CART, - productId - }; -}; diff --git a/src/components/my-view3.js b/src/components/my-view3.js deleted file mode 100644 index f4826dd..0000000 --- a/src/components/my-view3.js +++ /dev/null @@ -1,131 +0,0 @@ -/** -@license -Copyright (c) 2018 The Polymer Project Authors. All rights reserved. -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt -Code distributed by Google as part of the polymer project is also -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -*/ - -/* eslint-disable import/no-unassigned-import */ - -import { html, css } from 'lit-element'; -import { connect } from 'pwa-helpers/connect-mixin.js'; - -// This element is connected to the Redux store. -import { store } from '../store.js'; - -// These are the actions needed by this element. -import { checkout } from '../actions/shop.js'; - -// We are lazy loading its reducer. -import shop, { cartQuantitySelector } from '../reducers/shop.js'; -import { PageViewElement } from './page-view-element.js'; - -// These are the elements needed by this element. -import './shop-products.js'; -import './shop-cart.js'; - -// These are the shared styles needed by this element. -import { SharedStyles } from './shared-styles.js'; -import { ButtonSharedStyles } from './button-shared-styles.js'; -import { addToCartIcon } from './my-icons.js'; - -store.addReducers({ - shop -}); - -class MyView3 extends connect(store)(PageViewElement) { - static get properties() { - return { - // This is the data from the store. - _quantity: { type: Number }, - _error: { type: String } - }; - } - - static get styles() { - return [ - SharedStyles, - ButtonSharedStyles, - css` - button { - border: 2px solid var(--app-dark-text-color); - border-radius: 3px; - padding: 8px 16px; - } - - button:hover { - border-color: var(--app-primary-color); - color: var(--app-primary-color); - } - - .cart, - .cart svg { - fill: var(--app-primary-color); - width: 64px; - height: 64px; - } - - .circle.small { - margin-top: -72px; - width: 28px; - height: 28px; - font-size: 16px; - font-weight: bold; - line-height: 30px; - } - ` - ]; - } - - render() { - return html` -
-

Redux example: shopping cart

-
- ${addToCartIcon} -
${this._quantity}
-
-

- This is a slightly more advanced Redux example, that simulates a shopping cart: getting the products, - adding/removing items to the cart, and a checkout action, that can sometimes randomly fail (to simulate where - you would add failure handling). -

-

- This view, as well as its 2 child elements, <shop-products> and - <shop-cart> are connected to the Redux store. -

-
-
-

Products

- - -
-

Your Cart

- - -
${this._error}
-
-

- -

-
- `; - } - - _checkoutButtonClicked() { - store.dispatch(checkout()); - } - - // This is called every time something is updated in the store. - stateChanged(state) { - this._quantity = cartQuantitySelector(state); - this._error = state.shop.error; - } -} - -window.customElements.define('my-view3', MyView3); diff --git a/src/components/shop-cart.js b/src/components/shop-cart.js deleted file mode 100644 index 140d946..0000000 --- a/src/components/shop-cart.js +++ /dev/null @@ -1,80 +0,0 @@ -/** -@license -Copyright (c) 2018 The Polymer Project Authors. All rights reserved. -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt -Code distributed by Google as part of the polymer project is also -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -*/ - -/* eslint-disable import/no-unassigned-import */ - -import { LitElement, html, css } from 'lit-element'; -import { connect } from 'pwa-helpers/connect-mixin.js'; - -// This element is connected to the Redux store. -import { store } from '../store.js'; - -// These are the elements needed by this element. -import './shop-item.js'; - -// These are the actions needed by this element. -import { removeFromCart } from '../actions/shop.js'; - -// These are the reducers needed by this element. -import { cartItemsSelector, cartTotalSelector } from '../reducers/shop.js'; -import { removeFromCartIcon } from './my-icons.js'; - -// These are the shared styles needed by this element. -import { ButtonSharedStyles } from './button-shared-styles.js'; - -class ShopCart extends connect(store)(LitElement) { - static get properties() { - return { - _items: { type: Array }, - _total: { type: Number } - }; - } - - static get styles() { - return [ - ButtonSharedStyles, - css` - :host { - display: block; - } - ` - ]; - } - - render() { - return html` -

Please add some products to cart.

- ${this._items.map( - item => - html` -
- - -
- ` - )} -

Total: ${this._total}

- `; - } - - _removeButtonClicked(e) { - store.dispatch(removeFromCart(e.currentTarget.dataset.index)); - } - - // This is called every time something is updated in the store. - stateChanged(state) { - this._items = cartItemsSelector(state); - this._total = cartTotalSelector(state); - } -} - -window.customElements.define('shop-cart', ShopCart); diff --git a/src/components/shop-item.js b/src/components/shop-item.js deleted file mode 100644 index 39907aa..0000000 --- a/src/components/shop-item.js +++ /dev/null @@ -1,33 +0,0 @@ -/** -@license -Copyright (c) 2018 The Polymer Project Authors. All rights reserved. -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt -Code distributed by Google as part of the polymer project is also -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -*/ - -import { LitElement, html } from 'lit-element'; - -// This element is *not* connected to the Redux store. -class ShopItem extends LitElement { - static get properties() { - return { - name: { type: String }, - amount: { type: String }, - price: { type: String } - }; - } - - render() { - return html` - ${this.name}: - ${this.amount} * - $${this.price} - - `; - } -} - -window.customElements.define('shop-item', ShopItem); diff --git a/src/components/shop-products.js b/src/components/shop-products.js deleted file mode 100644 index a42794c..0000000 --- a/src/components/shop-products.js +++ /dev/null @@ -1,25 +0,0 @@ -/** -@license -Copyright (c) 2018 The Polymer Project Authors. All rights reserved. -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt -Code distributed by Google as part of the polymer project is also -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -*/ - -/* eslint-disable import/no-unassigned-import */ - -class ShopProducts extends PageViewElement { - static get styles() { - return [sharedStyles, dashboardStyles, dashboardButtonsStyles]; - } - - render() { - return html` - - `; - } - } - -window.customElements.define('shop-products', ShopProducts);