[WEB UI] add and implement redux-promise-middleware in pairing folder

rojak-ui-web/package.json

@@ -54,6 +54,7 @@
     "react-uikit-icons": "^2.0.2",
     "react-uikit-nav": "^2.0.1",
     "redux": "^3.6.0",
+    "redux-promise-middleware": "4.2.0",
     "redux-router": "^2.1.2",
     "redux-thunk": "^2.1.0",
     "reselect": "^2.5.4",

rojak-ui-web/src/app/pairing/Pairing.js

@@ -1,32 +1,32 @@
-import React from 'react'
-import { connect } from 'react-redux'
-import { Link } from 'react-router'
-import { fetchPairing } from './actions'
-import Card from '../kit/Card'
-import SimpleList from '../kit/SimpleList'
-import SocialMedia from '../kit/SocialMedia'
+import React from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router';
+import { fetchPairing } from './actions';
+import Card from '../kit/Card';
+import SimpleList from '../kit/SimpleList';
+import SocialMedia from '../kit/SocialMedia';
 
-class Pairing extends React.Component {
+class Pairing extends React.PureComponent {
   static propTypes = {
     id: React.PropTypes.number.isRequired,
     pairing: React.PropTypes.object.isRequired,
     fetchPairing: React.PropTypes.func.isRequired
   }
 
   componentWillMount () {
-    const { id, fetchPairing } = this.props
-    fetchPairing(id)
+    const { id, fetchPairing } = this.props;
+    fetchPairing(id);
   }
 
   componentWillReceiveProps (nextProps) {
-    const { id, fetchPairing } = nextProps
+    const { id, fetchPairing } = nextProps;
     if (this.props.id !== id) {
-      fetchPairing(id)
+      fetchPairing(id);
     }
   }
 
   render () {
-    const { pairing } = this.props
+    const { pairing } = this.props;
     const sentiments = this.props.pairing &&
       this.props.pairing.sentiments_by_media &&
       this.props.pairing.sentiments_by_media.map(sentiment => (
@@ -43,19 +43,19 @@ class Pairing extends React.Component {
             {sentiment.negative_news_count || 0}
           </td>
         </tr>
-      ))
+      ));
 
+    if (this.props.loading) return <div />
     return (
       <div>
+        <h2 style={{fontWeight:'bold', fontSize: 'xx-large'}}>{pairing.name}</h2>
         <Card style={{ margin: '10px auto' }}>
           <div className="uk-grid">
-            <div className="uk-width-1-3">
+            <div className="uk-width-large-1-3 uk-width-medium-1-1">
               <img alt={pairing.name} src={pairing.logo_url} />
             </div>
-            <div className="uk-width-1-3">
+            <div className="uk-width-large-1-3 uk-width-medium-1-1">
               <dl style={{ lineHeight: '26px' }}>
-                <dt>Pasangan</dt>
-                <dd>{pairing.name}</dd>
                 <dt>Slogan</dt>
                 <dd>{pairing.slogan}</dd>
                 <dt>Website</dt>
@@ -66,17 +66,17 @@ class Pairing extends React.Component {
                 <dd>{pairing.overall_sentiments && pairing.overall_sentiments.negative_news_count}</dd>
               </dl>
             </div>
-            <div className="uk-width-1-3">
+            <div className="uk-width-large-1-3 uk-width-medium-1-1">
               <SocialMedia
-                instagram={pairing.instagram_username}
-                twitter={pairing.twitter_username}
-                facebook={pairing.fbpage_username}
-                style={{ float: 'right' }} />
+                  instagram={pairing.instagram_username}
+                  twitter={pairing.twitter_username}
+                  facebook={pairing.fbpage_username}
+                  style={{ float: 'right' }} />
             </div>
           </div>
         </Card>
         <Card style={{ margin: '10px auto' }}>
-          <h2>Sentimen Media</h2>
+          <h2 style={{fontWeight:'bold', fontSize: 'x-large'}}>Sentimen Media</h2>
           <SimpleList>
             <thead>
               <tr>
@@ -92,12 +92,13 @@ class Pairing extends React.Component {
         </Card>
         <br />
       </div>
-    )
+    );
   }
 }
 
 const mapStateProps = state => ({
-  pairing: state.pairings.pairing
-})
+  pairing: state.pairings.pairing,
+  loading: state.pairings.loading_pairing
+});
 
-export default connect(mapStateProps, { fetchPairing })(Pairing)
+export default connect(mapStateProps, { fetchPairing })(Pairing);

rojak-ui-web/src/app/pairing/Pairings.js

@@ -1,8 +1,8 @@
-import React from 'react'
-import { Link } from 'react-router'
-import { connect } from 'react-redux'
-import SimpleList from '../kit/SimpleList'
-import { fetchPairings } from './actions'
+import React from 'react';
+import { Link } from 'react-router';
+import { connect } from 'react-redux';
+import SimpleList from '../kit/SimpleList';
+import { fetchPairings } from './actions';
 
 class Pairings extends React.Component {
   static propTypes = {
@@ -11,7 +11,7 @@ class Pairings extends React.Component {
   }
 
   componentWillMount () {
-    this.props.fetchPairings()
+    this.props.fetchPairings();
   }
 
   render () {
@@ -23,10 +23,10 @@ class Pairings extends React.Component {
           </Link>
         </td>
       </tr>
-    ))
+    ));
     return (
       <div>
-        <h2>Pasangan</h2>
+        <h2 style={{fontWeight:'bold', fontSize: 'xx-large'}}>Pasangan</h2>
         <SimpleList>
           <thead>
             <tr>
@@ -38,12 +38,12 @@ class Pairings extends React.Component {
           </tbody>
         </SimpleList>
       </div>
-    )
+    );
   }
 }
 
 const mapStateToProps = state => ({
   pairings: state.pairings
-})
+});
 
-export default connect(mapStateToProps, { fetchPairings })(Pairings)
+export default connect(mapStateToProps, { fetchPairings })(Pairings);

rojak-ui-web/src/app/pairing/actions.js

@@ -1,27 +1,14 @@
-import { ajax } from '../services'
+import { ajax } from '../services';
 
-export const SET_PAIRINGS = 'SET_PAIRINGS'
-export const SET_PAIRING = 'SET_PAIRING'
+export const SET_PAIRINGS = 'SET_PAIRINGS';
+export const SET_PAIRING = 'SET_PAIRING';
 
-export const setPairings = pairings => ({
+export const fetchPairings = () => ({
   type: SET_PAIRINGS,
-  payload: { pairings }
-})
+  payload: ajax.get('pairings')
+});
 
-export const setPairing = pairing => ({
+export const fetchPairing = (id) => ({
   type: SET_PAIRING,
-  payload: { pairing }
-})
-
-export const fetchPairings = () => dispatch => {
-  ajax.get('pairings').then((res) => {
-    dispatch(setPairings(res.data))
-  })
-}
-
-export const fetchPairing = id => dispatch => {
-  ajax.get(`pairings/${id}?embed[]=overall_sentiments&embed[]=sentiments_by_media`).then((res) => {
-    dispatch(setPairing(res.data))
-  })
-}
-
+  payload: ajax.get(`pairings/${id}?embed[]=overall_sentiments&embed[]=sentiments_by_media`)
+});

rojak-ui-web/src/app/pairing/reducer.js

@@ -1,18 +1,35 @@
-import { SET_PAIRING, SET_PAIRINGS } from './actions'
+import { SET_PAIRING, SET_PAIRINGS } from './actions';
 
 const initialState = {
   list: [],
-  pairing: {}
-}
+  pairing: {},
+  error: null,
+  loading_list: false,
+  loading_pairing: false
+};
 
 export default (state = initialState, action = {}) => {
   const { type, payload } = action
   switch (type) {
-    case SET_PAIRINGS:
-      return Object.assign({}, state, { list: payload.pairings })
-    case SET_PAIRING:
-      return Object.assign({}, state, { pairing: payload.pairing })
+    case `${SET_PAIRINGS}_PENDING`:
+      // return Object.assign({}, state, { loading_list: true });
+      return { ...state, loading_list: true };
+    case `${SET_PAIRINGS}_FULFILLED`:
+      // return Object.assign({}, state, { loading_list: false, list: payload.data });
+      return { ...state, loading_list: false, list: payload.data };
+    case `${SET_PAIRINGS}_REJECTED`:
+      // return Object.assign({}, state, { loading_list: false, error: payload.error });
+      return { ...state, loading_list: false, error: payload.error };
+    case `${SET_PAIRING}_PENDING`:
+      // return Object.assign({}, state, { loading_pairing: true });
+      return { ...state, loading_pairing: true };
+    case `${SET_PAIRING}_FULFILLED`:
+      // return Object.assign({}, state, { loading_pairing: false, pairing: payload.data });
+      return { ...state, loading_pairing: false, pairing: payload.data };
+    case `${SET_PAIRING}_REJECTED`:
+      // return Object.assign({}, state, { loading_pairing: false, error: payload.error });
+      return { ...state, loading_pairing: false, error: payload.error }
     default:
-      return state
+      return state;
   }
-}
+};

rojak-ui-web/src/store.js

@@ -2,6 +2,7 @@ import { createStore, combineReducers, compose, applyMiddleware } from 'redux'
 import { reduxReactRouter, routerStateReducer } from 'redux-router'
 import { createHashHistory } from 'history'
 import thunk from 'redux-thunk'
+import promise from 'redux-promise-middleware'
 
 import sentiments from './app/sentiments/reducer'
 import viewer from './app/viewer/reducer'
@@ -22,6 +23,6 @@ const reducers = combineReducers({
 
 export default compose(
   reduxReactRouter({ createHistory: createHashHistory }),
-  applyMiddleware(thunk),
+  applyMiddleware(promise(), thunk),
   window.devToolsExtension ? window.devToolsExtension() : f => f
 )(createStore)(reducers)