Merge branch 'add-banner-to-navbar' into 'Dev'

Add banner to navbar

See merge request !29

ecom-service/src/main/java/com/nisum/ecomservice/controller/CartController.java

@@ -18,8 +18,8 @@ public class CartController {
     @Autowired
     private CartService cartService;
 
-    @Autowired
-    private CartRepository cartRepository;
+//    @Autowired
+//    private CartRepository cartRepository;
 
     @GetMapping("/api/carts")
     public ResponseEntity<Flux<CartDTO>>getAllUserCarts(){

ecom-service/src/main/resources/application.properties

+# UNCOMMENT FOR PRODUCTION DEPLOYMENT
+#spring.data.mongodb.uri=${MONGOCONNECTION}
+
+# UNCOMMENT FOR LOCAL TESTING
 spring.data.mongodb.uri=mongodb+srv://ecom:ecom@e-commerce-db-cluster.va815.mongodb.net/e-commerce-db?retryWrites=true&w=majority
+
 spring.data.mongodb.database=e-commerce-db
 security.enable-csrf=false
 server.port=8080
-products.apiUrl=http://localhost:8083
-promos.apiUrl=http://localhost:8082
-orders.apiUrl=http://localhost:8084
\ No newline at end of file
+
+products.apiUrl=http://13.64.175.185:8080
+promos.apiUrl=http://40.118.215.99:8082
+orders.apiUrl=http://138.91.251.222:8086
+
+#products.apiUrl=http://localhost:8083
+#promos.apiUrl=http://localhost:8082
+#orders.apiUrl=http://localhost:8084

ecom-web/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage

ecom-web/src/components/Header/header.css

@@ -31,7 +31,7 @@
     cursor: default;
     position: absolute;
     left: 50%;
-    margin-left: -50px;
+    margin-left: -56px;
 }
 
 .ms-auto navbar-nav {
@@ -116,4 +116,9 @@
 .dropdown-item a {
     color: rgba(0, 0, 0, 0.74);
     text-decoration: none;
+}
+
+.company-banner {
+    height: 50;
+    width: 100px;
 }
\ No newline at end of file

ecom-web/src/components/Header/header.js

@@ -9,31 +9,25 @@ import { AiOutlineShoppingCart } from 'react-icons/ai'
 import AnimateOnChange from 'react-animate-on-change'
 import { GoogleLogout } from 'react-google-login';
 import './header.css';
-
 const clientId = `${process.env.REACT_APP_GOOGLE_CLIENT_ID}.apps.googleusercontent.com`;
-
 export default class Header extends Component {
     constructor(props) {
         super(props)
         this.state = {
             isLoggedIn: true
         }
-
         this.logOutSuccess = this.logOutSuccess.bind(this);
         this.toggleLoggedIn = this.toggleLoggedIn.bind(this);
     }
-
     toggleLoggedIn() {
         const prevState = this.state.isLoggedIn;
         this.setState({ isLoggedIn: !prevState })
     }
-
     logOutSuccess = (response) => {
         this.props.logOut()
         this.props.clearCart()
         this.toggleLoggedIn()
     }
-
     render() {
         let userName
         if (!!this.props.user?.currentUser){
@@ -41,12 +35,11 @@ export default class Header extends Component {
         } else{
             userName = "Guest"
         }
-
         return (
             <div>
                 <Navbar id="header-nav" collapseOnSelect expand="sm" bg="light">
                     <LinkContainer to="/product-market" >
-                        <Navbar.Brand>Ascend</Navbar.Brand>
+                        <NavLink to="/product-market"><img alt="" src="./company-banner.jpeg" className="company-banner" /></NavLink>
                     </LinkContainer>
                     <div id="ecom-title">Ecommerce</div>
                     <Navbar.Toggle aria-controls="responsive-navbar-nav" />
@@ -102,5 +95,4 @@ export default class Header extends Component {
             </div>
         )
     }
-}
-
+}
\ No newline at end of file

ecom-web/src/components/checkout/checkout.js

@@ -86,6 +86,7 @@ export default function Checkout() {
         }
         else { ; }
     }, [submitButtonActive])
+    
     let handleSubmit = () => {
         console.log("Submitting Order!")
         let orderInfo = {
@@ -108,7 +109,7 @@ export default function Checkout() {
                 "cartItems": cart
             }
         }
-        console.log(orderInfo)
+
         dispatch(dispatchOrderInfo(orderInfo))
     }
 

ecom-web/src/components/session/session.jsx

@@ -38,7 +38,8 @@ export default class Session extends Component {
     }
 
     loginFailed = (response) => {
-        console.log('Login failed: res:', response);
+        // console.log('Login failed: res:', response);
+        return response
     }
     
     render() {

ecom-web/src/components/shopping-cart/shopping-cart.js

@@ -5,7 +5,9 @@ import { useSelector, useDispatch } from 'react-redux'
 import { Link, Redirect } from 'react-router-dom'
 import { updateUserCart} from './../../actions/cart_actions'
 import { calcTotalPrice, calcNumItems, storeCartItemsInProcessing } from './../../actions/cart_processing_actions'
+
 export default function ShoppingCart() {
+  
   const dispatch = useDispatch()
   const userSession = useSelector(state => state.user.currentUser)
   const allProducts = useSelector(state => state.market.products)
@@ -97,4 +99,4 @@ export default function ShoppingCart() {
 
     </div>
   )
-}
\ No newline at end of file
+}

ecom-web/src/config.js

 class Config {
+    // static baseApiUrl = "http://13.93.237.130:8084"; //env file
     static baseApiUrl = "http://localhost:8080"; //env file
     static orderHistoryApiUrlMethod = (userId) => `${this.baseApiUrl}/api/orders/byUser/${userId}`;
 

ecom-web/src/resources/stylesheets/product-market.css

@@ -129,6 +129,8 @@
 
 #prod-name {
     font-size: 20px;
+    max-height: 35px;
+    overflow: hidden;
 }
 
 #prod-price {
@@ -313,7 +315,6 @@
 
 #prod-details-img {
     width: 100%;
-    height: 65%;
 }
 
 #no-image-display {
@@ -342,6 +343,7 @@
 
 #product-details-left {
     width: 65%;
+    overflow: scroll;
 }
 
 #product-details-condenser {
@@ -359,8 +361,7 @@
     left: 3px;
     bottom: 89px;
     height: 48px;
-    padding: 12px;
-    padding: 3px 10px;
+    padding: 12px 10px;
     border-radius: 5px;
     cursor: default;
     background-color: rgb(248, 76, 76);

header/header.js

+import React, { Component } from 'react'
+import Nav from 'react-bootstrap/Nav'
+import Navbar from 'react-bootstrap/Navbar'
+import NavDropdown from 'react-bootstrap/NavDropdown'
+import {NavLink} from 'react-router-dom'
+import Session from '../session/session-container'
+import {LinkContainer} from 'react-router-bootstrap'
+import { AiOutlineShoppingCart } from 'react-icons/ai'
+import AnimateOnChange from 'react-animate-on-change'
+import { GoogleLogout } from 'react-google-login';
+import './header.css';
+
+const clientId = `${process.env.REACT_APP_GOOGLE_CLIENT_ID}.apps.googleusercontent.com`;
+
+export default class Header extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            isLoggedIn: true
+        }
+
+        this.logOutSuccess = this.logOutSuccess.bind(this);
+        this.toggleLoggedIn = this.toggleLoggedIn.bind(this);
+    }
+
+    toggleLoggedIn() {
+        const prevState = this.state.isLoggedIn;
+        this.setState({ isLoggedIn: !prevState })
+    }
+
+    logOutSuccess = (response) => {
+        this.props.logOut()
+        this.props.clearCart()
+        this.toggleLoggedIn()
+    }
+
+    render() {
+        let userName
+        if (!!this.props.user?.currentUser){
+            userName = this.props.user.currentUser.firstName
+        } else{
+            userName = "Guest"
+        }
+
+        return (
+            <div>
+                <Navbar id="header-nav" collapseOnSelect expand="sm" bg="light">
+                    <LinkContainer to="/product-market" >
+                        <Navbar.Brand>Ascend</Navbar.Brand>
+                    </LinkContainer>
+                    <div id="ecom-title">Ecommerce</div>
+                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+                    <Navbar.Collapse id="responsive-navbar-nav">
+                        <Nav className="ms-auto">
+                            {!this.props.user?.currentUser ? 
+                                <Navbar.Text className="nav-bar-text-default" id="white-color">Hello Guest</Navbar.Text> :
+                                <NavDropdown 
+                                    className="nav-bar-text"
+                                    title={ 
+                                        <div>
+                                            <img id="user-image" src={ this.props.image } />
+                                            Hello {userName}
+                                        </div>
+                                    }
+                                    id="collasible-nav-dropdown"
+                                >
+                                    <NavDropdown.Item ><NavLink to="/orders">Order History</NavLink></NavDropdown.Item>
+                                    <NavDropdown.Item>
+                                        <GoogleLogout
+                                            clientId={clientId}
+                                            buttonText="Logout"
+                                            onLogoutSuccess={this.logOutSuccess}
+                                            render={props => (<div onClick={props.onClick}>Logout</div>)}
+                                        >
+                                        </GoogleLogout>
+                                    </NavDropdown.Item>
+                                </NavDropdown>
+                            }
+                            {
+                                this.state.isLoggedIn ? 
+                                <Session className="nav-bar-text" toggleLoggedIn={ this.toggleLoggedIn } />
+                                :
+                                ""
+                            }
+                            <LinkContainer to="/cart" >
+                                <Nav.Link to="/cart" className="cart-link" id={this.props.user?.currentUser ? "" : "disabled-cart-link"} disabled={ !this.props.user?.currentUser }>
+                                    <AiOutlineShoppingCart fill="#EBEBEB" size={30} />
+                                </Nav.Link>
+                            </LinkContainer>
+                            <AnimateOnChange
+                                baseClassName="items-in-cart"
+                                animationClassName="items-in-cart-animation"
+                                animate={ this.props.diff != 0 }
+                            >
+                                <LinkContainer to="/cart" >
+                                    <Nav.Link to="/cart" className={ this.props.cartLength > 0 ? "items-in-cart" : "no-show" }>{ this.props.cartLength }</Nav.Link>
+                                </LinkContainer>
+                            </AnimateOnChange>
+                        </Nav>
+                    </Navbar.Collapse>
+                </Navbar>
+            </div>
+        )
+    }
+}
+