Merge pull request #89 from sentry-demos/kelly/implement-redux

feat: Implement redux

.env

@@ -1,3 +1,3 @@
-REACT_APP_BACKEND=https://neilmanvar-flask-m3uuizd7iq-uc.a.run.app
+REACT_APP_BACKEND=https://mikaelacarino-flask-errors-m3uuizd7iq-uc.a.run.app
 REACT_APP_ENVIRONMENT=prod
-# REACT_APP_WORKFLOW=false # To enable checkout flow
+REACT_APP_WORKFLOW=false

Makefile

@@ -2,7 +2,7 @@
 # Following variable must be passed in
 # SENTRY_AUTH_TOKEN
 SENTRY_ORG=testorg-az
-SENTRY_PROJECT=reactadamtf
+SENTRY_PROJECT=frontend-react
 VERSION=`sentry-cli releases propose-version`
 PREFIX=static/js
 

README.md

@@ -5,7 +5,7 @@
 | dependency      | version           
 | ------------- |:-------------:| 
 | node      | 14.2.0  |
-| sentry-cli   | 1.52.3    |
+| sentry-cli   | 1.53.0    |
 | macOS | Catalina 10.15.3      |
 | docker   | 19.03.8     |
 

package.json

@@ -3,13 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@sentry/cli": "^1.37.0",
+    "@sentry/cli": "^1.53.0",
     "history": "^1.17.0",
     "material-ui": "^0.18.7",
-    "react": "^15.6.2",
-    "react-dom": "^15.6.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
     "react-router": "^1.0.3",
-    "react-scripts": "1.0.10",
+    "react-scripts": "^3.4.1",
+    "redux": "^4.0.5",
     "request": "^2.88.0",
     "serve": "^10.1.2"
   },
@@ -23,5 +25,17 @@
   },
   "devDependencies": {
     "gh-pages": "^1.2.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

public/index.html

@@ -23,11 +23,15 @@
   <title>Sentry Demo</title>
 
   <!-- Import SDK -->
-  <script src="https://browser.sentry-cdn.com/5.13.2/bundle.min.js" crossorigin="anonymous"></script>
+  <script
+    src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js"
+    integrity="sha384-wF7Jc4ZlWVxe/L8Ji3hOIBeTgo/HwFuaeEfjGmS3EXAG7Y+7Kjjr91gJpJtr+PAT"
+    crossorigin="anonymous">
+  </script>
 
   <script>
     Sentry.init({
-      dsn: 'https://a843d07bf5974b14937a1314f49ad4bb@o87286.ingest.sentry.io/5230364',
+      dsn: 'https://f3e1b754a04b4dc1be1b54454ec6d238@o87286.ingest.sentry.io/1356467',
       release: "%REACT_APP_RELEASE%",
       environment: "%REACT_APP_ENVIRONMENT%",
       beforeSend(event) {

src/components/App.js

@@ -1,24 +1,32 @@
 /*global Sentry*/
 import React, { Component } from "react";
+import { connect } from 'react-redux';
+
 import "./App.css";
 import wrenchImg from "../assets/wrench.png";
 import nailsImg from "../assets/nails.png";
 import hammerImg from "../assets/hammer.png";
+import * as actions from '../store/actions/index';
 
 const PORT = process.env.REACT_APP_PORT || 3001;
+// make deploy_gcp
 const BACKEND = process.env.REACT_APP_BACKEND || `http://localhost:${PORT}`;
-const IS_WORKFLOW_DEMO = process.env.REACT_APP_WORKFLOW !== "false";
+// npm run deploy
+// const BACKEND = `http://localhost:${PORT}`
+const WORKFLOW = process.env.REACT_APP_WORKFLOW !== "false";
 
 const request = require('request');
 
+
 const monify = n => (n / 100).toFixed(2);
 const getUniqueId = () => '_' + Math.random().toString(36).substr(2, 9);
 
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      cart: []
+      success: false,
+      hasError: false
     };
 
     // generate random email
@@ -47,9 +55,8 @@ class App extends Component {
         img: hammerImg
       }
     ];
-    this.buyItem = this.buyItem.bind(this);
+
     this.checkout = this.checkout.bind(this);
-    this.resetCart = this.resetCart.bind(this);
 
     // generate unique sessionId and set as Sentry tag
     this.sessionId = getUniqueId();
@@ -79,35 +86,6 @@ class App extends Component {
      return plans[Math.floor(Math.random() * plans.length)];
    }
 
-  buyItem(item) {
-    const cart = [].concat(this.state.cart);
-    cart.push(item);
-    this.setState({ cart, success: false });
-
-    Sentry.configureScope(scope => {
-      scope.setExtra('cart', JSON.stringify(cart));
-    });
-    Sentry.addBreadcrumb({
-      category: 'cart',
-      message: 'User added ' + item.name + ' to cart',
-      level: 'info'
-    });
-  }
-
-  resetCart(event) {
-    event.preventDefault();
-    this.setState({ cart: [], hasError: false, success: false });
-
-    Sentry.configureScope(scope => {
-      scope.setExtra('cart', '');
-    });
-    Sentry.addBreadcrumb({
-      category: 'cart',
-      message: 'User emptied cart',
-      level: 'info'
-    });
-  }
-
   performXHRRequest(){
     fetch('https://jsonplaceholder.typicode.com/todos/1')
       .then(response => response.json())
@@ -121,7 +99,7 @@ class App extends Component {
       level: 'info'
     });
 
-    if (IS_WORKFLOW_DEMO) {
+    if (WORKFLOW) {
       this.myCodeIsPerfect();
     }
 
@@ -132,7 +110,7 @@ class App extends Component {
     */
     const order = {
       email: this.email,
-      cart: this.state.cart
+      cart: this.props.cart
     };
 
     // generate unique transactionId and set as Sentry tag
@@ -163,8 +141,8 @@ class App extends Component {
   }
 
   render() {
-    const total = this.state.cart.reduce((t, i) => t + i.price, 0);
-    const cartDisplay = this.state.cart.reduce((c, { id }) => {
+    const total = this.props.cart.reduce((t, i) => t + i.price, 0);
+    const cartDisplay = this.props.cart.reduce((c, { id }) => {
       c[id] = c[id] ? c[id] + 1 : 1;
       return c;
     }, {});
@@ -187,7 +165,7 @@ class App extends Component {
                   <p>{name}</p>
                   <div className="button-wrapper">
                     <strong>${monify(price)}</strong>
-                    <button onClick={() => this.buyItem(item)}>Buy!</button>
+                    <button onClick={() => this.props.onBuyItem(item)}>Buy!</button>
                   </div>
                 </div>
               );
@@ -199,7 +177,7 @@ class App extends Component {
             <h4>Hi, {this.email}!</h4>
           </header>
           <div className="cart">
-            {this.state.cart.length ? (
+            {this.props.cart.length ? (
               <div>
                 {Object.keys(cartDisplay).map(id => {
                   const { name, price } = this.store.find(i => i.id === id);
@@ -237,12 +215,12 @@ class App extends Component {
           )}
           <button
             onClick={this.checkout}
-            disabled={this.state.cart.length === 0}
+            disabled={this.props.cart.length === 0}
           >
             Checkout
           </button>{" "}
-          {this.state.cart.length > 0 && (
-            <button onClick={this.resetCart} className="cart-reset">
+          {this.props.cart.length > 0 && (
+            <button onClick={this.props.onResetCart} className="cart-reset">
               Empty cart
             </button>
           )}
@@ -252,4 +230,17 @@ class App extends Component {
   }
 }
 
-export default App;
+const mapStateToProps = state => {
+  return {
+      cart: state.cart,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+      onBuyItem: (item) => dispatch(actions.buyItem(item)),
+      onResetCart: () => dispatch(actions.resetCart()),
+  }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/index.js

@@ -1,9 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+
 import './index.css';
 import App from './components/App';
 import registerServiceWorker from './registerServiceWorker';
+import reducer from './store/reducers/app';
+
+const store = createStore(reducer);
 
-ReactDOM.render(<App /> , document.getElementById('root'));
+ReactDOM.render(<Provider store={store}><App /></Provider> , document.getElementById('root'));
 
 registerServiceWorker();

src/store/actions/actionTypes.js

@@ -0,0 +1,2 @@
+export const BUY_ITEM = 'BUY_ITEM';
+export const RESET_CART = 'RESET_CART';

src/store/actions/app.js

@@ -0,0 +1,14 @@
+import * as actionTypes from './actionTypes';
+
+export const buyItem = (item) => {
+  return {
+    type: actionTypes.BUY_ITEM,
+    item: item
+  };
+};
+
+export const resetCart = () => {
+  return {
+    type: actionTypes.RESET_CART,
+  }
+}

src/store/actions/index.js

@@ -0,0 +1,4 @@
+export {
+  buyItem,
+  resetCart
+} from './app';

src/store/reducers/app.js

@@ -0,0 +1,51 @@
+/*global Sentry*/
+import * as actionTypes from '../actions/actionTypes';
+
+const initialState = {
+    cart: [],
+};
+
+const buyItem = (state, action) => {
+  const cart = [].concat(state.cart);
+  cart.push(action.item);
+
+  Sentry.configureScope(scope => {
+    scope.setExtra('cart', JSON.stringify(cart));
+  });
+  Sentry.addBreadcrumb({
+    category: 'cart',
+    message: 'User added ' + action.item.name + ' to cart',
+    level: 'info'
+  });
+
+  return {
+    ...state,
+    cart: cart
+  }
+}
+
+const resetCart = (state, action) => {
+  Sentry.configureScope(scope => {
+    scope.setExtra('cart', '');
+  });
+  Sentry.addBreadcrumb({
+    category: 'cart',
+    message: 'User emptied cart',
+    level: 'info'
+  });
+  return {
+    ...state,
+    cart: [],
+  }
+}
+
+const reducer = ( state = initialState, action ) => {
+    switch ( action.type ) {
+      case actionTypes.BUY_ITEM: return buyItem(state, action);
+      case actionTypes.RESET_CART: return resetCart(state, action);
+      default:
+        return state;
+    }
+};
+
+export default reducer;