Merge branch 'feat/DYONG-AFP31-fix' into 'master'

add getAll fix and add fulfill/cancel buttons

See merge request !4

frontend/src/actions/order_actions.js

@@ -4,9 +4,9 @@ export const RECEIVE_ORDERS = 'RECEIVE_ORDERS';
 export const RECEIVE_ORDER = 'RECEIVE_ORDER';
 export const UPDATE_ORDER = 'UPDATE_ORDER';
 
-const receiveOrders = (payload) => ({
+const receiveOrders = (orders) => ({
   type: RECEIVE_ORDERS,
-  payload,
+  orders,
 })
 
 const receiveOrder = (order) => ({
@@ -32,8 +32,9 @@ export const createOrder = (order) => (dispatch) =>
       dispatch(receiveOrder(res))
     });
 
-export const editOrder = (order) => (dispatch) =>
+export const editOrder = (order) => (dispatch) => {
   OrderAPIUtil.editOrder(order)
     .then(res => {
       dispatch(updateOrder(res))
-    });
\ No newline at end of file
+    });
+}
\ No newline at end of file

frontend/src/components/order/OrderButtons.jsx

+import React from "react";
+import { connect } from "react-redux";
+import { editOrder } from "../../actions/order_actions";
+
+const OrderButtons = ({ order, editOrder }) => {
+
+  // const { id, orderId, status, orderItems, createdAt, modifiedAt } = order;
+
+  const handleUpdate = (action) => {
+    console.log(action);
+    if (action === "FULFILL") {
+      editOrder({ ...order, status: "FULFILLED"})
+    } else if (action === "CANCEL") {
+      editOrder({ ...order, status: "CANCELLED" });
+    }
+  }
+
+  const fulfill = (
+    <button onClick={() => handleUpdate("FULFILL")}>Fulfill</button>
+  )
+
+  const cancel = (
+    <button onClick={() => handleUpdate("CANCEL")}>Cancel</button>
+  )
+  return (
+    <div>
+      {fulfill} {cancel}
+    </div>
+  );
+};
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = (dispatch) => ({
+  editOrder: (order) => dispatch(editOrder(order)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(OrderButtons);

frontend/src/components/order/OrderIndex.jsx

@@ -23,17 +23,16 @@ const OrderIndex = ({
       <h1>Order Index</h1>
       <button onClick={createOrder}>Create New Order</button>
       <button onClick={editOrder}>Update Order</button>
-      {orders.allIds.map(orderId => {
+
+      <br />
+      <br />
+
+      {orders.allIds.map((orderId) => {
         const order = orders.byId[orderId];
-        return (
-          <OrderIndexItem 
-            key={order.id} 
-            order={order}
-          />
-        )
+        return <OrderIndexItem key={order.id} order={order} />;
       })}
     </div>
-  )
+  );
 
 }
 

frontend/src/components/order/OrderIndexItem.jsx

 import React from 'react';
+import OrderButtons from './OrderButtons';
 
 const OrderIndexItem = ({ order }) => {
 
+  const { 
+    id,
+    orderId, 
+    status, 
+    orderItems, 
+    createdAt, 
+    modifiedAt
+  } = order;
+
+  const actions = ( status === "RECEIVED" ? 
+    <OrderButtons order={order} />
+  : 
+  <div>{status}</div>)
+
   return (
     <div>
-      {order.orderId} {order.status}
+      <div>{`Order #: ${orderId}`}</div>
+      {actions}
+      
     </div>
   )
 };

frontend/src/reducers/entities/orders_reducer.js

@@ -13,13 +13,21 @@ const OrdersReducer = (oldState = initialState, action) => {
   Object.freeze(oldState);
   const newState = { ...oldState };
   const order = action.order || null;
-
+  
   switch (action.type) {
     case RECEIVE_ORDERS:
-      return action.payload;
+      const orderState = {
+        byId: {},
+        allIds: [],
+      };
+      Object.keys(action.orders).forEach( wareId => {
+        orderState.allIds.push(wareId);
+        orderState.byId[wareId] = action.orders[wareId];
+      })
+      return orderState;
     case RECEIVE_ORDER:
       newState.byId[order.id] = order;
-      newState.allIds.unshift(order.id);
+      newState.allIds.push(order.id);
       return newState;
     case UPDATE_ORDER:
       newState.byId[order.id] = order;

frontend/src/util/orders_api_util.jsx

 // import axios from 'axios';
 
+const RECEIVED = "RECEIVED";
+// const FULFILLED = "FULFILLED";
+// const CANCELLED = "CANCELLED";
+
 const sampleGetAll = {
-  allIds: ["1", "2", "3"],
-  byId: {
-    "1": {
-      id: "1",
-      orderId: "o1",
-      status: "unfulfilled",
-    },
-    "2": {
-      id: "2",
-      orderId: "o2",
-      status: "unfulfilled",
-    },
-    "3": {
-      id: "3",
-      orderId: "o3",
-      status: "unfulfilled",
-    },
+  // allIds: ["1", "2", "3"],
+  // byId: {
+  1: {
+    id: "1",
+    orderId: "o1",
+    status: RECEIVED,
+    orderItems: [
+      {
+        itemId: "17",
+        itemName: "Item 1",
+        itemQuantity: 4,
+        itemPrice: 17.99,
+        itemSku: 8765309,
+      },
+      {
+        itemId: "18",
+        itemName: "Item 2",
+        itemQuantity: 42,
+        itemPrice: 17.99,
+        itemSku: 8715309,
+      },
+    ],
+  },
+  2: {
+    id: "2",
+    orderId: "o2",
+    status: RECEIVED,
+    orderItems: [
+      {
+        itemId: "17",
+        itemName: "Item 1",
+        itemQuantity: 3,
+        itemPrice: 17.99,
+        itemSku: 8765309,
+      },
+      {
+        itemId: "18",
+        itemName: "Item 2",
+        itemQuantity: 41,
+        itemPrice: 17.99,
+        itemSku: 8715309,
+      },
+    ],
+  },
+  3: {
+    id: "3",
+    orderId: "o3",
+    status: RECEIVED,
+    orderItems: [
+      {
+        itemId: "17",
+        itemName: "Item 1",
+        itemQuantity: 2,
+        itemPrice: 17.99,
+        itemSku: 8765309,
+      },
+      {
+        itemId: "18",
+        itemName: "Item 2",
+        itemQuantity: 40,
+        itemPrice: 17.99,
+        itemSku: 8715309,
+      },
+    ],
   },
+  // },
 };
 
 const sampleNew = {
   id: "4",
   orderId: "o4",
-  status: "unfulfilled",
-};
-
-const sampleUpdateFul = {
-  id: "3",
-  orderId: "o3",
-  status: "fulfilled",
-};
-
-const sampleUpdateCan = {
-  id: "2",
-  orderId: "o2",
-  status: "cancelled",
+  status: RECEIVED,
 };
 
 const getAllPromise = new Promise( (resolve, reject) => {
@@ -45,12 +85,6 @@ const getAllPromise = new Promise( (resolve, reject) => {
 const createNewPromise = new Promise( (resolve, reject) => {
   resolve(sampleNew)
 })
-const updateFulfillPromise = new Promise( (resolve, reject) => {
-  resolve(sampleUpdateFul)
-})
-const updateCancelPromise = new Promise( (resolve, reject) => {
-  resolve(sampleUpdateCan)
-})
 
 export const getOrders = () => {
   return getAllPromise;
@@ -61,7 +95,9 @@ export const createOrder = (order) => {
 }
 
 export const editOrder = (order) => {
-  return updateFulfillPromise;
+  return new Promise( (resolve, reject) => {
+    resolve(order);
+  })
 }
 
 // export const getOrders =() => {