Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
E
ecommerce-maven
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Ascend
ecommerce-maven
Commits
e01ef5cd
Commit
e01ef5cd
authored
May 11, 2021
by
Xiyang Lu
Browse files
Options
Browse Files
Download
Plain Diff
resolve pull conflict
parents
815d53c2
1f99e20f
Changes
25
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
25 changed files
with
20863 additions
and
105 deletions
+20863
-105
UserRequestBody.java
...ain/java/com/nisum/ecomservice/model/UserRequestBody.java
+2
-0
package-lock.json
ecom-web/package-lock.json
+20454
-24
index.html
ecom-web/public/index.html
+5
-1
cart_actions.js
ecom-web/src/actions/cart_actions.js
+25
-0
product_actions.js
ecom-web/src/actions/product_actions.js
+1
-1
header.css
ecom-web/src/components/Header/header.css
+21
-1
header.js
ecom-web/src/components/Header/header.js
+5
-7
PaymentMethod.js
ecom-web/src/components/checkout/PaymentMethod.js
+1
-1
ReviewOrder.js
ecom-web/src/components/checkout/ReviewOrder.js
+1
-1
ShippingAddress.js
ecom-web/src/components/checkout/ShippingAddress.js
+1
-1
SubmitOrder.js
ecom-web/src/components/checkout/SubmitOrder.js
+1
-1
checkout.jsx
ecom-web/src/components/checkout/checkout.jsx
+5
-5
product-details.jsx
ecom-web/src/components/product-market/product-details.jsx
+63
-10
product-item.jsx
ecom-web/src/components/product-market/product-item.jsx
+77
-14
product-market-container.jsx
...rc/components/product-market/product-market-container.jsx
+6
-1
product-market.jsx
ecom-web/src/components/product-market/product-market.jsx
+12
-3
root.js
ecom-web/src/components/root.js
+1
-5
session-container.jsx
ecom-web/src/components/session/session-container.jsx
+6
-2
session.jsx
ecom-web/src/components/session/session.jsx
+14
-1
cart_reducer.js
ecom-web/src/reducers/cart_reducer.js
+21
-0
root_reducer.js
ecom-web/src/reducers/root_reducer.js
+2
-0
user_reducer.js
ecom-web/src/reducers/user_reducer.js
+6
-4
product-market.css
ecom-web/src/resources/stylesheets/product-market.css
+112
-22
session.css
ecom-web/src/resources/stylesheets/session.css
+7
-0
cart_api_util.js
ecom-web/src/util/cart_api_util.js
+14
-0
No files found.
ecom-service/src/main/java/com/nisum/ecomservice/model/UserRequestBody.java
View file @
e01ef5cd
...
...
@@ -2,11 +2,13 @@ package com.nisum.ecomservice.model;
import
lombok.AllArgsConstructor
;
import
lombok.Getter
;
import
lombok.NoArgsConstructor
;
import
lombok.Setter
;
@Getter
@Setter
@AllArgsConstructor
@NoArgsConstructor
public
class
UserRequestBody
{
String
idToken
;
String
userId
;
...
...
ecom-web/package-lock.json
View file @
e01ef5cd
This diff is collapsed.
Click to expand it.
ecom-web/public/index.html
View file @
e01ef5cd
...
...
@@ -5,7 +5,11 @@
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
/>
<!-- allow ajax calls -->
<script
type=
"text/javascript"
src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"
></script>
<!-- css animations -->
<link
rel=
"stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>
Ecommerce App
</title>
</head>
<body>
...
...
ecom-web/src/actions/cart_actions.js
View file @
e01ef5cd
<<<<<<<
HEAD
import
{
postCart
}
from
'../util/cart_api_util'
export
const
ADD_NEW_CART
=
"ADD_NEW_CART"
...
...
@@ -13,3 +14,27 @@ export const receieveCart = cart => ({
cart
})
=======
import
*
as
ApiUtil
from
'../util/cart_api_util'
;
export
const
RECEIVE_USER_CART
=
"RECEIVE_USER_CART"
;
export
const
CLEAR_USER_CART
=
"CLEAR_USER_CART"
;
const
receiveUserCart
=
cart
=>
({
type
:
RECEIVE_USER_CART
,
cart
})
export
const
clearUserCart
=
()
=>
({
type
:
CLEAR_USER_CART
})
export
const
fetchUserCart
=
userEmail
=>
dispatch
=>
ApiUtil
.
fetchUserCart
(
userEmail
)
.
then
(
cart
=>
dispatch
(
receiveUserCart
(
cart
)));
export
const
updateUserCart
=
(
updatedCart
,
userEmail
)
=>
dispatch
=>
ApiUtil
.
updateCart
(
updatedCart
,
userEmail
)
.
then
(
cart
=>
dispatch
(
receiveUserCart
(
cart
)));
export
const
createUserCart
=
newCart
=>
dispatch
=>
ApiUtil
.
createCart
(
newCart
)
.
then
(
res
=>
res
.
json
)
>>>>>>>
1
f99e20fa13caaa629b4886d2be1b9d96bb9aa82
ecom-web/src/actions/product_actions.js
View file @
e01ef5cd
ecom-web/src/components/Header/header.css
View file @
e01ef5cd
.order-history-nav
{
.order-history-nav
,
.products-nav
,
#nav-bar-text
,
.cart-nav
{
padding-left
:
10px
;
padding-top
:
11px
;
padding-bottom
:
10px
;
color
:
white
;
}
.nav-home
{
color
:
white
;
font-size
:
20px
;
margin-left
:
10px
;
}
#nav-home-link
{
margin-bottom
:
3px
;
}
#nav-bar-text
{
opacity
:
0.6
;
cursor
:
default
;
}
\ No newline at end of file
ecom-web/src/components/Header/header.js
View file @
e01ef5cd
import
React
,
{
Component
}
from
'react'
import
Nav
from
'react-bootstrap/Nav'
import
Navbar
from
'react-bootstrap/Navbar'
import
NavDropdown
from
'react-bootstrap/NavDropdown'
//
import NavDropdown from 'react-bootstrap/NavDropdown'
import
{
NavLink
}
from
'react-router-dom'
import
Session
from
'../session/session-container'
...
...
@@ -17,21 +17,19 @@ export default class Header extends Component {
return
(
<
div
>
<
Navbar
collapseOnSelect
expand
=
"lg"
bg
=
"primary"
variant
=
"dark"
>
<
Navbar
.
Brand
href
=
"#home"
>
Ascend
Ecommerce
<
/Navbar.Brand
>
<
Navbar
.
Toggle
aria
-
controls
=
"responsive-navbar-nav"
/>
<
NavLink
to
=
"/product-market"
id
=
"nav-home-link"
><
span
className
=
"nav-home"
>
Ascend
Ecommerce
<
/span></
NavLink
>
<
Navbar
.
Collapse
id
=
"responsive-navbar-nav"
>
<
Nav
>
<
Navbar
.
Text
>
<
Navbar
.
Text
id
=
"nav-bar-text"
>
Hello
Guest
!
<
/Navbar.Text
>
<
/Nav
>
<
NavLink
to
=
"/product-market"
><
span
className
=
"
order-history
-nav"
>
Products
<
/span></
NavLink
>
<
NavLink
to
=
"/product-market"
><
span
className
=
"
products
-nav"
>
Products
<
/span></
NavLink
>
<
NavLink
to
=
"/orders"
><
span
className
=
"order-history-nav"
>
Order
History
<
/span></
NavLink
>
<
NavLink
to
=
"/cart"
><
span
className
=
"cart-nav"
>
Cart
<
/span></
NavLink
>
<
Nav
className
=
"ms-auto"
>
<
Session
/>
<
Nav
.
Link
>
Cart
<
/Nav.Link
>
<
/Nav
>
<
/Navbar.Collapse
>
<
/Navbar
>
...
...
ecom-web/src/components/checkout/PaymentMethod.js
View file @
e01ef5cd
import
React
,
{
useState
,
useEffect
}
from
'react'
//
import React, {useState, useEffect} from 'react'
export
default
function
PaymentMethod
()
{
return
(
...
...
ecom-web/src/components/checkout/ReviewOrder.js
View file @
e01ef5cd
import
React
,
{
useState
,
useEffect
}
from
'react'
//
import React, {useState, useEffect} from 'react'
export
default
function
ReviewOrder
()
{
return
(
...
...
ecom-web/src/components/checkout/ShippingAddress.js
View file @
e01ef5cd
import
React
,
{
useState
,
useEffect
}
from
'react'
//
import React, {useState, useEffect} from 'react'
export
default
function
ShippingAddress
()
{
return
(
...
...
ecom-web/src/components/checkout/SubmitOrder.js
View file @
e01ef5cd
import
React
,
{
useState
,
useEffect
}
from
'react'
//
import React, {useState, useEffect} from 'react'
export
default
function
SubmitOrder
()
{
return
(
...
...
ecom-web/src/components/checkout/checkout.jsx
View file @
e01ef5cd
import
React
,
{
useState
,
useEffect
}
from
'react'
import
ShippingAddress
from
'./ShippingAddress.js'
import
PaymentMethod
from
'./PaymentMethod.js'
import
ReviewOrder
from
'./ReviewOrder.js'
import
SubmitOrder
from
'./SubmitOrder.js'
//
import React, {useState, useEffect} from 'react'
//
import ShippingAddress from './ShippingAddress.js'
//
import PaymentMethod from './PaymentMethod.js'
//
import ReviewOrder from './ReviewOrder.js'
//
import SubmitOrder from './SubmitOrder.js'
export
default
function
checkout
()
{
...
...
ecom-web/src/components/product-market/product-details.jsx
View file @
e01ef5cd
...
...
@@ -3,7 +3,43 @@ import React, { Component } from 'react'
export
default
class
ProductDetails
extends
Component
{
constructor
(
props
)
{
super
(
props
)
this
.
state
=
{}
this
.
state
=
{
orderItemQuantity
:
1
,
}
}
handleChange
(
type
)
{
return
e
=>
{
this
.
setState
({
[
type
]:
e
.
target
.
value
})
}
}
handleSubmit
(
e
,
product
)
{
e
.
preventDefault
();
const
newCart
=
Object
.
assign
({},
{
userId
:
this
.
props
.
user
.
currentUser
.
email
,
cartItems
:
JSON
.
parse
(
JSON
.
stringify
(
this
.
props
.
cart
))
// JSON.parse/stringify will deep-dup the object
})
for
(
let
i
=
0
;
i
<
newCart
.
cartItems
.
length
;
i
++
)
{
let
item
=
newCart
.
cartItems
[
i
];
if
(
item
.
productRef
.
sku
===
product
.
sku
)
{
item
.
quantity
+=
parseInt
(
this
.
state
.
orderItemQuantity
)
this
.
props
.
addToCart
(
newCart
,
this
.
props
.
user
.
currentUser
.
email
)
.
then
(()
=>
this
.
props
.
closeModal
(
e
))
return
;
}
}
const
newCartItem
=
{
productRef
:
{
id
:
product
.
sku
,
sku
:
product
.
sku
,
upc
:
product
.
upc
,
},
quantity
:
parseInt
(
this
.
state
.
orderItemQuantity
)
}
newCart
.
cartItems
.
push
(
newCartItem
);
this
.
props
.
addToCart
(
newCart
,
this
.
props
.
user
.
currentUser
.
email
)
.
then
(()
=>
this
.
props
.
closeModal
(
e
))
}
render
()
{
...
...
@@ -11,7 +47,14 @@ export default class ProductDetails extends Component {
<
div
className=
"product-details-container"
>
<
div
id=
"product-details-left"
>
<
div
id=
"prod-details-container"
>
{
this
.
props
.
product
.
productImageUrl
?
<
img
alt=
""
src=
{
this
.
props
.
product
.
productImageUrl
}
id=
"prod-details-img"
/>
:
<
div
id=
"prod-details-no-img"
>
<
p
id=
"prod-details-no-image-display"
>
- No Photo Available -
</
p
>
</
div
>
}
<
div
id=
"prod-details-box"
>
<
div
id=
"details-brand-and-sku-box"
>
<
p
id=
"details-brand"
>
{
this
.
props
.
product
.
brand
}
</
p
>
...
...
@@ -26,8 +69,8 @@ export default class ProductDetails extends Component {
<
div
id=
"product-details-condenser"
>
<
div
id=
"prod-details-shipping"
>
<
p
id=
"express-shipping"
>
Express shipping
&
free returns
</
p
>
<
p
>
Free Delivery:
<
span
>
Everywhere!
</
span
></
p
>
<
p
>
Get it by:
<
span
>
Never!
</
span
></
p
>
<
p
id=
"free-delivery"
>
Free Delivery:
<
span
>
Everywhere!
</
span
></
p
>
<
p
id=
"get-it-by"
>
Get it by:
<
span
>
Never!
</
span
></
p
>
</
div
>
{
this
.
props
.
product
.
promo
?
...
...
@@ -37,12 +80,22 @@ export default class ProductDetails extends Component {
<
p
id=
"prod-details-promo-original-price"
>
Normally: $
{
this
.
props
.
product
.
price
}
</
p
>
</
div
>
:
""
<
p
id=
"prod-details-original-price"
>
Price: $
{
this
.
props
.
product
.
price
}
</
p
>
}
<
input
type=
"number"
id=
"prod-details-quantity"
placeholder=
"Quantity"
/>
<
button
id=
"prod-details-add-to-cart"
>
<
form
className=
"details-add-cart-and-quantity"
onSubmit=
{
e
=>
this
.
handleSubmit
(
e
,
this
.
props
.
product
)
}
>
<
input
type=
"number"
className=
"prod-details-quantity"
disabled=
{
!
this
.
props
.
user
?.
currentUser
}
onChange=
{
this
.
handleChange
(
"orderItemQuantity"
)
}
placeholder=
"Quantity"
value=
{
this
.
state
.
orderItemQuantity
}
/>
<
button
className=
"prod-details-add-to-cart"
disabled=
{
!
this
.
props
.
user
?.
currentUser
}
>
Add to Cart
</
button
>
{
this
.
props
.
user
?.
currentUser
?
""
:<
p
id=
"details-please-log-in-notice"
>
Log in to Add to Cart
</
p
>
}
</
form
>
</
div
>
</
div
>
</
div
>
...
...
ecom-web/src/components/product-market/product-item.jsx
View file @
e01ef5cd
...
...
@@ -7,8 +7,10 @@ export default class ProductItem extends Component {
constructor
(
props
)
{
super
(
props
)
this
.
state
=
{
orderItemQuantity
:
1
,
showDetailsModal
:
false
}
this
.
handleSubmit
=
this
.
handleSubmit
.
bind
(
this
);
this
.
toggleDetailsModal
=
this
.
toggleDetailsModal
.
bind
(
this
);
}
...
...
@@ -17,22 +19,68 @@ export default class ProductItem extends Component {
this
.
setState
({
showDetailsModal
:
!
prevState
});
}
handleChange
(
type
)
{
return
e
=>
{
this
.
setState
({
[
type
]:
e
.
target
.
value
})
}
}
calculateDiscount
(
price
,
discount
)
{
return
(
price
*
((
100
-
discount
)
/
100
)).
toFixed
(
2
);
}
handleSubmit
(
e
,
product
)
{
e
.
preventDefault
();
const
newCart
=
Object
.
assign
({},
{
userId
:
this
.
props
.
user
.
currentUser
.
email
,
cartItems
:
JSON
.
parse
(
JSON
.
stringify
(
this
.
props
.
cart
))
// JSON.parse/stringify will deep-dup the object
})
for
(
let
i
=
0
;
i
<
newCart
.
cartItems
.
length
;
i
++
)
{
let
item
=
newCart
.
cartItems
[
i
];
if
(
item
.
productRef
.
sku
===
product
.
sku
)
{
item
.
quantity
+=
parseInt
(
this
.
state
.
orderItemQuantity
)
this
.
props
.
addToCart
(
newCart
,
this
.
props
.
user
.
currentUser
.
email
);
return
;
}
}
const
newCartItem
=
{
productRef
:
{
id
:
product
.
sku
,
sku
:
product
.
sku
,
upc
:
product
.
upc
,
},
quantity
:
parseInt
(
this
.
state
.
orderItemQuantity
)
}
newCart
.
cartItems
.
push
(
newCartItem
);
this
.
props
.
addToCart
(
newCart
,
this
.
props
.
user
.
currentUser
.
email
);
}
render
()
{
let
discount
=
this
.
calculateDiscount
(
this
.
props
.
item
.
price
,
this
.
props
.
item
.
promo
)
return
(
<
div
className=
"product-item"
>
<
div
id=
"more-details-img-box"
>
{
this
.
props
.
item
.
productImageUrl
?
<
img
id=
"prod-img"
alt=
""
src=
{
this
.
props
.
item
.
productImageUrl
?
this
.
props
.
item
.
productImageUrl
:
"-no photo-"
}
src=
{
this
.
props
.
item
.
productImageUrl
}
onClick=
{
this
.
toggleDetailsModal
}
/>
:
<
div
id=
"no-image-found"
onClick=
{
this
.
toggleDetailsModal
}
>
<
p
id=
"no-image-display"
>
- No Photo Available -
</
p
>
</
div
>
}
{
this
.
props
.
item
.
productImageUrl
?
<
p
onClick=
{
this
.
toggleDetailsModal
}
id=
"more-details-text"
>
More Details
</
p
>
:
""
}
</
div
>
<
p
id=
"prod-name"
>
{
this
.
props
.
item
.
productName
}
</
p
>
<
div
id=
"prod-price"
>
...
...
@@ -50,10 +98,18 @@ export default class ProductItem extends Component {
<
p
id=
"prod-promotion"
>
{
"Save "
+
this
.
props
.
item
.
promo
+
"% on this item!"
}
</
p
>
:
""
}
<
div
className=
"add-cart-and-quantity"
>
<
input
id=
"order-quantity"
type=
"number"
placeholder=
"Qty"
/>
<
span
id=
"add-to-cart-button"
>
Add to Cart
</
span
>
</
div
>
<
form
onSubmit=
{
e
=>
this
.
handleSubmit
(
e
,
this
.
props
.
item
)
}
className=
"add-cart-and-quantity"
>
{
this
.
props
.
user
?.
currentUser
?
""
:<
p
id=
"please-log-in-notice"
>
Log in to Add to Cart
</
p
>
}
<
input
className=
"order-quantity"
type=
"number"
placeholder=
"Qty"
disabled=
{
!
this
.
props
.
user
?.
currentUser
}
onChange=
{
this
.
handleChange
(
"orderItemQuantity"
)
}
value
=
{
this
.
state
.
orderItemQuantity
}
/>
<
button
disabled=
{
!
this
.
props
.
user
?.
currentUser
}
className=
"add-to-cart-button"
>
Add to Cart
</
button
>
</
form
>
<
Modal
id=
"product-details-modal"
...
...
@@ -66,8 +122,8 @@ export default class ProductItem extends Component {
left
:
'50%'
,
right
:
'0'
,
bottom
:
'0'
,
marginLeft
:
"-3
46
px"
,
marginTop
:
"-3
72
px"
,
marginLeft
:
"-3
25
px"
,
marginTop
:
"-3
20
px"
,
width
:
'650px'
,
height
:
'600px'
,
background
:
'white'
,
...
...
@@ -80,7 +136,14 @@ export default class ProductItem extends Component {
}
}
}
>
<
ProductDetails
product=
{
this
.
props
.
item
}
discount=
{
discount
}
/>
<
ProductDetails
product=
{
this
.
props
.
item
}
discount=
{
discount
}
user=
{
this
.
props
.
user
}
addToCart=
{
this
.
props
.
addToCart
}
cart=
{
this
.
props
.
cart
}
closeModal=
{
this
.
toggleDetailsModal
}
/>
</
Modal
>
</
div
>
)
...
...
ecom-web/src/components/product-market/product-market-container.jsx
View file @
e01ef5cd
import
{
connect
}
from
'react-redux'
;
import
ProductMarket
from
'./product-market'
;
import
{
fetchProducts
,
fetchPromotions
}
from
'../../actions/product_actions'
;
import
{
fetchUserCart
,
updateUserCart
}
from
'../../actions/cart_actions'
;
const
mSTP
=
state
=>
({
products
:
state
.
market
.
products
,
promotions
:
state
.
market
.
promotions
,
user
:
state
.
user
,
cart
:
state
.
cart
});
const
mDTP
=
dispatch
=>
({
getProducts
:
()
=>
dispatch
(
fetchProducts
()),
getPromotions
:
()
=>
dispatch
(
fetchPromotions
())
getPromotions
:
()
=>
dispatch
(
fetchPromotions
()),
getUserCart
:
userId
=>
dispatch
(
fetchUserCart
(
userId
)),
addCartItem
:
(
updatedCart
,
userEmail
)
=>
dispatch
(
updateUserCart
(
updatedCart
,
userEmail
))
});
export
default
connect
(
mSTP
,
mDTP
)(
ProductMarket
);
\ No newline at end of file
ecom-web/src/components/product-market/product-market.jsx
View file @
e01ef5cd
...
...
@@ -23,20 +23,29 @@ export default class ProductMarket extends Component {
products
.
forEach
(
prod
=>
{
promotions
.
forEach
(
promo
=>
{
if
(
prod
.
sku
===
promo
.
productSku
)
{
prod
.
promo
=
(
promo
.
discountPercentage
*
100
);
prod
.
promo
=
(
promo
.
discountPercentage
);
}
});
});
return
(
<
div
className=
"product-market-container"
>
<
h1
id=
"product-market-title"
>
Product Market
</
h1
>
<
div
id=
"product-market-title"
>
<
p
>
Product Market
</
p
>
</
div
>
<
div
className=
"products-container"
>
{
this
.
props
.
products
.
map
(
prod
=>
{
return
(
<
div
className=
{
prod
.
productName
?
"product-item-container"
:
"no-item"
}
key=
{
prod
.
sku
}
>
{
prod
.
productName
?
<
ProductItem
item=
{
prod
}
/>
<
ProductItem
item=
{
prod
}
cart=
{
this
.
props
.
cart
}
user=
{
this
.
props
.
user
}
addToCart=
{
this
.
props
.
addCartItem
}
/>
:
<
div
className=
"product-item"
>
<
p
id=
"prod-not-available"
>
This Product is No Longer Available
</
p
>
...
...
ecom-web/src/components/root.js
View file @
e01ef5cd
...
...
@@ -16,11 +16,7 @@ const Root = ({ store }) => (
<
Route
exact
path
=
"/"
render
=
{()
=>
{
return
(
// this.state.isUserAuthenticated ? // This can be changed for however our frontend user auth will operate
// <Redirect to="/product-market" /> :
<
Redirect
to
=
"/product-market"
/>
)
return
(
<
Redirect
to
=
"/product-market"
/>
)
}}
/
>
<
Route
path
=
"/session"
component
=
{
SessionContainer
}
/> { /
*
this
can
be
removed
if
never
used
*
/
}
...
...
ecom-web/src/components/session/session-container.jsx
View file @
e01ef5cd
import
{
connect
}
from
'react-redux'
;
import
Session
from
'./session'
;
import
{
login
,
logOut
}
from
'../../actions/session_actions'
import
{
login
,
logOut
}
from
'../../actions/session_actions'
;
import
{
fetchUserCart
,
createUserCart
,
clearUserCart
}
from
'../../actions/cart_actions'
;
const
mSTP
=
state
=>
({
currentUser
:
state
.
user
...
...
@@ -8,7 +9,10 @@ const mSTP = state => ({
const
mDTP
=
dispatch
=>
({
login
:
(
userResponse
)
=>
dispatch
(
login
(
userResponse
)),
logOut
:
()
=>
dispatch
(
logOut
())
logOut
:
()
=>
dispatch
(
logOut
()),
getUserCart
:
userId
=>
dispatch
(
fetchUserCart
(
userId
)),
createCart
:
newCart
=>
dispatch
(
createUserCart
(
newCart
)),
clearCart
:
()
=>
dispatch
(
clearUserCart
())
});
export
default
connect
(
mSTP
,
mDTP
)(
Session
);
\ No newline at end of file
ecom-web/src/components/session/session.jsx
View file @
e01ef5cd
import
React
,
{
Component
}
from
'react'
import
{
GoogleLogin
,
GoogleLogout
}
from
'react-google-login'
;
import
'../../resources/stylesheets/session.css'
const
clientId
=
`
${
process
.
env
.
REACT_APP_GOOGLE_CLIENT_ID
}
.apps.googleusercontent.com`
;
...
...
@@ -22,6 +23,17 @@ export default class Session extends Component {
const
userResponse
=
{
idToken
:
tokenId
,
userId
,
email
,
firstName
,
lastName
,
accessToken
}
this
.
props
.
login
(
userResponse
)
this
.
setState
({
logIn
:
true
})
// try grabbing user cart
this
.
props
.
getUserCart
(
email
)
.
then
(
res
=>
res
.
json
)
.
catch
(
err
=>
{
const
newCart
=
{
userId
:
email
,
cartItems
:
[]
}
this
.
props
.
createCart
(
newCart
)
})
}
loginFailed
=
(
response
)
=>
{
...
...
@@ -30,12 +42,13 @@ export default class Session extends Component {
logOutSuccess
=
(
response
)
=>
{
this
.
props
.
logOut
()
this
.
props
.
clearCart
()
this
.
setState
({
logIn
:
false
})
}
render
()
{
return
(
<
div
>
<
div
className=
"google-login-button"
>
{
!
this
.
state
.
logIn
?
<
GoogleLogin
clientId=
{
clientId
}
...
...
ecom-web/src/reducers/cart_reducer.js
View file @
e01ef5cd
<<<<<<<
HEAD
import
{
ADD_NEW_CART
,
RECEIVE_CART
}
from
'../actions/cart_actions'
const
initialState
=
{
...
...
@@ -27,3 +28,23 @@ const cartReducer = (prevState = initialState, action) => {
export
default
cartReducer
;
=======
import
{
RECEIVE_USER_CART
,
CLEAR_USER_CART
}
from
'../actions/cart_actions'
;
const
initialState
=
[]
const
cartReducer
=
(
state
=
initialState
,
action
)
=>
{
Object
.
freeze
(
state
);
let
newState
=
Object
.
assign
({},
state
);
switch
(
action
.
type
)
{
case
RECEIVE_USER_CART
:
return
newState
.
cart
=
action
.
cart
.
data
.
cartItems
case
CLEAR_USER_CART
:
return
[]
default
:
return
state
;
}
}
export
default
cartReducer
;
>>>>>>>
1
f99e20fa13caaa629b4886d2be1b9d96bb9aa82
ecom-web/src/reducers/root_reducer.js
View file @
e01ef5cd
import
{
combineReducers
}
from
'redux'
;
import
productsReducer
from
'./products_reducer'
;
import
userReducer
from
'./user_reducer'
import
cartReducer
from
'./cart_reducer'
;
const
rootReducer
=
combineReducers
({
market
:
productsReducer
,
user
:
userReducer
,
cart
:
cartReducer
});
export
default
rootReducer
;
\ No newline at end of file
ecom-web/src/reducers/user_reducer.js
View file @
e01ef5cd
import
{
SET_CURRENT_USER
,
LOGOUT_USER
}
from
'../actions/session_actions'
const
initialState
=
{
currentUser
:
null
}
const
initialState
=
{
currentUser
:
null
,
}
const
userReducer
=
(
state
=
initialState
,
action
)
=>
{
Object
.
freeze
(
state
);
let
newState
=
Object
.
assign
({},
state
);
switch
(
action
.
type
)
{
case
SET_CURRENT_USER
:
return
newState
.
currentUser
=
action
.
user
.
data
;
newState
.
currentUser
=
action
.
user
.
data
;
return
newState
;
case
LOGOUT_USER
:
return
newState
.
currentUser
=
null
;
default
:
return
state
;
}
...
...
ecom-web/src/resources/stylesheets/product-market.css
View file @
e01ef5cd
...
...
@@ -7,12 +7,17 @@
#product-market-title
{
width
:
100%
;
display
:
flex
;
justify-content
:
center
;
text-align
:
center
;
font-size
:
30px
;
margin
:
15px
0px
10px
;
cursor
:
default
;
border-bottom
:
1px
solid
black
;
padding-bottom
:
15px
;
padding
:
15px
0px
;
}
#product-market-title
p
{
width
:
30%
;
}
.products-container
{
...
...
@@ -52,6 +57,15 @@
transition
:
all
0.3s
;
}
#no-image-found
{
height
:
200px
;
width
:
100%
;
transition
:
all
0.3s
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
}
#more-details-img-box
{
width
:
100%
;
display
:
flex
;
...
...
@@ -101,7 +115,7 @@
color
:
red
;
}
#
add-to-cart-button
{
.
add-to-cart-button
{
cursor
:
pointer
;
margin-bottom
:
10px
;
padding
:
5px
40px
;
...
...
@@ -112,7 +126,7 @@
transition
:
all
0.3s
;
}
#
add-to-cart-button
:hover
{
.
add-to-cart-button
:hover
{
background-color
:
rgb
(
207
,
205
,
205
);
}
...
...
@@ -143,26 +157,42 @@
padding-top
:
2px
;
}
#
order-quantity
{
width
:
23px
;
height
:
13px
;
.
order-quantity
{
border
:
1px
dotted
rgba
(
0
,
0
,
0
,
0.3
)
;
color
:
rgb
(
29
,
29
,
29
)
;
border-radius
:
5px
;
margin-top
:
2px
;
margin
:
1px
5px
;
padding
:
6px
;
}
#order-quantity
{
border
:
1px
dotted
rgba
(
0
,
0
,
0
,
0.3
);
outline
:
none
;
color
:
rgb
(
29
,
29
,
29
);
height
:
30px
;
padding
:
6px
;
width
:
42px
;
transition
:
all
0.5s
;
}
#
order-quantity
:focus
{
.
order-quantity
:focus
{
border
:
1px
solid
black
;
}
.add-cart-and-quantity
{
display
:
flex
;
position
:
relative
;
}
#please-log-in-notice
{
display
:
none
;
position
:
absolute
;
bottom
:
47px
;
left
:
22px
;
padding
:
3px
10px
;
border-radius
:
5px
;
background-color
:
rgb
(
248
,
76
,
76
);
animation
:
fadeInUp
;
animation-duration
:
0.5s
;
}
.add-cart-and-quantity
:hover
#please-log-in-notice
{
display
:
block
;
}
#product-details-modal
{
...
...
@@ -237,6 +267,25 @@
height
:
65%
;
}
#no-image-display
{
font-size
:
20px
;
opacity
:
0.6
;
}
#prod-details-no-image-display
{
font-size
:
28px
;
opacity
:
0.5
;
cursor
:
default
;
}
#prod-details-no-img
{
width
:
100%
;
height
:
65%
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
}
#prod-info-container
{
width
:
100%
;
text-align
:
center
;
...
...
@@ -247,9 +296,29 @@
}
#product-details-condenser
{
height
:
28%
;
position
:
relative
;
height
:
48%
;
width
:
100%
;
margin
:
185px
0px
0px
20px
;
margin
:
148px
0px
0px
20px
;
}
#details-please-log-in-notice
{
display
:
none
;
position
:
absolute
;
text-align
:
center
;
width
:
190px
;
bottom
:
86px
;
left
:
3px
;
padding
:
3px
10px
;
border-radius
:
5px
;
background-color
:
rgb
(
248
,
76
,
76
);
animation
:
fadeInUp
;
animation-duration
:
0.5s
;
}
.details-add-cart-and-quantity
:hover
#details-please-log-in-notice
{
display
:
block
;
}
#prod-details-shipping
{
...
...
@@ -272,26 +341,40 @@
}
#express-shipping
{
font-size
:
1
4.3
px
;
font-size
:
1
3.8
px
;
margin-bottom
:
10px
;
}
#prod-details-quantity
{
#free-delivery
{
font-size
:
15.5px
;
}
#get-it-by
{
text-align
:
left
;
width
:
100%
;
}
.details-add-to-cart-and-quantity
{
position
:
relative
;
}
.prod-details-quantity
{
border
:
1px
dotted
rgba
(
0
,
0
,
0
,
0.3
);
border-radius
:
5px
;
outline
:
none
;
margin-left
:
3px
;
color
:
rgb
(
29
,
29
,
29
);
transition
:
all
0.5s
;
}
#
prod-details-quantity
:focus
{
.
prod-details-quantity
:focus
{
border
:
1px
solid
black
;
}
#
prod-details-add-to-cart
{
.
prod-details-add-to-cart
{
cursor
:
pointer
;
padding
:
5px
40px
;
margin
:
10px
2
px
;
margin
:
10px
3
px
;
width
:
98%
;
border-radius
:
5px
;
border
:
1px
solid
black
;
...
...
@@ -300,7 +383,7 @@
transition
:
all
0.3s
;
}
#
prod-details-add-to-cart
:hover
{
.
prod-details-add-to-cart
:hover
{
background-color
:
rgb
(
207
,
205
,
205
);
}
...
...
@@ -318,6 +401,13 @@
margin-bottom
:
10px
;
}
#prod-details-original-price
{
text-align
:
center
;
font-size
:
17px
;
margin-bottom
:
10px
;
color
:
red
;
}
input
::-webkit-outer-spin-button
,
input
::-webkit-inner-spin-button
{
-webkit-appearance
:
none
;
...
...
ecom-web/src/resources/stylesheets/session.css
0 → 100644
View file @
e01ef5cd
.google-login-button
{
margin-right
:
20px
;
}
.google-login-button
button
{
border-radius
:
25px
;
}
\ No newline at end of file
ecom-web/src/util/cart_api_util.js
View file @
e01ef5cd
import
axios
from
'axios'
;
<<<<<<<
HEAD
export
const
postCart
=
(
data
)
=>
{
return
axios
.
post
(
"http://localhost:8080/api/carts"
,
data
)
}
...
...
@@ -10,4 +11,17 @@ export const getCartById = (id) => {
userId
:
id
}
})
=======
export
const
fetchUserCart
=
userEmail
=>
{
return
axios
.
get
(
`http://localhost:8080/api/carts/
${
userEmail
}
`
)
}
export
const
createCart
=
newCart
=>
{
return
axios
.
post
(
`http://localhost:8080/api/carts`
,
newCart
)
}
export
const
updateCart
=
(
updatedCart
,
userEmail
)
=>
{
// debugger
return
axios
.
put
(
`http://localhost:8080/api/carts/
${
userEmail
}
`
,
updatedCart
)
>>>>>>>
1
f99e20fa13caaa629b4886d2be1b9d96bb9aa82
}
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment