mcr_post_04

mcr_post_04.jsx

const FOOD_ITEMS_FETCH_PENDING = 'FOOD_ITEMS_FETCH_PENDING'  
const FOOD_ITEMS_FETCH_COMPLETE = 'FOOD_ITEMS_FETCH_COMPLETE'  
const FOOD_ITEMS_FETCH_ERROR = 'FOOD_ITEMS_FETCH_ERROR'  
const FOOD_ITEMS_ADD_PENDING = 'FOOD_ITEMS_ADD_PENDING'  
const FOOD_ITEMS_ADD_COMPLETE = 'FOOD_ITEMS_ADD_COMPLETE'  
const FOOD_ITEMS_ADD_ERROR = 'FOOD_ITEMS_ADD_ERROR'

// …

const addFoodItem = item => (dispatch) => {  
  dispatch({ type: FOOD_ITEMS_ADD_PENDING })

  foodService
    .addFoodItem(item)
    .then(payload => dispatch({ type: FOOD_ITEMS_ADD_COMPLETE, payload }))
    .catch(payload => dispatch({ type: FOOD_ITEMS_ADD_ERROR, payload }))
}

const fetchFoodItems = item => (dispatch) => {  
  dispatch({ type: FOOD_ITEMS_FETCH_PENDING })

  foodService
    .fetchFoodItems(item)
    .then(payload => dispatch({ type: FOOD_ITEMS_FETCH_COMPLETE, payload }))
    .catch(payload => dispatch({ type: FOOD_ITEMS_FETCH_ERROR, payload }))
}

// …

const reducer = (state, { type, payload }) => {  
  switch (type) {
    case FOOD_ITEMS_FETCH_PENDING:
      return {
        ...state,
        foodItemsLoaded: false
      }
    case FOOD_ITEMS_FETCH_ERROR:
      return {
         ...state,
         foodItemsLoaded: false,
         foodItemsError: payload
      }
    case FOOD_ITEMS_FETCH_COMPLETE:
      return {
        ...state,
        foodItemsLoaded: true,
        foodItems: payload
      }
    case FOOD_ITEMS_ADD_PENDING:
      return {
        ...state,
        foodItemsAdding: true
      }
    case FOOD_ITEMS_ADD_ERROR:
      return {
        ...state,
        foodItemsAdding: false
      }
    case FOOD_ITEMS_ADD_COMPLETE:
      return {
        ...state,
        foodItemsAdding: false,
        foodItems: [
          ...state.foodItems,
          payload
        ]
      }
    default:
      return state;
  }
}

// …

const App = ({  
  foodItems,
  foodItemsLoaded,
  foodItemsAdding,
  addFoodItem
}) => (
  foodItemsLoaded
    ? (
      <div>
        <ul>
          {
            foodItems.map(({ name, quantity }) => (
              <li>{name}, quantity: {quantity}</li>
            ))
          }
        </ul>

        <button
          onClick={() => addFoodItem({ name: '🍋', quantity: 50 })}
          disabled={foodItemsAdding}
        >
          Add Food Item {foodItemsAdding ? <Spinner /> : ''}
        </button>
      </div>
    )
    : <Spinner />
)