Development toolbar

Author: kjagiello

src/App.tsx

@@ -12,7 +12,7 @@ import { requestPurchase, endPurchase, viewProfileQR, cancelPurchase } from "act
 import { addProduct, removeProduct, selectProduct, increaseProductQty, changePage } from "actions/product";
 
 import { Flex, Box } from "reflexbox";
-import { ProductList, PurchaseButton, Account, Sidebar, LoadingBox, Button } from "components";
+import { ProductList, PurchaseButton, Account, Sidebar, LoadingBox, Button, DevToolbar } from "components";
 import * as style from "styles/App.scss";
 
 //Require since qrcode.react does not have support for new javascript "import"
@@ -36,25 +36,9 @@ interface IThunder {
 }
 
 class App extends React.Component<IAppProps, {}> {
-    addRandomProduct() {
-        let codes = [
-            "7310500088853",
-            "7340083438684",
-            "7611612221351",
-            "7310500114934",
-            "7310070765840",
-            "7315360010754",
-            "7622300342753"
-        ];
-
-        let randomIndex = Math.floor(Math.random() * codes.length);
-        this.props.dispatch(addProduct(codes[randomIndex]));
-    }
-
     componentDidMount() {
         const { dispatch } = this.props;
 
-        // dispatch(login("154464990"));
         Thunder.connect(process.env.THUNDER.host, process.env.THUNDER.key, ["products", "cards"]);
         Thunder.listen((data: IThunder) => {
             if (data.channel === "products") {
@@ -66,6 +50,20 @@ class App extends React.Component<IAppProps, {}> {
     }
 
     render() {
+        if (process.env.NODE_ENV == 'development') {
+            return (
+                <div>
+                    <DevToolbar
+                        dispatch={this.props.dispatch}
+                    />
+                    {this.renderApp()}
+                </div>
+            );
+        }
+        return this.renderApp();
+    }
+
+    renderApp() {
         const { dispatch, products, account, purchase } = this.props;
 
         let selected = products.products.filter((product: any) => {
@@ -81,7 +79,6 @@ class App extends React.Component<IAppProps, {}> {
                         onRemove={() => dispatch(removeProduct())}
                         onScrollUp={() => dispatch(changePage(-1))}
                         onScrollDown={() => dispatch(changePage(1))}
-                        addRandomProduct={() => this.addRandomProduct()}
                         active={selected > 0}
                         scrollUpActive={products.page > 0}
                         scrollDownActive={products.page < products.maxPage}/>
@@ -154,14 +151,6 @@ class App extends React.Component<IAppProps, {}> {
                     <Box py={1}>Blip a card linked with your account</Box>
                     <Box py={1}>or</Box>
                     <Box py={1}>Scan a product to start a cash payment</Box>
-                    {(process.env.NODE_ENV === "development" ? (
-                        <Box py={1}><Button label="dev cash buy" onClick={() => this.addRandomProduct()}/></Box>
-                    ) : undefined)}
-                    {(process.env.NODE_ENV === "development" ? (
-                        <Box py={1}>
-                            <Button label="dev account buy" onClick={() => dispatch(login("154464990"))}/>
-                        </Box>
-                    ) : undefined)}
                     {(account.request ? <LoadingBox/> : undefined)}
                     {(account.request ? <Box className={style.overlay}/> : undefined)}
                 </Flex>

src/components/DevToolbar.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { IAccount } from "types";
+import * as classNames from "classnames";
+import { Box, Flex } from "reflexbox";
+import { Button } from "components";
+import * as style from "styles/components/DevToolbar.scss";
+import { addProduct, removeProduct, selectProduct, increaseProductQty, changePage } from "actions/product";
+import { login, clearAccount } from "actions/account";
+
+interface IDevToolbarProps {
+    dispatch: Function
+}
+
+export default class DevToolbar extends React.Component<IDevToolbarProps, {}> {
+    addRandomProduct() {
+        let codes = [
+            "7310500088853",
+            "7340083438684",
+            "7611612221351",
+            "7310500114934",
+            "7310070765840",
+            "7315360010754",
+            "7622300342753"
+        ];
+        let randomIndex = Math.floor(Math.random() * codes.length);
+        this.props.dispatch(addProduct(codes[randomIndex]));
+    }
+
+    render() {
+        var dispatch = this.props.dispatch;
+        return (
+            <Flex pl={2} align="center" auto className={style.devbar}>
+                <Box auto>{process.env.API.host}</Box>
+                <Button icon="credit-card" onClick={() => dispatch(login('1337'))}/>
+                <Button icon="plus" onClick={() => this.addRandomProduct()}/>
+            </Flex>
+        );
+    }
+}

src/components/Sidebar.tsx

@@ -28,9 +28,6 @@ export default class Sidebar extends React.Component<ISidebarProps, {}> {
                     <Button icon="trash" disabled={!this.props.active} onClick={this.props.onRemove}/>
                 </Flex>
                 <Button icon="chevron-down" onClick={this.props.onScrollDown} disabled={!this.props.scrollDownActive}/>
-                {(process.env.NODE_ENV === "development" ? (
-                    <Button icon="plus" onClick={this.props.addRandomProduct}/>
-                ) : undefined)}
             </Flex>
         );
     }

src/components/index.ts

@@ -6,6 +6,7 @@ import ProductList from "components/ProductList";
 import PurchaseButton from "components/PurchaseButton";
 import Icon from "components/Icon";
 import Button from "components/Button";
+import DevToolbar from "components/DevToolbar";
 
 export {
     Account,
@@ -15,5 +16,6 @@ export {
     ProductList,
     PurchaseButton,
     Icon,
-    Button
+    Button,
+    DevToolbar
 }

src/styles/App.scss

@@ -34,7 +34,7 @@ body {
 .container {
     background: #88a0a8;
     height: 480px;
-    width: 800px;
+    width: $app-width;
     overflow: hidden;
     display: block;
     position: absolute;

src/styles/_globals.scss

@@ -9,3 +9,4 @@ $grey-dark: #616161;
 $grey-light: #e0e0e0;
 $black: #212121;
 $white: #ffffff;
+$app-width: 800px;

src/styles/components/Account.scss

@@ -20,12 +20,12 @@
         animation: rotating 2s linear infinite;
     }
 }
- 
+
 @keyframes rotating {
   10%, 90% {
     transform: rotate(-10deg);
   }
-  
+
   20%, 80% {
     transform: rotate(10deg);
   }
@@ -37,4 +37,4 @@
   40%, 60% {
     transform: rotate(30deg);
   }
-}
+}

src/styles/components/DevToolbar.scss

@@ -0,0 +1,13 @@
+@import "styles/globals";
+
+.devbar {
+    width: $app-width;
+    color: $white;
+    display: block;
+    font-size: 22px;
+    text-align: left;
+    height: 60px;
+    transition: bottom .3s ease;
+    background: $black;
+    z-index: 9;
+}

src/styles/components/DevToolbar.scss.d.ts

@@ -0,0 +1 @@
+export const devbar: string;

webpack.config.js

@@ -3,7 +3,7 @@ const webpack = require("webpack");
 const autoprefixer = require("autoprefixer");
 const ForkCheckerPlugin = require("awesome-typescript-loader").ForkCheckerPlugin;
 
-const config = require(process.env.SETTINGS || "./configs/live.js");
+const config = require(process.env.SETTINGS || "./config");
 
 module.exports = {
     entry: [

webpack.prod.config.js

@@ -2,7 +2,7 @@ const path = require("path");
 const webpack = require("webpack");
 const autoprefixer = require("autoprefixer");
 
-const config = require(process.env.SETTINGS || "./config");
+const config = require(process.env.SETTINGS || "./configs/live.js");
 
 module.exports = {
     entry: [