Added images to cloudinary CDN server

Author: ujjavaldesai07

.gitignore

@@ -31,6 +31,7 @@ client/yarn-debug.log*
 client/yarn-error.log*
 
 # server
+server/common-data-service/src/main/resources/static/images
 server/authentication-service/.idea/
 server/common-data-service/.idea/
 server/seller-account-service/.idea/

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

@@ -175,8 +175,8 @@ export function ShippingOptions() {
         for (const [id, product] of Object.entries(shoppingBagProducts.data)) {
             imageList.push(
                 <Grid key={id} item sm={2} style={{alignSelf: "center", paddingBottom: "1rem"}}>
-                    <img key={product.id} src={product.imageName}
-                         alt={product.imageName} width="inherit" height={80}/>
+                    <img key={product.id} src={product.imageURL}
+                         alt={product.name} width="inherit" height={80}/>
                 </Grid>
             )
         }

client/src/components/routes/detail/productDetails.js

@@ -155,7 +155,7 @@ function ProductDetails(props) {
             <Grid container>
 
                 <Grid item container justify="center" sm={6} md={5} lg={4}>
-                    <img src={selectedProduct.imageName} alt={selectedProduct.name}
+                    <img src={selectedProduct.imageURL} alt={selectedProduct.name}
                          style={{height: "100%", width: "90%", paddingBottom: "2rem"}}
                          title={selectedProduct.name}/>
                 </Grid>

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

@@ -23,8 +23,11 @@ const Home = props => {
 
     // Main screen API is loaded during Component Did mount
     useEffect(() => {
-        log.info("[Home]: component did mount and home API is called.")
-        props.getDataViaAPI(LOAD_HOME_PAGE, HOME_PAGE_DATA_API);
+        log.info("[Home]: component did mount.")
+
+        if(!homeAPIData.hasOwnProperty("data")) {
+            props.getDataViaAPI(LOAD_HOME_PAGE, HOME_PAGE_DATA_API);
+        }
 
         // eslint-disable-next-line
     }, [homePageDataReducer]);

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

@@ -11,14 +11,14 @@ const HomeMenuIcons = () => {
     const renderImageList = (imageList) => {
 
         // filter out images which are related to home icons.
-        imageList = imageList.filter(image => image.filePath.search("icon") !== -1)
+        imageList = imageList.filter(image => image.imageLocalPath.search("icon") !== -1)
 
         // map the image path and link
         return imageList.map(info => {
             return (
                 <Grid key={info.id} item sm={2}>
                     <Link to={`/products?q=${info.link}::page=0,${MAX_PRODUCTS_PER_PAGE}`}>
-                        <img src={info.filePath} alt={info.filePath} style={{width: '100%', height: '100%'}}
+                        <img src={info.imageURL} alt={info.imageLocalPath} style={{width: '100%', height: '100%'}}
                              title={info.link}/>
                     </Link>
                 </Grid>

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

@@ -38,7 +38,7 @@ const TopCategoriesAndBrands = () => {
             return (
                 <Grid item xs={6} sm={2} key={info.title} style={{textAlign: "center"}}>
                     <Link to={`/products?q=${filterQuery}::page=0,${MAX_PRODUCTS_PER_PAGE}`}>
-                        <img src={info.filePath} alt={info.filePath} style={{width: '80%', height: '100%'}}
+                        <img src={info.imageURL} alt={info.imageLocalPath} style={{width: '80%', height: '100%'}}
                              title={info.title}/>
                     </Link>
                 </Grid>

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

@@ -32,13 +32,13 @@ const VerticalSlider = () => {
         }
 
         // filter out images which are not for carousels.
-        imageList = imageList.filter(image => image.filePath.search("icon") === -1)
+        imageList = imageList.filter(image => image.imageLocalPath.search("icon") === -1)
 
         log.trace("[VerticalSlider]: Rendering renderImageList imageList = " + JSON.stringify(imageList))
-        return imageList.map(({id, filePath}) => {
-            log.trace(`[VerticalSlider]: Rendering renderImageList imageList filePath = ${filePath}`)
+        return imageList.map(({id, imageLocalPath, imageURL}) => {
+            log.trace(`[VerticalSlider]: Rendering renderImageList imageList filePath = ${imageLocalPath}`)
             return (
-                <img key={id} src={filePath} alt={filePath}/>
+                <img key={id} src={imageURL} alt={imageLocalPath}/>
             )
         });
     };

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

@@ -81,7 +81,9 @@ const NavBar = props => {
                 props.setTokenFromCookie(tokenIdFromCookie)
             }
         }
-        props.getDataViaAPI(LOAD_TABS_DATA, TABS_DATA_API)
+        if(!tabsAPIData.hasOwnProperty("data")) {
+            props.getDataViaAPI(LOAD_TABS_DATA, TABS_DATA_API)
+        }
 
         setAddToCartValuesFromCookie()
 

client/src/components/routes/product/filterProductDisplay.js

@@ -91,7 +91,7 @@ const FilterProductDisplay = props => {
                         <Grid item>
                             <Link to={`${DETAILS_ROUTE}${history.location.search}::product_id=${info.id}`}
                                   onClick={handleImageClick(info)}>
-                                <img src={info.imageName} alt={info.name}
+                                <img src={info.imageURL} alt={info.name}
                                      style={{height: "100%", width: "100%"}}
                                      title={info.name}/>
                             </Link>

client/src/components/routes/shoppingBag.js

@@ -212,7 +212,8 @@ function ShoppingBag(props) {
             shoppingBagProductsList.push(
                 <Grid item container key={product.id} style={{border: '1px solid #eaeaec', margin: "1rem 0"}}>
                     <Grid item container justify="center" xs={5} sm={3}>
-                        <img src={product.imageName} style={{height: "90%", width: "80%", paddingTop: "1rem"}}/>
+                        <img src={product.imageURL} alt={product.name}
+                             style={{height: "90%", width: "80%", paddingTop: "1rem"}}/>
                     </Grid>
 
                     <Grid item container xs={7} sm={9}>