Add list loading message

Author: tb

client/src/components/Categories/CategoryList.js

@@ -24,6 +24,7 @@ export class CategoryList extends Component {
             />
           </div>,
         )}
+        {resourceList.empty && resourceList.loading && <p>Loading...</p>}
         <CategoryForm
           isNew={true}
           form="category-new"

client/src/components/Dashboard.js

@@ -23,6 +23,7 @@ export class Dashobard extends Component {
     return (
       <div>
         <h4>Latest posts</h4>
+        {postsList.empty && postsList.loading && <p>Loading...</p>}
         {postsList.data.map(post =>
           <div key={post.id}>
             <Link to={`/posts/${post.id}`}>{post.title}</Link>

client/src/components/Posts/PostList.js

@@ -75,6 +75,7 @@ export class PostList extends Component {
           </tbody>
         </Table>
         <Pagination {...this.props}></Pagination>
+        {resourceList.empty && resourceList.loading && <p>Loading...</p>}
       </div>
     );
   }

client/src/components/Users/UserList.js

@@ -43,6 +43,7 @@ export class UserList extends Component {
           </tbody>
         </Table>
         <Pagination {...this.props}></Pagination>
+        {resourceList.empty && resourceList.loading && <p>Loading...</p>}
       </div>
     );
   }

client/src/store/api/reducer.js

@@ -48,12 +48,18 @@ export default (state = initialState, action) => {
     case actionType(GET_ONE, SUCCESS): {
       return addNormalized(newState, payload);
     }
+    case actionType(GET_LIST, STARTED): {
+      console.log('loading');
+      return imm.set(newState, [key, list, 'loading'], true);
+    }
     case actionType(GET_LIST, SUCCESS): {
+      console.log('loaded');
       newState = addNormalized(newState, payload);
       newState = imm.set(newState, [key, list, 'ids'], map(payload.data, 'id'));
       newState = imm.set(newState, [key, list, 'params'], payload.params);
       newState = imm.set(newState, [key, list, 'links'], payload.links);
       newState = imm.set(newState, [key, list, 'meta'], payload.meta);
+      newState = imm.set(newState, [key, list, 'loading'], false);
       return newState;
     }
     case actionType(GET_MANY, SUCCESS): {

client/src/store/api/selectors.js

@@ -19,7 +19,7 @@ export const getMany = (state, resourceName, ids) => {
 export const getList = (state, resourceName, listName = 'list') => {
   const byId = get(state, ['api', resourceName, 'byId']) || {};
   const list = get(state, ['api', resourceName, listName]) || {};
-  return isEmpty(list)
-    ? { data: [], ids: [], links: {}, params: { page: {}, filter: {} } }
-    : { ...list, data: list.ids.map(id => byId[id]) };
+  return isEmpty(list.ids)
+    ? { data: [], ids: [], links: {}, params: { page: {}, filter: {} }, loading: true, empty: true }
+    : { ...list, empty: false, data: list.ids.map(id => byId[id]) };
 };

client/webpack.config.js

@@ -51,6 +51,11 @@ module.exports = removeEmpty({
       '/**': {
         target: 'http://localhost:3001',
       },
+      // '/**': {
+      //   target: 'https://rails-json-api-react.herokuapp.com',
+      //   secure: true,
+      //   changeOrigin: true,
+      // },
     }
   }),