diff --git a/front-end/src/components/PlaceOrder.js b/front-end/src/components/PlaceOrder.js
index f459c4b..ca09789 100644
--- a/front-end/src/components/PlaceOrder.js
+++ b/front-end/src/components/PlaceOrder.js
@@ -14,12 +14,12 @@ class PlaceOrder extends Component {
this.state = {
quantity: 1,
- totalPrice: 0
+ totalPrice: 0,
+ shippingFee: 7
}
}
componentWillMount() {
-
// Checks if url contains id then passes the id to getMovieById
if (this.props.match.params.id) {
this.props.getMovieById(this.props.match.params.id);
@@ -30,13 +30,30 @@ class PlaceOrder extends Component {
M.AutoInit();
}
+ componentWillReceiveProps(nextProps) {
+
+ if (nextProps.movies.movie) {
+ const { quantity, shippingFee } = this.state;
+ const { movie } = nextProps.movies;
+ let totalPrice = (movie.price * quantity) + shippingFee;
+
+ this.setState({ totalPrice });
+ }
+ }
+
addQuantity=(e) => {
- this.setState({quantity: this.state.quantity+1, totalPrice: (this.state.quantity+1)*this.props.movies.movie.price+this.state.shippingFee})
+ this.setState({
+ quantity: this.state.quantity+1,
+ totalPrice: (this.state.quantity+1)*this.props.movies.movie.price+this.state.shippingFee
+ })
}
reduceQuantity=(e) => {
if(this.state.quantity > 1){
- this.setState({quantity: this.state.quantity-1, totalPrice: (this.state.quantity-1)*this.props.movies.movie.price+this.state.shippingFee})
+ this.setState({
+ quantity: this.state.quantity-1,
+ totalPrice: (this.state.quantity-1)*this.props.movies.movie.price+this.state.shippingFee
+ })
}
}
@@ -45,23 +62,18 @@ class PlaceOrder extends Component {
quantity: this.state.quantity,
discount_modifier: 0,
total_cost: this.state.totalPrice,
- order_type: 't',
+ order_type: 'Delivery',
user: this.props.auth.user.id,
movie: this.props.movies.movie.id
}
this.props.addOrder(order)
-
-
}
-
-
render(){
const { shippingFee, totalPrice } = this.state;
const { movie, loading } = this.props.movies; // we grab the movie object and loading from movies state
let content; // display different content depedning when the page is loading
- console.log(this.props.movies);
if (movie == null || loading) { // display loading while its fetching
content =
@@ -76,29 +88,30 @@ class PlaceOrder extends Component {
{movie.title}
({movie.year})
-
-
-
-
-
-
- ${movie.price}
-
-
- -
-
- +
-
-
-
Shipping Address: 2/32 jone Street, Haymarket, Sydney, NSW 2000
-
+
+
+
Shipping Address: 2/32 jone Street, Haymarket, Sydney, NSW 2000
+
+
+
+
Movie price: ${movie.price}
+ Shipping fee: ${shippingFee}
+
+
+
-
Shipping fee: ${shippingFee}
+
+ -
+
+ +
+
-
Total: ${totalPrice.toFixed(2)}
+ Total: ${totalPrice}
+
+
Back
diff --git a/front-end/src/components/UserOrders.js b/front-end/src/components/UserOrders.js
index f0cd579..0dbaf16 100644
--- a/front-end/src/components/UserOrders.js
+++ b/front-end/src/components/UserOrders.js
@@ -2,8 +2,9 @@ import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { Link, withRouter } from "react-router-dom";
-import { getOrders, getMovieById} from '../actions/movieActions';
+import { getOrders, getMovieById, deleteOrder} from '../actions/movieActions';
import api from '../api';
+import DatePicker from 'react-datepicker';
import OrderCard from "./UIElements/OrderCard"
@@ -16,40 +17,64 @@ import Trailer from "./UIElements/Trailer";
class UserOrders extends Component{
constructor() {
super();
-
+ this.state={
+ searchDate: new Date()
+ };
}
- //state = {
- // orders:[]
- //}
+
componentWillMount() {
- /* api.get("order/").then(res => {
- console.log("isndie order request");
- let order = res.data;
- this.setState({orders:res.data});
- }); */
this.props.getOrders();
+ }
- }
-
+ handleChange=(date)=>{
+ this.setState({
+ searchDate: date
+ })
+
+ }
+ deleteOrder=(order)=>{
+ this.props.deleteOrder(order)
+ }
+ reformatDate=(date)=>{
+ let year = date.getFullYear()
+ let month = '' + (date.getMonth() + 1);
+ let day = '' + date.getDate();
- render(){
- const { orders } = this.props.movies;
- console.log(this.props.movies)
- const orderList = (orders.length)?(
- orders.map(order => {
-
- return(
-
+ if (month.length < 2) month = '0' + month;
+ if (day.length < 2) day = '0' + day;
+
+ let dateFormat = day + "/" + month + "/" + year
+
+ return dateFormat
+ }
+
+ isFilter=()=>{
+ return this.state.searchDate===null ? false:true
+ }
+
+ filtering=(orders, filterDate)=>{
+ return orders.filter(order => this.reformatDate(new Date(order.date.toLocaleString())) === this.reformatDate(filterDate))
+ }
+
+ orderTable=(orders)=>{
+ if(this.isFilter()) {
+ orders = this.filtering(orders, this.state.searchDate)
+ }
+ return( orders.length > 0 ? orders.map((order, index) => {
+ let orderDate = new Date(order.date).toLocaleString()
+ return (
+ (
+
{order.id}
- title
+ {order.title}
- {order.date}
+ {orderDate}
@@ -58,20 +83,25 @@ class UserOrders extends Component{
{order.total_cost}
-
- {order.movie}
-
edit
- delete
+ delete
- )})
- ):(
No orders
);
+ ))
+ }) : (
No orders
)
+ )
+}
+
+ render(){
+ let { orders } = this.props.movies;
+ let orderList = "";
+ console.log(this.props.movies);
+
return(
@@ -79,12 +109,14 @@ class UserOrders extends Component{
@@ -125,4 +153,4 @@ const mapStateToProps = state => ({
});
// Connect actions to use within react and export component
-export default connect(mapStateToProps, { getOrders,getMovieById })(withRouter(UserOrders));
\ No newline at end of file
+export default connect(mapStateToProps, { getOrders,getMovieById, deleteOrder })(withRouter(UserOrders));
\ No newline at end of file
diff --git a/front-end/src/reducers/movieReducer.js b/front-end/src/reducers/movieReducer.js
index e001d58..5db939d 100644
--- a/front-end/src/reducers/movieReducer.js
+++ b/front-end/src/reducers/movieReducer.js
@@ -1,4 +1,4 @@
-import { GET_MOVIES, GET_MOVIE, ADD_REVIEW, MOVIES_LOADING, NO_MOVIES_FOUND, SEARCH_MOVIES, CLEAR_SEARCH_LIST, FAVOURITE_MOVIE, UNFAVOURITE_MOVIE, GET_ORDER, GET_ALL_ORDER } from '../actions/types';
+import { GET_MOVIES, GET_MOVIE, ADD_REVIEW, MOVIES_LOADING, NO_MOVIES_FOUND, SEARCH_MOVIES, CLEAR_SEARCH_LIST, FAVOURITE_MOVIE, UNFAVOURITE_MOVIE, GET_ORDER, DELETE_ORDER } from '../actions/types';
/* The movies state contains the following:
- collections: an array containing a genre and a list of movies in that genre
@@ -62,6 +62,11 @@ export default function (state = initialState, action) {
orders: action.payload,
loading: false
};
+ case DELETE_ORDER:
+ return{
+ ...state,
+ orders: state.orders.filter(order => order.id !==action.payload.id)
+ }
case ADD_REVIEW:
state.movie.reviews.push(action.payload);