Demo page organized

Author: mbrn

demo/App.tsx

@@ -4,7 +4,6 @@ import { createStyles, Theme, WithStyles, withStyles } from '@material-ui/core/s
 import { AppBar, Toolbar, Typography, IconButton, Badge } from '@material-ui/core';
 import ShoppingCart from '@material-ui/icons/ShoppingCart';
 import { MyBasketDataProvider } from './MyBasketDataProvider';
-import { PusherBasketDataProvider } from './PusherBasketDataProvider';
 import { Products } from './Products';
 
 export interface AppProps extends WithStyles<typeof styles> { }
@@ -14,7 +13,7 @@ class App extends React.Component<AppProps, any> {
     const { classes } = this.props;
 
     return (
-      <BasketProvider dataProvider={new PusherBasketDataProvider()}>
+      <BasketProvider dataProvider={new MyBasketDataProvider()}>
         <div className={classes.root}>
           <AppBar position="static" elevation={0}>
             <Toolbar variant="dense">

demo/MyBasketDataProvider.ts

@@ -1,6 +1,15 @@
 import { DataProvider, BasketItem } from "../src";
 
 export class MyBasketDataProvider implements DataProvider {
+ 
+  registerToChanges(callback: (items: BasketItem[]) => void) {    
+  }
+
+  products = [
+    { id: "1", name: 'Computer', price: 1722.44, quantity: 1 },
+    { id: "2", name: 'Phone', price: 522.14, quantity: 1 }
+  ];
+
   items = [
     { id: "1", name: 'Computer', price: 1722.44, quantity: 1 },
     { id: "2", name: 'Phone', price: 522.14, quantity: 2 }
@@ -14,8 +23,34 @@ export class MyBasketDataProvider implements DataProvider {
     });
   }
 
+  onAllItemsDeleted(): Promise<BasketItem[]> {
+    return new Promise<BasketItem[]>((resolve, reject) => {
+      setTimeout(() => {
+        this.items = [];
+
+        resolve(this.items)
+      }, 1000)
+    });
+  }
+
   onItemAdded(id: string): Promise<BasketItem[]> {
-    throw new Error("Method not implemented.");
+    return new Promise<BasketItem[]>((resolve, reject) => {
+      setTimeout(() => {
+        let index = this.items.findIndex(item => item.id === id);
+        if (index > -1) {
+          this.items[index].quantity++;
+        }
+        else {
+          const index = this.products.findIndex(item => item.id === id);
+          if (index > -1) {
+            const item = {...this.products[index]};
+            this.items.push(item);
+          }
+        }
+
+        resolve(this.items)
+      }, 1000)
+    });
   }
 
   onItemDeleted = (id: string): Promise<BasketItem[]> => {
@@ -30,9 +65,5 @@ export class MyBasketDataProvider implements DataProvider {
         resolve(this.items)
       }, 1000)
     });
-
-
-
-
   }
 }

demo/Products.tsx

@@ -1,37 +1,21 @@
 import * as React from 'react';
 import { CircularProgress, Card, CardContent, CardHeader, CardActions, Button, Typography } from '@material-ui/core';
-import Axios from 'axios';
 import { BasketItem, withBasketData, BasketData } from '../src';
 
-class ProductsInner extends React.Component<{basketData: BasketData}, any> {
+class ProductsInner extends React.Component<{ basketData: BasketData }, any> {
 
   constructor(props: any) {
     super(props);
 
     this.state = {
       isLoading: false,
-      items: []
+      items: [
+        { id: "1", name: 'Computer', price: 1722.44, quantity: 1 },
+        { id: "2", name: 'Phone', price: 522.14, quantity: 2 }
+      ]
     }
   }
 
-  componentDidMount() {
-    this.setState({ isLoading: true }, () => {
-      Axios.get<BasketItem>("http://localhost:8080/products")
-        .then(response => {
-          this.setState({
-            items: response.data,
-            isLoading: false
-          })
-        })
-        .catch(reason => {
-          this.setState({
-            error: reason,
-            isLoading: false
-          });
-        });
-    })
-  }
-
   public render() {
     if (this.state.isLoading) {
       return (
@@ -50,9 +34,9 @@ class ProductsInner extends React.Component<{basketData: BasketData}, any> {
     }
 
     return (
-      <div style={{display: 'flex', margin: -5}}>
+      <div style={{ display: 'flex', margin: -5 }}>
         {this.state.items.map(item => (
-          <Card style={{flex: 1, margin: 5}} elevation={0}>            
+          <Card style={{ flex: 1, margin: 5 }} elevation={0}>
             <CardContent>
               <Typography variant="h6">
                 {item.name}
@@ -61,16 +45,16 @@ class ProductsInner extends React.Component<{basketData: BasketData}, any> {
                 Price ${item.price}
               </Typography>
             </CardContent>
-            <CardActions style={{justifyContent: 'flex-end'}}>
-              <Button variant="outlined" color="primary" style={{textTransform: 'none'}}
+            <CardActions style={{ justifyContent: 'flex-end' }}>
+              <Button variant="outlined" color="primary" style={{ textTransform: 'none' }}
                 onClick={() => {
                   this.props.basketData.onItemAdded(item.id);
                 }}
               >
                 Add to Basket
               </Button>
             </CardActions>
-          </Card>          
+          </Card>
         ))}
       </div>
     )