Added docker support for mysql, react-ui and common-data-service

Author: ujjavaldesai07

client/Dockerfile

@@ -0,0 +1,20 @@
+# Base Package
+FROM node:14
+
+MAINTAINER Ujjaval Desai
+
+# Create app directory
+WORKDIR /usr/src/app
+
+# Install app dependencies
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+# where available (npm@5+)
+COPY package*.json ./
+
+RUN npm install
+
+# Bundle app source
+COPY . .
+
+# Initiate npm start
+CMD [ "npm", "start" ]

client/public/index.html

@@ -22,7 +22,7 @@
       Only files inside the `public` folder can be referenced from the HTML.
 
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
+      work correctly both with react-ui-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>

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

@@ -1,4 +1,4 @@
-import React, {Component, useEffect, useState} from 'react'
+import React, {Component} from 'react'
 import StripeCheckout from 'react-stripe-checkout';
 import {Button, Grid} from "@material-ui/core";
 import {connect} from "react-redux";
@@ -12,7 +12,6 @@ class PaymentButton extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            grandTotal: null,
             paymentBtnClicked: false
         }
     }

client/src/components/routes/home/home.js

@@ -27,24 +27,30 @@ const Home = props => {
         // eslint-disable-next-line
     }, [homePageDataReducer]);
 
+    // we will be showing spinner till we get the data via API
     if (homeAPIData.isLoading) {
         log.info("[Home]: loading")
         return <Spinner/>
     } else {
-        if (homeAPIData.hasOwnProperty("data")) {
-            if (Object.entries(homeAPIData.data).length !== HOME_PAGE_API_OBJECT_LEN) {
 
-                log.info(`[Home]: homeAPIData.data length didn't matched` +
-                    `actual length = ${Object.entries(homeAPIData.data).length},` +
-                    `expected length = ${HOME_PAGE_API_OBJECT_LEN}`)
+        // check if we got the data from the API
+        if (homeAPIData.hasOwnProperty("data")
+            && Object.entries(homeAPIData.data).length !== HOME_PAGE_API_OBJECT_LEN) {
 
-                return <BadRequest/>
-            }
-        } else {
-            if (homeAPIData.hasOwnProperty('statusCode')) {
-                log.info(`[Home]: homeAPIData.statusCode = ${homeAPIData.statusCode}`)
-                return <HTTPError statusCode={homeAPIData.statusCode}/>
-            }
+            log.info(`[Home]: homeAPIData.data length didn't matched` +
+                `actual length = ${Object.entries(homeAPIData.data).length},` +
+                `expected length = ${HOME_PAGE_API_OBJECT_LEN}`)
+
+            // if we can't get the data then the front end
+            // didn't use the API correctly.
+            return <BadRequest/>
+
+            // if statusCode exist in the object then
+            // we are sure that something went wrong at server side while
+            // fetching the API
+        } else if (homeAPIData.hasOwnProperty('statusCode')) {
+            log.info(`[Home]: homeAPIData.statusCode = ${homeAPIData.statusCode}`)
+            return <HTTPError statusCode={homeAPIData.statusCode}/>
         }
     }
 

client/src/components/routes/home/homeMenuIcons.js

@@ -4,21 +4,16 @@ import {Link} from "react-router-dom";
 import log from 'loglevel';
 import {MAX_PRODUCTS_PER_PAGE} from "../../../constants/constants";
 import {useSelector} from "react-redux";
-import {BadRequest} from "../../ui/error/badRequest";
 
 const HomeMenuIcons = () => {
     const homeAPIData = useSelector(state => state.homePageDataReducer)
 
     const renderImageList = (imageList) => {
 
-        if(!imageList) {
-            log.info(`[HomeMenuIcons]: imageList is null`)
-            return <BadRequest/>
-        }
-
         // filter out images which are related to home icons.
         imageList = imageList.filter(image => image.filePath.search("icon") !== -1)
 
+        // map the image path and link
         return imageList.map(info => {
             return (
                 <Grid key={info.id} item sm={2}>

client/src/components/routes/home/topCategoriesAndBrands.js

@@ -1,11 +1,9 @@
 import React from 'react';
-import {Grid, Box, Typography} from "@material-ui/core";
+import {Grid} from "@material-ui/core";
 import {Link} from "react-router-dom";
 import log from 'loglevel';
 import {MAX_PRODUCTS_PER_PAGE} from "../../../constants/constants";
 import {useSelector} from "react-redux";
-import Hidden from "@material-ui/core/Hidden";
-import {BadRequest} from "../../ui/error/badRequest";
 
 const queryType = {
     brand: 1,
@@ -16,10 +14,6 @@ const TopCategoriesAndBrands = () => {
     const homeAPIData = useSelector(state => state.homePageDataReducer)
 
     const renderImageList = (imageList, filterQueryType) => {
-        if(!imageList) {
-            log.info(`[TopCategoriesAndBrands]: imageList is null`)
-            return <BadRequest/>
-        }
 
         return imageList.map(info => {
 

docker-compose.yml

@@ -97,11 +97,6 @@ public ProductInfo findAddressById(Integer id) {
         return productInfo;
     }
 
-    public String getCurrentHostUrl() throws UnknownHostException {
-        return String.format("%s:%s", InetAddress.getLocalHost().getHostAddress(),
-                environment.getProperty("local.server.port"));
-    }
-
     public void save() {
 //        AddressInfo addressInfo1 = new AddressInfo("2600 bay area blvd.", "Apt. 304", "77058", "Tx", "USA");
 //        ContactInfo contactInfo = new ContactInfo("[email protected]", "534636453", "345345353", null);
@@ -132,8 +127,7 @@ public void save() {
     }
 
     public String appendHostUrl(String path) throws UnknownHostException {
-        String currentHostUrl = getCurrentHostUrl();
-        return String.format("http://%s/web-images/%s", currentHostUrl, path);
+        return String.format("http://localhost:%s/web-images/%s", environment.getProperty("local.server.port"), path);
     }
 
     public MainScreenResponse getHomeScreenData() throws UnknownHostException {