add user sage and customer service saga

package.json

@@ -11,6 +11,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "babel-cli": "^6.26.0",
     "babel-core": "^6.18.2",
     "babel-loader": "^6.2.8",
     "babel-plugin-transform-object-rest-spread": "^6.19.0",

src/actions/getColors.js

@@ -0,0 +1,3 @@
+import { makeActionCreator } from '../utility';
+export const GET_COLORS = "GET_COLORS";
+export const getColors = makeActionCreator(GET_COLORS,"colors");

src/actions/index.js

@@ -2,6 +2,7 @@ export { initializeApp , INITIALIZE_APP } from './initializeApp';
 export { setCurrentUser , SET_CURRENT_USER } from './setCurrentUser';
 export { getCurrentUserInfo , GET_CURRENT_USER_INFO } from './getCurrentUserInfo';
 export { setCartItems , SET_CART_ITEMS } from './setCartItems';
+export { getColors , GET_COLORS } from './getColors';
 export { setItemDetails , SET_ITEM_DETAILS } from './setItemDetails';
 export { setItemPrice , SET_ITEM_PRICE } from './setItemPrice';
 export { increaseItemQuantity , INCREASE_ITEM_QUANTITY } from './increaseItemQuantity';

src/components/CartItem/CartItemContainer.js

@@ -1,42 +1,42 @@
 import { connect } from 'react-redux'
 import {
-    CartItemDisplay
+  CartItemDisplay
 } from './CartItemDisplay';
 
 import {
-    increaseItemQuantity,
-    decreaseItemQuantity
+  increaseItemQuantity,
+  decreaseItemQuantity
 } from './../../actions'
 
 import {
-    itemsDetailSelector,
-    itemPriceSelector,
-    itemQuantityFetchStatusSelector
+  itemsDetailSelector,
+  itemPriceSelector,
+  itemQuantityFetchStatusSelector
 } from './../../selectors'
 
-const mapStateToProps = (state,{id}) => {
-    const details = itemsDetailSelector(state);
-    const detail = details.find(detail=>detail.id === id);
-    const price = itemPriceSelector(id)(state);
-    const quantityFetchStatus = itemQuantityFetchStatusSelector(state);
-    return {
-        fetched: detail !== undefined,
-        quantityFetchStatus,
-        price,
-        ... detail
-    }
+const mapStateToProps = (state, { id }) => {
+  const details = itemsDetailSelector(state);
+  const detail = details.find(detail => detail.id === id);
+  const price = itemPriceSelector(id)(state);
+  const quantityFetchStatus = itemQuantityFetchStatusSelector(state);
+  return {
+    fetched: detail !== undefined,
+    quantityFetchStatus,
+    price,
+    ...detail
+  }
 };
 
 const mapDispatchToProps = (dispatch) => ({
-    increaseItemQuantity(id){
-        dispatch(increaseItemQuantity(id));
-    },
-    decreaseItemQuantity(id){
-        dispatch(decreaseItemQuantity(id));
-    }
+  increaseItemQuantity(id) {
+    dispatch(increaseItemQuantity(id));
+  },
+  decreaseItemQuantity(id) {
+    dispatch(decreaseItemQuantity(id));
+  }
 });
 
 export const CartItemContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
+  mapStateToProps,
+  mapDispatchToProps
 )(CartItemDisplay);

src/components/CartItem/CartItemDisplay.jsx

@@ -1,33 +1,34 @@
 import React from 'react'
+
 import {
-    FETCHED
+  FETCHED
 } from '../../actions'
-export const CartItemDisplay = ({fetched,name,description,price, id, quantity, increaseItemQuantity, decreaseItemQuantity, quantityFetchStatus})=>(
-    <div>
-        {fetched ?
+export const CartItemDisplay = ({ fetched, name, description, price, id, quantity, increaseItemQuantity, decreaseItemQuantity, quantityFetchStatus }) => (
+  <div>
+    {fetched ?
+      <div>
+        <h5>
+          {name}
+        </h5>
         <div>
-            <h5>
-                {name}
-            </h5>
+          {price ?
+            <div>${price}</div>
+            :
             <div>
-                {price ?
-                    <div>${price}</div>
-                    :
-                    <div>
-                        <div className="loader" title=" We're getting the price for this item..."/>
-                    </div>
-                }
+              <div className="loader" title=" We're getting the price for this item..." />
             </div>
-            <p>
-                {description}
-            </p>
-            <section>
-                <span className="item-quantity">
-                    Quantity: {quantity}
-                </span>
-                <button className="btn btn-secondary" disabled={quantityFetchStatus !== FETCHED} onClick={()=>decreaseItemQuantity(id)}>-</button>
-                <button className="btn btn-secondary" disabled={quantityFetchStatus !== FETCHED} onClick={()=>increaseItemQuantity(id)}>+</button>
-            </section>
-        </div> : <div className="loader"></div>}
-    </div>
+          }
+        </div>
+        <p>
+          {description}
+        </p>
+        <section>
+          <span className="item-quantity">
+            Quantity: {quantity}
+          </span>
+          <button className="btn btn-secondary" disabled={quantityFetchStatus !== FETCHED} onClick={() => decreaseItemQuantity(id)}>-</button>
+          <button className="btn btn-secondary" disabled={quantityFetchStatus !== FETCHED} onClick={() => increaseItemQuantity(id)}>+</button>
+        </section>
+      </div> : <div className="loader"></div>}
+  </div>
 );

src/components/SupportAvailable/SupportAvailableContainer.js

@@ -8,12 +8,14 @@ import {
 } from './../../actions'
 
 import {
-    customerServiceAvailabilitySelector
+    customerServiceAvailabilitySelector, 
+    colorsSelector
 } from './../../selectors'
 
 const mapStateToProps = (state) => {
     return {
-        isAvailable:customerServiceAvailabilitySelector(state)
+        isAvailable:customerServiceAvailabilitySelector(state),
+        colors:colorsSelector(state)
     }
 };
 const mapDispatchToProps = (dispatch) => ({

src/components/SupportAvailable/SupportAvailableDisplay.jsx

@@ -1,10 +1,16 @@
 import React from 'react'
-export const SupportAvailableDisplay = ({isAvailable})=>(
-    <div className="customer-service-message">
-    {isAvailable ? <div>
-        Customer service representatives are waiting to assist you.
-    </div> : <div>
-        Sorry, there's no one to assist you at this time.
-    </div>}
-        </div>
-);
+export const SupportAvailableDisplay = ({isAvailable, colors})=>{
+    console.log('colors', colors)
+    return(
+        <div className="customer-service-message">
+        {
+            colors.map(color =>(<p key={color.id}>{color.name}</p>))
+        }
+        {isAvailable ? <div>
+            Customer service representatives are waiting to assist you.
+        </div> : <div>
+            Sorry, there's no one to assist you at this time.
+        </div>}
+            </div> 
+    )
+};

src/defaultState.js

@@ -7,4 +7,5 @@ export const defaultState = fromJS({
     itemPrices:[],
     taxRates:[],
     shippingTotal:0,
+    colors: []
 });

src/getStore.js

@@ -10,7 +10,9 @@ import thunk from 'redux-thunk'
 
 import { getQuery } from './utility'
 import { reducer } from './combineReducers';
-import { defaultState } from './defaultState'
+import { defaultState } from './defaultState';
+import createSagaMiddleware from 'redux-saga';
+import { initSagas } from './initSagas';
 
 const stateTransformer = (state) => {
     if (Iterable.isIterable(state)) return state.toJS();
@@ -22,7 +24,8 @@ const logger = createLogger({
 });
 
 export const getStore = ()=>{
-    const middleWares = [thunk];
+    const sagaMiddleware = createSagaMiddleware();
+    const middleWares = [sagaMiddleware, thunk];
     if (getQuery()['logger']) { middleWares.push(logger)}
     const composables = [applyMiddleware(...middleWares)]
     const enhancer = compose(
@@ -33,5 +36,8 @@ export const getStore = ()=>{
         defaultState,
         enhancer
     );
+
+    console.info('Saga middleware implemented')
+    initSagas(sagaMiddleware)
     return store;
 };

src/initSagas.js

@@ -0,0 +1,5 @@
+import * as sagas from './sagas';
+
+export const initSagas = (sagaMiddleware) => {
+  Object.values(sagas).forEach(sagaMiddleware.run.bind(sagaMiddleware));
+}

src/reducers/colors.js

@@ -0,0 +1,9 @@
+import {createReducer} from './../utility';
+import { GET_COLORS } from '../actions';
+
+export const colors = createReducer(null, {
+  [GET_COLORS](state, {colors}){
+    return colors
+  }
+})
+

src/reducers/index.js

@@ -2,6 +2,7 @@ export { version } from './version';
 export { currentUser } from './currentUser';
 export { cartItems } from './cartItems';
 export { items } from './items';
+export { colors } from './colors';
 export { itemPrices } from './itemPrices';
 export { itemQuantityFetchStatus } from './itemQuantityFetchStatus';
 export { shippingCost } from './shippingCost';

src/sagas/colorsSaga.js

@@ -0,0 +1,9 @@
+import { put, take } from "redux-saga/effects";
+import fetch from 'isomorphic-fetch';
+import { getColors } from "../actions";
+
+export function* colorsSaga(){
+  const response = yield fetch(`http://localhost:8081/colors`);
+  const {colors} = yield response.json();
+  yield put(getColors(colors));
+}

src/sagas/currentUserSaga.js

@@ -0,0 +1,13 @@
+import {take, put, call, apply} from 'redux-saga/effects';
+import fetch from 'isomorphic-fetch';
+import {
+  GET_CURRENT_USER_INFO,
+  setCurrentUser
+} from './../actions';
+
+export function* currentUserSaga(){
+  const {id} = yield take(GET_CURRENT_USER_INFO)
+  const response = yield call(fetch, `http://localhost:8081/user/${id}`);
+  const data = yield apply(response, response.json)
+  yield put(setCurrentUser(data));
+}

src/sagas/customerServiceAvailabilitySaga.js

@@ -0,0 +1,30 @@
+import { eventChannel} from 'redux-saga';
+import {connect} from '../createSocketConnection';
+
+import {setCustomerServiceAvailability} from '../actions';
+import { take, put } from 'redux-saga/effects';
+
+export function* customerServiceAvailabilitySaga(){
+  const socket = connect();
+  const chan = new eventChannel(emit => {
+    const enableSupportMessage = () => {
+      emit(true)
+    }
+
+    const disableSupportMessage = () => {
+      emit(false)
+    }
+
+    socket.on('SUPPORT_AVAILABLE', enableSupportMessage)
+    socket.on('SUPPORT_NOT_AVAILABLE', disableSupportMessage)
+
+    return ()=>{
+
+    }
+  });
+
+  while(true) {
+    let supportAvailable = yield take(chan)
+    yield put(setCustomerServiceAvailability(supportAvailable))
+  }
+}

src/sagas/fetchCartSaga.js

@@ -0,0 +1,13 @@
+import { put, take } from "redux-saga/effects";
+import fetch from 'isomorphic-fetch';
+import { SET_CURRENT_USER, setCartItems } from "../actions";
+
+export function* fetchCartSaga(){
+  const {user} = yield take(SET_CURRENT_USER);
+  const {id} = user;
+  const response = yield fetch(`http://localhost:8081/cart/${id}`);
+  const {items} = yield response.json();
+
+  yield put(setCartItems(items));
+  console.info("Set cart items", items)
+}

src/sagas/index.js

@@ -0,0 +1,7 @@
+export { itemQuantitySaga } from './itemQuantitySaga';
+export { itemDetailSaga } from './itemDetailSaga';
+export { currentUserSaga } from './currentUserSaga';
+export { fetchCartSaga } from './fetchCartSaga';
+export { itemPriceSaga } from './itemPriceSaga';
+export { colorsSaga } from './colorsSaga';
+export { customerServiceAvailabilitySaga } from './customerServiceAvailabilitySaga';

src/sagas/itemDetailSaga.js

@@ -0,0 +1,17 @@
+import fetch from 'isomorphic-fetch';
+import { SET_CART_ITEMS, setItemDetails } from '../actions';
+import { fork, take, put } from 'redux-saga/effects';
+
+export function* loadItemDetails(item) {
+  console.info("item", item)
+  const {id} = item;
+  const response = yield fetch(`http://localhost:8081/items/${id}`);
+  const data = yield response.json();
+  const info = data[0];
+  yield put(setItemDetails(info));
+  // yield put(setItemDetails(item));
+}
+export function* itemDetailSaga(){
+  const {items} = yield take(SET_CART_ITEMS);
+  yield items.map(item => fork(loadItemDetails, item));
+}

src/sagas/itemPriceSaga.js

@@ -0,0 +1,18 @@
+import fetch from 'isomorphic-fetch';
+import { SET_CURRENT_USER, SET_CART_ITEMS, setItemPrice } from "../actions";
+import { call, put, all, take } from "redux-saga/effects";
+
+function* fetchItemPrice(id, currency) {
+  const response = yield fetch(`http://localhost:8081/prices/${currency}/${id}`);
+  const json = yield response.json();
+  const price = json[0].price;
+  yield put(setItemPrice(id, price));
+}
+
+export function* itemPriceSaga() {
+  const [{ user }, { items }] = yield all([
+    take(SET_CURRENT_USER),
+    take(SET_CART_ITEMS)
+  ]);
+  yield items.map(item => call(fetchItemPrice, item.id, user.country));
+}