Merge branch 'release_one' of github.com:danielebra/online-movie-stor…

…e into release_one

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
+        }))
+}
+
 
 
 

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'

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 (
             <div className="center top-padding account-details">
                 <div className="container">

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 = <Loading/>
 
@@ -76,29 +88,30 @@ class  PlaceOrder extends Component {
                 {movie.title}
                 <span className="year"> ({movie.year})</span>
               </h2>
-              <div id="info" className="col s12">
-                  <Info movie={movie} />
-              </div>
-
-              <div className="row">
-              <div className="col s5">
-              <span className="price"><font size="+3">${movie.price}</font></span>
-              </div>
-              <div className="col s5 offset-s2"> 
-              <button type="button" className="col s4 waves-effect btn red darken-3" onClick={this.reduceQuantity}>-</button>
-              <input id="quantity" className="col s4 white center-align" type="text" name="quantity" value={this.state.quantity} readOnly/>
-              <button className="col s4 waves-effect btn red darken-3" onClick={this.addQuantity}>+</button>
-              </div>
-              </div>
 
-              <h6>Shipping Address: 2/32 jone Street, Haymarket, Sydney, NSW 2000</h6>
-
+              <div className="row" style={{marginTop: 50}}>
+                <div className="address">
+                  <h6>Shipping Address: 2/32 jone Street, Haymarket, Sydney, NSW 2000</h6>
+                </div>
+
+                <div className="prices">
+                  <h6>Movie price: <b>${movie.price}</b></h6>
+                  <h6>Shipping fee: <b>${shippingFee}</b></h6>
+                </div>
+              </div>
+
               <div className="row">
-              <h5>Shipping fee: ${shippingFee}</h5>
+              <div className="col s5 quantityPicker"> 
+                <button type="button" className="col s4 waves-effect btn red darken-3" onClick={this.reduceQuantity}>-</button>
+                <input id="quantity" className="col s4 white center-align" type="text" name="quantity" value={this.state.quantity} readOnly/>
+                <button className="col s4 waves-effect btn red darken-3" onClick={this.addQuantity}>+</button>
               </div>
+
               <div> 
-                <h5 className="right-align"><font size="+5">Total: ${totalPrice.toFixed(2)}</font></h5>
+                <h5 className="right-align"><font size="+5">Total: ${totalPrice}</font></h5>
+              </div>  
               </div>
+
               <div className="col s4">
               <Link to={`/movie/${movie.id}`} className="waves-effect waves-light red darken-3 btn tooltipped" data-position="buttom" data-tooltip="Back to home page">Back </Link>
               </div>

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(
-                <tr>
+        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 (
+         (
+            <tr>
                 <td>
                     {order.id}
                 </td>
                 <td>
-                    title
+                    {order.title}
                 </td>
 
                 <td>
-                    {order.date}
+                    {orderDate}
                 </td>
 
                 <td>
@@ -58,33 +83,40 @@ class UserOrders extends Component{
                 <td>
                     {order.total_cost}
                 </td>
-                <td>
-                    {order.movie}
-                </td> 
                 <td>
                     <td>
                         <i  className="material-icons pointer">edit</i>
                     </td>
                     <td>
-                    <i  className="material-icons pointer">delete</i>
+                    <i onClick= {this.deleteOrder(order)}  className="material-icons pointer">delete</i>
                     </td>
                 </td>
             </tr>
-            )})
-        ):(<div className="center">No orders</div>);
+        ))
+    }) : (<div className="center">No orders</div>)
+    )
+}
+
+    render(){
+        let { orders } = this.props.movies;
+        let orderList = "";
+        console.log(this.props.movies);
+
         return(
             <div className="center top-padding account-details">
                 <div className="container">
                     <div className="row">
                         <div className="col s12 center">
                             <h3> Order Management </h3>
 
-                            <form id="register"  noValidate>
-                <input className="col s4 offset-s4 white" type="text" placeholder="Enter order number"></input>
-                <button className="col s1 waves-effect waves-light btn red darken-3"><i className="material-icons right">search</i></button>
-                <div className="col s3"></div>
-                <div className="col 3s offset-s2">
-                <form noValidate>
+                            <DatePicker className="white-text" 
+                                        placeholderText="Click to select a date"
+                                        selected={this.state.searchDate}
+                                        onChange={this.handleChange}
+                                        dateFormat="dd/MM/yyyy"
+                                        />
+
+                            <form noValidate>
                                 <table className="table bordered highlight centered responsive-table management-table">
                                     <thead>
                                         <tr>
@@ -93,23 +125,19 @@ class UserOrders extends Component{
                                             <th scope="col">Date</th>
                                             <th scope="col">Quantity</th>
                                             <th scope="col">price</th>
-                                            <th scope="col">Movie ID</th>
                                             <th scope="col"><i class="material-icons previx">settings</i></th>
 
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        {orderList}
+                                            {this.orderTable(orders) }
+
                                     </tbody>
                                 </table>
                             </form>
 
             <Link to="/"><button className="waves-effect waves-light red darken-3 btn">Add Movies</button></Link>
-            </div>
-
-
 
-             </form>
             </div>
 
             </div>
@@ -125,4 +153,4 @@ const mapStateToProps = state => ({
 });
 
 // Connect actions to use within react and export component
-export default connect(mapStateToProps, { getOrders,getMovieById })(withRouter(UserOrders));
+export default connect(mapStateToProps, { getOrders,getMovieById, deleteOrder })(withRouter(UserOrders));

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);