add create/edit actions

frontend/src/actions/order_actions.js

@@ -9,10 +9,15 @@ const receiveOrders = (payload) => ({
   payload,
 })
 
-// const receiveOrder = (order) => ({
-//   type: RECEIVE_ORDER,
-//   order,
-// })
+const receiveOrder = (order) => ({
+  type: RECEIVE_ORDER,
+  order,
+})
+
+const updateOrder = (order) => ({
+  type: UPDATE_ORDER,
+  order,
+})
 
 export const fetchOrders = () => (dispatch) => {
   OrderAPIUtil.getOrders()
@@ -20,3 +25,15 @@ export const fetchOrders = () => (dispatch) => {
       dispatch(receiveOrders(res))
     });
 }
+
+export const createOrder = (order) => (dispatch) =>
+  OrderAPIUtil.createOrder(order)
+    .then(res => {
+      dispatch(receiveOrder(res))
+    });
+
+export const editOrder = (order) => (dispatch) =>
+  OrderAPIUtil.editOrder(order)
+    .then(res => {
+      dispatch(updateOrder(res))
+    });
\ No newline at end of file

frontend/src/components/order/OrderIndex.jsx

 import React, { useState, useEffect } from 'react';
 import OrderIndexItem from './OrderIndexItem';
 import { connect } from "react-redux";
-import { fetchOrders } from '../../actions/order_actions';
+import { createOrder, fetchOrders, editOrder } from '../../actions/order_actions';
 
-const OrderIndex = ({ orders, fetchOrders }) => {
+const OrderIndex = ({
+  orders,
+  fetchOrders,
+  createOrder,
+  editOrder,
+}) => {
   const [fetchAttempted, setFetchAttempted] = useState(false);
 
   useEffect(() => {
@@ -16,6 +21,8 @@ const OrderIndex = ({ orders, fetchOrders }) => {
   return (
     <div>
       <h1>Order Index</h1>
+      <button onClick={createOrder}>Create New Order</button>
+      <button onClick={editOrder}>Update Order</button>
       {orders.allIds.map(orderId => {
         const order = orders.byId[orderId];
         return <OrderIndexItem key={order.id} order={order} />
@@ -31,6 +38,8 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = dispatch => ({
   fetchOrders: () => dispatch(fetchOrders()),
+  createOrder: order => dispatch(createOrder(order)),
+  editOrder: order => dispatch(editOrder(order)),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(OrderIndex)

frontend/src/reducers/entities/orders_reducer.js

-import { RECEIVE_ORDERS } from "../../actions/order_actions";
+import {
+  RECEIVE_ORDER,
+  RECEIVE_ORDERS,
+  UPDATE_ORDER,
+} from "../../actions/order_actions";
 
 const initialState = {
   byId: {},
   allIds: [],
-}
+};
 
 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;
+    case RECEIVE_ORDER:
+      newState.byId[order.id] = order;
+      newState.allIds.unshift(order.id);
+      return newState;
+    case UPDATE_ORDER:
+      newState.byId[order.id] = order;
+      return newState;
     default:
       return oldState;
   }
-}
+};
 
 export default OrdersReducer;

frontend/src/util/orders_api_util.jsx

 // import axios from 'axios';
 
-const sampleRes = {
+const sampleGetAll = {
   allIds: ["1", "2", "3"],
   byId: {
-    1: {
+    "1": {
       id: "1",
       orderId: "o1",
       status: "unfulfilled",
     },
-    2: {
+    "2": {
       id: "2",
       orderId: "o2",
       status: "unfulfilled",
     },
-    3: {
+    "3": {
       id: "3",
       orderId: "o3",
       status: "unfulfilled",
@@ -21,14 +21,49 @@ const sampleRes = {
   },
 };
 
-const promise = new Promise( (resolve, reject) => {
-  resolve(sampleRes)
+const sampleNew = {
+  id: "4",
+  orderId: "o4",
+  status: "unfulfilled",
+};
+
+const sampleUpdateFul = {
+  id: "3",
+  orderId: "o3",
+  status: "fulfilled",
+};
+
+const sampleUpdateCan = {
+  id: "2",
+  orderId: "o2",
+  status: "cancelled",
+};
+
+const getAllPromise = new Promise( (resolve, reject) => {
+  resolve(sampleGetAll)
+})
+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 promise;
+  return getAllPromise;
 };
 
+export const createOrder = (order) => {
+  return createNewPromise;
+}
+
+export const editOrder = (order) => {
+  return updateFulfillPromise;
+}
+
 // export const getOrders =() => {
 //   return axios.get("http://localhost:8080/api/orders");
 // }
\ No newline at end of file