diff --git a/front-end/src/actions/movieActions.js b/front-end/src/actions/movieActions.js index cf315a9..3ffabd8 100644 --- a/front-end/src/actions/movieActions.js +++ b/front-end/src/actions/movieActions.js @@ -207,9 +207,17 @@ export const addOrder = order => dispatch =>{ payload: err.response.data }) ) - } -//export cost deteleOrder = +export const deleteOrder = order => dispatch => { + api + .delete(`order/${order.id}/`) + .catch(err => + dispatch({ + type: DELETE_ORDER, + payload: err.response.data + })) +} + diff --git a/front-end/src/actions/types.js b/front-end/src/actions/types.js index c87d7af..6126f97 100644 --- a/front-end/src/actions/types.js +++ b/front-end/src/actions/types.js @@ -29,3 +29,4 @@ export const GET_ALL_ACCESSLOGS = 'GET_ALL_ACCESSLOGS' export const DELETE_LOG = 'DELETE_LOG' export const ADD_ORDER = 'ADD_ORDER' +export const DELETE_ORDER = 'DELETE_ORDER' diff --git a/front-end/src/components/AccessLogs.js b/front-end/src/components/AccessLogs.js index 92bc9d1..015a376 100644 --- a/front-end/src/components/AccessLogs.js +++ b/front-end/src/components/AccessLogs.js @@ -109,9 +109,9 @@ class AccessLogs extends Component { } render() { - + const { logs, user } = this.props.auth; - + console.log(logs); return (
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{

Order Management

-
- - -
-
- + + + @@ -93,23 +125,19 @@ class UserOrders extends Component{ - - {orderList} + {this.orderTable(orders) } +
Date Quantity priceMovie ID settings
-
- - -
@@ -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);