Commit 50e402d5 authored by Xiyang Lu's avatar Xiyang Lu

resolve merge conflict

parents f190a1b5 53c27fa2
FROM maven:3.6.0-jdk-11-slim AS build
COPY src /home/app/src
COPY pom.xml /home/app
RUN mvn -f /home/app/pom.xml clean package -DskipTests
FROM openjdk:11-jre-slim
COPY --from=build /home/app/target/ecom-service-0.0.1-SNAPSHOT.jar /usr/local/lib/ecomservice.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar","/usr/local/lib/ecomservice.jar"]
#FROM openjdk:8-alpine
#VOLUME /tmp
#ADD target/ecom-service-0.0.1-SNAPSHOT.jar
#ENTRYPOINT ["java","-jar","/ecom-service-0.0.1-SNAPSHOT.jar"]
FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm ci
RUN npm install react-scripts@3.4.1 -g
COPY . ./
RUN npm run build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
\ No newline at end of file
.order-history-nav {
padding-left: 10px;
color: white;
}
\ No newline at end of file
import React, { Component } from 'react' import React, { Component } from 'react'
import Nav from 'react-bootstrap/Nav' import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar' 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 Session from '../session/session-container'
import './header.css';
export default class Header extends Component { export default class Header extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -21,6 +25,8 @@ export default class Header extends Component { ...@@ -21,6 +25,8 @@ export default class Header extends Component {
Hello Guest! Hello Guest!
</Navbar.Text> </Navbar.Text>
</Nav> </Nav>
<NavLink to="/product-market"><span className="order-history-nav">Products</span></NavLink>
<NavLink to="/orders"><span className="order-history-nav">Order History</span></NavLink>
<Nav className="ms-auto"> <Nav className="ms-auto">
<Session /> <Session />
<Nav.Link> <Nav.Link>
......
import React from 'react';
import { totalPrice } from '../../util/order_history_util';
import OrderItem from './OrderItem';
const Order = (props) => {
const {order} = props;
const {orderItems, customerAddress} = order;
const orderTotalPrice = totalPrice(orderItems);
const orderPlaced = new Date(order.orderCreatedAt);
return (
<div className="order">
<p><span className="order-field">Order ID:</span> {order.id}</p>
<p><span className="order-field">Order Status:</span> {order.orderStatus}</p>
<p><span className="order-field">Order Placed:</span> {orderPlaced.getUTCMonth()}
/{orderPlaced.getUTCDay()}
/{orderPlaced.getUTCFullYear()}
</p>
<p>
<span className="order-field">Delivery Address:</span> {`
${customerAddress.street},
${customerAddress.city},
${customerAddress.state} ${customerAddress.zip}
`}
</p>
<p><span className="order-field">Items Ordered:</span></p>
<div className="products-ordered">
{orderItems.map((orderItem, ind) => {
return (
<OrderItem key={ind} orderItem={orderItem} />
)
})}
</div>
<p><span className="order-field">Total Price:</span> ${orderTotalPrice}</p>
</div>
)
}
export default Order;
\ No newline at end of file
import React from 'react';
const OrderItem = (props) => {
const {orderItem} = props;
const {itemName, itemPrice, itemQuantity} = orderItem;
const subTotal = itemQuantity * itemPrice;
return (
<div className="order-item">
<p>Item: {itemName}</p>
<p>Quantity: {itemQuantity}</p>
<p>Price Per Unit: ${itemPrice.toFixed(2)}</p>
<p>Subtotal: ${subTotal.toFixed(2)}</p>
</div>
)
}
export default OrderItem;
\ No newline at end of file
import { connect } from 'react-redux';
import OrderHistory from './order-history';
const mSTP = state => ({
});
const mDTP = dispatch => ({
});
export default connect(mSTP, mDTP)(OrderHistory);
\ No newline at end of file
main {
margin: 0 auto;
max-width: 1080px;
}
.order {
display: flex;
flex-direction: column;
border: 1px solid black;
padding: 20px;
}
.products-ordered {
display: flex;
flex-wrap: wrap;
}
.order-item {
border: 1px solid gray;
padding: 5px;
}
.order-field {
font-weight: 600;
}
import React, { Component } from 'react' import React, { useEffect, useState } from 'react'
import { getOrderHistory } from '../../util/order_api_util';
import Order from './Order';
export default class OrderHistory extends Component { import './order-history.css'
constructor(props) {
super(props) const OrderHistory = () => {
this.state = {}
} const [orderHistory, setOrderHistory] = useState([]);
const [callMade, setCallMade] = useState(false);
render() { useEffect( async () => {
return ( if (callMade) return;
<div> const userHistory = await getOrderHistory('e-com-test-id2'); //insert user id from user details stored in redux
This is the OrderHistory component setOrderHistory(userHistory);
setCallMade(true);
});
return (
<main>
<h1>Order History</h1>
<div id="orders">
{orderHistory.map(order => {
return <Order order={order}/>;
})}
</div> </div>
) </main>
} )
} }
\ No newline at end of file
export default OrderHistory;
\ No newline at end of file
...@@ -5,8 +5,8 @@ import SessionContainer from './session/session-container'; ...@@ -5,8 +5,8 @@ import SessionContainer from './session/session-container';
import ProductMarketContainer from './product-market/product-market-container'; import ProductMarketContainer from './product-market/product-market-container';
import ShoppingCartContainer from './shopping-cart/shopping-cart-container'; import ShoppingCartContainer from './shopping-cart/shopping-cart-container';
import CheckoutContianer from './checkout/checkout-container'; import CheckoutContianer from './checkout/checkout-container';
import OrderHistoryContainer from './order-history/order-history';
import Header from './Header/header-container' import Header from './Header/header-container'
import OrderHistory from './order-history/order-history';
const Root = ({ store }) => ( const Root = ({ store }) => (
<Provider store={ store }> <Provider store={ store }>
...@@ -27,7 +27,7 @@ const Root = ({ store }) => ( ...@@ -27,7 +27,7 @@ const Root = ({ store }) => (
<Route path="/product-market" component={ ProductMarketContainer } /> <Route path="/product-market" component={ ProductMarketContainer } />
<Route path="/cart" component={ ShoppingCartContainer } /> <Route path="/cart" component={ ShoppingCartContainer } />
<Route path="/checkout" component={ CheckoutContianer } /> <Route path="/checkout" component={ CheckoutContianer } />
<Route path="/orders" component={ OrderHistoryContainer } /> <Route path="/orders" component={ OrderHistory } />
</Switch> </Switch>
</BrowserRouter> </BrowserRouter>
</Provider> </Provider>
......
class Config {
static baseApiUrl = "http://localhost:8080/api"; //env file
static orderHistoryApiUrlMethod = (userId) => `${this.baseApiUrl}/users/${userId}/orders`;
}
export default Config;
\ No newline at end of file
import Config from "../config";
export const getOrderHistory = async (userId) => {
//This is what we will return once our oder history API is operational
// const res = await fetch(`${Config.orderHistoryApiUrlMethod(userId)}`);
// const orders = await res.json();
// return orders;
return (
[
{
id: "609968a89cc32e1ef8208e8b",
orderTrackingCode: "N/A",
orderStatus: "RECEIVED",
orderCreatedAt: 1620666536727,
orderUpdatedAt: 1620666536727,
customerId: "e-com-test-id2",
customerEmailAddress: "test@test.test",
orderItems: [
{
itemId: "AFP-989",
itemName: "this item",
itemSku: "AFP-989",
itemQuantity: 2,
itemPrice: 14.0
}
],
customerAddress: {
street: "Grand",
city: "chicago",
state: "IL",
zip: "90210"
}
}
]
)
}
\ No newline at end of file
export const totalPrice = (items) => {
return items.reduce((acc,item) => {
return acc + (item.itemPrice * item.itemQuantity);
}, 0).toFixed(2);
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment