Deferred all data fetching to unblock ui on route change

Justkant · Nov 1, 2015 · 09cb09b · 09cb09b
1 parent 4fe6d53
commit 09cb09b
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 14 deletions.
diff --git a/src/containers/Market/Market.js b/src/containers/Market/Market.js
@@ -9,7 +9,7 @@ export default class Market extends Component {
     market: PropTypes.array
   };
 
-  static fetchData(getState, dispatch) {
+  static fetchDataDeferred(getState, dispatch) {
     if (!isMarketLoaded(getState())) {
       return dispatch(loadMarket());
     }
@@ -21,7 +21,7 @@ export default class Market extends Component {
 
     return (
       <div className={styles.container}>
-        {market.map((product) => {
+        {market && market.map((product) => {
           return (<ProductVignette product={product} key={product.id}/>);
         })}
       </div>

diff --git a/src/containers/Product/Product.js b/src/containers/Product/Product.js
@@ -10,7 +10,7 @@ export default class Product extends Component {
     params: PropTypes.object.isRequired
   };
 
-  static fetchData(getState, dispatch, location, params) {
+  static fetchDataDeferred(getState, dispatch, location, params) {
     if (!isProductLoaded(getState())) {
       return dispatch(getById(params.id));
     }

diff --git a/src/containers/Products/Products.js b/src/containers/Products/Products.js
@@ -22,7 +22,7 @@ export default class Products extends Component {
     this.checkFile = this.checkFile.bind(this);
   }
 
-  static fetchData(getState, dispatch) {
+  static fetchDataDeferred(getState, dispatch) {
     if (!isAllLoaded(getState())) {
       return dispatch(getAll());
     }
@@ -105,13 +105,15 @@ export default class Products extends Component {
     );
 
     const productsList = [];
-    for (const product of products) {
-      productsList.push(
-        <div className={styles.element} key={product.id}>
-          <img src={'/api/' + product.imageUrl}/>
-          <h4>{product.title}</h4>
-        </div>
-      );
+    if (products) {
+      for (const product of products) {
+        productsList.push(
+          <div className={styles.element} key={product.id}>
+            <img src={'/api/' + product.imageUrl}/>
+            <h4>{product.title}</h4>
+          </div>
+        );
+      }
     }
 
     return (

diff --git a/src/containers/Users/Users.js b/src/containers/Users/Users.js
@@ -8,7 +8,7 @@ export default class Users extends Component {
     users: PropTypes.array
   };
 
-  static fetchData(getState, dispatch) {
+  static fetchDataDeferred(getState, dispatch) {
     if (!isUsersLoaded(getState())) {
       return dispatch(getUsers());
     }
@@ -20,7 +20,7 @@ export default class Users extends Component {
 
     return (
       <div className={styles.container}>
-        {users.map((user, index) => {
+        {users && users.map((user, index) => {
           return (
             <div className={styles.element} key={user.username + index}>
               <img src="/default-user.png"/>

diff --git a/src/redux/modules/product.js b/src/redux/modules/product.js
@@ -77,7 +77,8 @@ export default function reducer(state = initialState, action = {}) {
     case GETBYID:
       return {
         ...state,
-        gettingById: true
+        gettingById: true,
+        product: null
       };
     case GETBYID_SUCCESS:
       return {
@@ -91,6 +92,7 @@ export default function reducer(state = initialState, action = {}) {
         ...state,
         gettingById: false,
         gotById: false,
+        product: null,
         error: action.error
       };
     default: