Deployed site on heroku

Author: ujjavaldesai07

client/.gitignore

@@ -0,0 +1 @@
+node_modules/

client/package.json

@@ -10,12 +10,14 @@
     "@stripe/stripe-js": "^1.8.0",
     "axios": "^0.19.2",
     "env-cmd": "^10.1.0",
+    "express": "^4.17.1",
     "fontsource-roboto": "^2.1.3",
     "js-base64": "^2.5.2",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.15",
     "loglevel": "^1.6.8",
     "node-sass": "^4.14.1",
+    "path": "^0.12.7",
     "prop-types": "^15.7.2",
     "react": "latest",
     "react-dom": "latest",
@@ -29,13 +31,13 @@
     "redux-form": "^8.3.6",
     "redux-thunk": "^2.3.0",
     "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^0.88.2",
     "stripe": "^8.78.0",
     "styled-components": "^5.1.1",
-    "swiper": "^5.4.2",
-    "semantic-ui-react": "^0.88.2"
+    "swiper": "^5.4.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "node server.js",
     "build": "react-scripts build",
     "start_dev": "./node_modules/.bin/env-cmd -f .env react-scripts start",
     "build_dev": "./node_modules/.bin/env-cmd -f .env react-scripts build",

client/server.js

@@ -0,0 +1,15 @@
+const express = require('express');
+const path = require('path');
+const port = process.env.PORT || 3000;
+const app = express();
+
+// the __dirname is the current directory from where the script is running
+app.use(express.static(__dirname));
+app.use(express.static(path.join(__dirname, 'build')));
+app.get('/ping', function (req, res) {
+    return res.send('pong');
+});
+app.get('/*', function (req, res) {
+    res.sendFile(path.join(__dirname, 'build', 'index.html'));
+});
+app.listen(port);

client/src/ErrorBoundary.js

@@ -0,0 +1,38 @@
+import React, {Component} from "react";
+import {Grid} from "@material-ui/core";
+
+class ErrorBoundary extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            hasError: false
+        }
+    }
+
+    static getDerivedStateFromError(error) {
+        return {
+            hasError: true
+        }
+    }
+
+    componentDidCatch(error, errorInfo) {
+        // You can also log the error to an error reporting service
+        // logErrorToMyService(error, errorInfo);
+        console.log(`error = ${error}, errorInfo = ${JSON.stringify(errorInfo)}`)
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <Grid container justify="center" style={{paddingTop: "2rem", fontSize: "3rem"}}>
+                    <p>Oops! Something went wrong....</p>
+                </Grid>
+            )
+        }
+        return this.props.children
+    }
+}
+
+export default ErrorBoundary;

client/src/actions/index.js

@@ -8,7 +8,7 @@ import {
     SAVE_QUERY_STATUS,
     SHIPPING_ADDRESS_CONFIRMED,
     PAYMENT_INFO_CONFIRMED,
-    PAYMENT_RESPONSE, CART_TOTAL, HANDLE_SIGN_UP_RESET, HANDLE_GOOGLE_AUTH_SIGN_IN, HANDLE_GOOGLE_AUTH_SIGN_OUT,
+    PAYMENT_RESPONSE, CART_TOTAL, RESET_SIGN_UP, HANDLE_GOOGLE_AUTH_SIGN_IN, HANDLE_GOOGLE_AUTH_SIGN_OUT,
 } from './types';
 import {INTERNAL_SERVER_ERROR_CODE, BAD_REQUEST_ERROR_CODE} from '../constants/http_error_codes'
 import {SHOPPERS_PRODUCT_INFO_COOKIE, CART_TOTAL_COOKIE, AUTH_DETAILS_COOKIE} from '../constants/cookies'
@@ -48,7 +48,6 @@ export const signIn = formValues => async dispatch => {
 
     const hash = Base64.encode(`${formValues.username}:${formValues.password}`);
     authServiceAPI.defaults.headers.common['Authorization'] = `Basic ${hash}`
-    authServiceAPI.defaults.timeout = 5000;
     const response = await authServiceAPI.post('/authenticate').catch(err => {
         log.info(`[ACTION]: dispatch HANDLE_SIGN_IN_ERROR err.message = ${err.message}`)
         dispatch({type: HANDLE_SIGN_IN_ERROR, payload: err.message});
@@ -101,7 +100,6 @@ export const signInUsingOAuth = googleAuth => async dispatch => {
                     // try {
                         // let userProfile = googleAuth.currentUser.get().getBasicProfile()
                         // if (userProfile) {
-                        //     authServiceAPI.defaults.timeout = 15000;
                         //     const response = await authServiceAPI.post('/signin-using-google-auth', {
                         //         'id': userProfile.getId(),
                         //         'firstname': userProfile.getGivenName(),
@@ -165,17 +163,9 @@ export const signOutUsingOAuth = googleAuth => async dispatch => {
     }
 }
 
-
-export const resetSignUp = () => {
-    return {
-        type: HANDLE_SIGN_UP_RESET
-    }
-}
-
 export const signUp = formValues => async dispatch => {
     log.info(`[ACTION]: signUp API = ${JSON.stringify(formValues)}.`)
 
-    authServiceAPI.defaults.timeout = 15000;
     const response = await authServiceAPI.post('/signup', {
         'username': formValues.username,
         'password': formValues.password,
@@ -203,9 +193,10 @@ export const sendPaymentToken = (token) => async dispatch => {
     log.info(`Token = ${JSON.stringify(token)}`)
     let config = {
         method: 'post',
-        url: `http://localhost:${process.env.REACT_APP_PAYMENT_SERVICE_PORT}/payment`,
+        url: `${process.env.REACT_APP_PAYMENT_SERVICE_URL}/payment`
+            || `http://localhost:${process.env.REACT_APP_PAYMENT_SERVICE_PORT}/payment`,
         headers: {
-            'Content-Type': 'application/json'
+            'Content-Type': 'application/json',
         },
         data: JSON.stringify(token)
     };
@@ -225,11 +216,6 @@ export const sendPaymentToken = (token) => async dispatch => {
                 history.push(`/checkout/success-payment/${response.data.charge_id}`)
                 Cookies.remove(CART_TOTAL_COOKIE)
                 Cookies.remove(SHOPPERS_PRODUCT_INFO_COOKIE)
-
-                dispatch({
-                    type: CART_TOTAL,
-                    payload: 0
-                })
             }
 
             dispatch({
@@ -239,11 +225,12 @@ export const sendPaymentToken = (token) => async dispatch => {
 
         })
         .catch(function (error) {
-            console.log(error);
+            log.error(`[sendPaymentToken]: Error = ${error} `)
             dispatch({
                 type: PAYMENT_RESPONSE,
                 payload: {error: true}
             })
+            return false
         });
 }
 
@@ -252,7 +239,6 @@ export const getDataViaAPI = (type, uri) => async dispatch => {
     log.info(`[ACTION]: invokeAndDispatchAPIData Calling API = ${uri}.`)
 
     if (uri) {
-        commonServiceAPI.defaults.timeout = 15000;
         uri = uri.replace(/\s/g, '')
         let responseError = false
         const response = await commonServiceAPI.get(uri)

client/src/actions/types.js

@@ -3,11 +3,12 @@
 export const HANDLE_SIGN_IN= "HANDLE_SIGN_IN";
 export const HANDLE_SIGN_OUT= "HANDLE_SIGN_OUT";
 export const HANDLE_SIGN_IN_ERROR= "HANDLE_SIGN_IN_ERROR";
+export const RESET_SIGN_IN_ERROR = "RESET_SIGN_IN_ERROR";
 export const SET_GOOGLE_AUTH= "SET_GOOGLE_AUTH";
 export const HANDLE_GOOGLE_AUTH_SIGN_IN= "HANDLE_GOOGLE_AUTH_SIGN_IN";
 export const HANDLE_GOOGLE_AUTH_SIGN_OUT= "HANDLE_GOOGLE_AUTH_SIGN_OUT";
 export const HANDLE_SIGN_UP_ERROR= "HANDLE_SIGN_UP_ERROR";
-export const HANDLE_SIGN_UP_RESET= "HANDLE_SIGN_UP_RESET";
+export const RESET_SIGN_UP= "RESET_SIGN_UP";
 export const HANDLE_TAB_HOVER_EVENT = "HANDLE_TAB_HOVER_EVENT";
 
 export const LOAD_HOME_PAGE = "LOAD_HOME_PAGE";

client/src/api/service_api.js

@@ -2,13 +2,15 @@ import axios from 'axios';
 
 const {
     REACT_APP_COMMON_DATA_SERVICE_PORT,
-    REACT_APP_AUTHENTICATION_SERVICE_PORT
+    REACT_APP_AUTHENTICATION_SERVICE_PORT,
+    REACT_APP_COMMON_DATA_SERVICE_URL,
+    REACT_APP_AUTHENTICATION_SERVICE_URL,
 } = process.env
 
 export const authServiceAPI = axios.create({
-    baseURL: `http://localhost:${REACT_APP_AUTHENTICATION_SERVICE_PORT}`
+    baseURL: REACT_APP_AUTHENTICATION_SERVICE_URL || `http://localhost:${REACT_APP_AUTHENTICATION_SERVICE_PORT}`
 })
 
 export const commonServiceAPI = axios.create({
-    baseURL: `http://localhost:${REACT_APP_COMMON_DATA_SERVICE_PORT}`
+    baseURL: REACT_APP_COMMON_DATA_SERVICE_URL || `http://localhost:${REACT_APP_COMMON_DATA_SERVICE_PORT}`
 })

client/src/components/routes/checkout/paymentButton.js

@@ -17,6 +17,7 @@ class PaymentButton extends Component {
     }
 
     componentDidMount() {
+        log.info(`[PaymentButton] Component Did Mount...paymentResponse = ${JSON.stringify(this.props.paymentResponse)}`)
         if(this.props.paymentResponse && this.props.paymentResponse.hasOwnProperty("error")) {
             this.setState({paymentBtnClicked: true})
         }
@@ -31,18 +32,22 @@ class PaymentButton extends Component {
 
         this.setState({paymentBtnClicked: true})
 
-        this.props.sendPaymentToken({
+        let value = this.props.sendPaymentToken({
             ...token,
             amount: this._GrandTotal,
             currency: "USD",
             address: this.props.shippingAddressForm.values,
             addToCart: this.props.addToCart,
             shippingOption: this.props.shippingOption
         })
+
+        if(value) {
+            this.setState({paymentBtnClicked: false})
+        }
     }
 
     renderButton = () => {
-        log.info(`[PaymentButton] renderButton....`)
+        log.info(`[PaymentButton] renderButton.....`)
         return (
             <Grid container justify="center" style={{padding: "2rem 0 2rem 0"}}>
                 <Grid item lg={9}>

client/src/components/routes/navbar/navBar.js

@@ -81,28 +81,26 @@ const NavBar = props => {
      */
     useEffect(() => {
         log.info(`[NavBar]: Component did update.`)
-
+        
         if (!googleAuthReducer.oAuth) {
-            try {
-                window.gapi.load('client:auth2', () => {
-                    window.gapi.client.init({
-                        clientId: process.env.REACT_APP_GOOGLE_AUTH_CLIENT_ID,
-                        scope: 'profile'
-                    }).then(() => {
-                        const auth = window.gapi.auth2.getAuthInstance();
-                        dispatch({
-                            type: SET_GOOGLE_AUTH,
-                            payload: {
-                                firstName: auth.currentUser.get().getBasicProfile() ?
-                                    auth.currentUser.get().getBasicProfile().getGivenName() : null,
-                                oAuth: auth
-                            }
-                        })
-                    });
-                });
-            } catch (e) {
-                log.info(`[Navbar] Failed to load google OAuth.`)
-            }
+            window.gapi.load('client:auth2', () => {
+                window.gapi.client.init({
+                    clientId: process.env.REACT_APP_GOOGLE_AUTH_CLIENT_ID,
+                    scope: 'profile'
+                }).then(() => {
+                    const auth = window.gapi.auth2.getAuthInstance();
+                    dispatch({
+                        type: SET_GOOGLE_AUTH,
+                        payload: {
+                            firstName: auth.currentUser.get().getBasicProfile() ?
+                                auth.currentUser.get().getBasicProfile().getGivenName() : null,
+                            oAuth: auth
+                        }
+                    })
+                }).catch(function (e) {
+                    log.error(`[Navbar] Failed to load google OAuth`)
+                })
+            });
         }
 
         if (isSignedIn === null) {
@@ -160,10 +158,15 @@ const NavBar = props => {
             fName = "S"
         }
 
-        authIcon = <Avatar className={classes.orange} sizes="small"
-                           style={{width: 20, height: 20, marginBottom: 3}}>
-                            {fName.charAt(0).toUpperCase()}
-                    </Avatar>
+        authIcon = <Avatar sizes="small"
+                           style={{
+                               width: 20, height: 20,
+                               backgroundColor: "orange",
+                               filter: "saturate(5)"
+                           }}>
+
+            {fName.charAt(0).toUpperCase()}
+        </Avatar>
         authLabel = "Sign Out"
     } else {
         authIcon = <AccountCircle/>
@@ -260,12 +263,12 @@ const NavBar = props => {
         setHamburgerBtnState(false)
     }
 
-    const renderIndependentElem = (eventHandler, icon, label) => {
+    const renderIndependentElem = (eventHandler, icon, label, paddingTop) => {
         return (
             <Grid item>
                 <Grid container direction="column" alignItems="center"
                       onClick={eventHandler} style={{cursor: 'pointer'}}>
-                    <Grid item style={{height: 21, width: 21}}>
+                    <Grid item style={{height: 21, width: 21, paddingTop: paddingTop}}>
                         {icon}
                     </Grid>
                     <Grid item style={{color: "black", fontSize: "0.8rem", fontWeight: 'bold'}}>
@@ -335,11 +338,13 @@ const NavBar = props => {
                             <div className={classes.growHalf}/>
 
                             <Hidden xsDown>
-                                {renderIndependentElem(changeAuthStatusHandler, authIcon, authLabel)}
+                                {renderIndependentElem(changeAuthStatusHandler, authIcon, authLabel,
+                                    2)}
 
                                 <div className={classes.growQuarter}/>
 
-                                {renderIndependentElem(changePageToShoppingBagHandler, <BagButton/>, "Bag")}
+                                {renderIndependentElem(changePageToShoppingBagHandler, <BagButton/>,
+                                    "Bag", 0)}
                             </Hidden>
 
 

client/src/components/routes/signin/signIn.js

@@ -5,14 +5,16 @@ import log from "loglevel";
 import {Divider} from "semantic-ui-react";
 import {Link} from "react-router-dom";
 import {Dimmer, Loader} from 'semantic-ui-react'
-import {useSelector} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
 import GoogleAuthButton from "./GoogleAuthButton";
 import {DocumentTitle} from "../../ui/documentTitle";
+import {RESET_SIGN_IN_ERROR} from "../../../actions/types";
 
 const SignIn = () => {
     const [isLoading, setIsLoading] = useState(false);
     const {isSignedIn, timestamp} = useSelector(state => state.signInReducer)
     const {isSignedInUsingOAuth} = useSelector(state => state.googleAuthReducer)
+    const dispatch = useDispatch()
 
     const setIsLoadingState = () => {
         setIsLoading(true);
@@ -25,6 +27,18 @@ const SignIn = () => {
         // eslint-disable-next-line
     }, [timestamp])
 
+    useEffect(() => {
+
+        return () => {
+            log.info(`[SignIn] Component will unmount...`)
+            dispatch({
+                type: RESET_SIGN_IN_ERROR
+            })
+        }
+
+        // eslint-disable-next-line
+    }, [])
+
     if ((isSignedIn !== null && isSignedIn)
         || (isSignedInUsingOAuth !== null && isSignedInUsingOAuth)) {
         log.info(`[SignIn] Already signed In...`)