Add support for multiple lists

Author: tb

client/src/components/App.js

@@ -26,6 +26,9 @@ export class App extends Component {
             <NavbarToggler right onClick={this.toggle} />
             <Collapse isOpen={this.state.isOpen} navbar>
               <Nav navbar>
+                <NavItem>
+                  <NavLink href="/#/">Dashboard</NavLink>
+                </NavItem>
                 <NavItem>
                   <NavLink href="/#/posts">Posts</NavLink>
                 </NavItem>

client/src/components/Dashboard.js

@@ -0,0 +1,51 @@
+import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
+import { connect } from 'react-redux';
+import { get, find, keyBy } from 'lodash';
+
+import { fetchList, getList, getMap } from '../store/api';
+
+const formatDate = date => (new Date(date)).toLocaleString();
+
+export class Dashobard extends Component {
+  componentWillMount() {
+    this.props.fetchPostsList();
+  }
+
+  getCategoryForPost(post) {
+    const categoryId = String(get(post, 'category.id'));
+    return this.props.categoriesById[categoryId] || {};
+  }
+
+  render() {
+    const { postsList } = this.props;
+
+    return (
+      <div>
+        <h4>Latest posts</h4>
+        {postsList.data.map(post =>
+          <div key={post.id}>
+            <Link to={`/posts/${post.id}`}>{post.title}</Link>
+            ({this.getCategoryForPost(post).name})
+            {formatDate(post.createdAt)}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export const mapStateToProps = state => ({
+  postsList: getList(state, 'posts', 'latestPosts'),
+  categoriesById: getMap(state, 'categories'),
+});
+
+export const mapDispatchToProps = dispatch => ({
+  fetchPostsList: () => dispatch(fetchList(
+    'posts',
+    { include: 'category', page: { size: 5 }, sort: '-createdAt' },
+    { list: 'latestPosts' },
+  )),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Dashobard);

client/src/components/Posts/PostList.js

@@ -87,7 +87,7 @@ export const mapStateToProps = state => ({
 });
 
 export const mapDispatchToProps = dispatch => ({
-  fetchCategories: () => dispatch(fetchList('categories', { page: { limit: 999 } })),
+  fetchCategories: () => dispatch(fetchList('categories', { page: { size: 999 } })),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(

client/src/components/Routes.js

@@ -4,6 +4,7 @@ import { UserAuthWrapper } from 'redux-auth-wrapper';
 
 import { getUser } from '../store/api';
 import App from './App';
+import Dashboard from './Dashboard';
 import { PostList, PostEdit } from './Posts';
 import { CategoryList, CategoryEdit } from './Categories';
 import { UserList, UserEdit } from './Users';
@@ -22,7 +23,7 @@ export class Routes extends PureComponent {
     return (
       <Router history={history}>
         <Route path="/" component={UserIsAuthenticated(App)}>
-          <IndexRoute component={PostList}/>
+          <IndexRoute component={Dashboard}/>
           <Route path="/posts" component={PostList}/>
           <Route path="/posts/new" component={PostEdit}/>
           <Route path="/posts/:id" component={PostEdit}/>

client/src/store/api/reducer.js

@@ -41,7 +41,7 @@ const addNormalized = (newState, payload) => {
 
 export default (state = initialState, action) => {
   const { type, payload, meta } = action;
-  const { key } = meta || {};
+  const { key, list = 'list' } = meta || {};
   let newState = state;
 
   switch (type) {
@@ -50,10 +50,10 @@ export default (state = initialState, action) => {
     }
     case actionType(GET_LIST, SUCCESS): {
       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, '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);
       return newState;
     }
     case actionType(GET_MANY, SUCCESS): {
@@ -62,7 +62,7 @@ export default (state = initialState, action) => {
     case actionType(CREATE, SUCCESS): {
       newState = addNormalized(newState, payload);
       if (meta.list) {
-        newState = imm.push(newState, [key, 'list', 'ids'], payload.data.id);
+        newState = imm.push(newState, [key, list, 'ids'], payload.data.id);
       }
       return newState;
     }
@@ -71,8 +71,8 @@ export default (state = initialState, action) => {
     }
     case actionType(DELETE, SUCCESS): {
       newState = imm.del(newState, [key, 'byId', payload.data.id]);
-      newState = imm.set(newState, [key, 'list', 'ids'],
-        without(get(newState, [key, 'list', 'ids']), payload.data.id),
+      newState = imm.set(newState, [key, list, 'ids'],
+        without(get(newState, [key, list, 'ids']), payload.data.id),
       );
       return newState;
     }

client/src/store/api/selectors.js

@@ -1,21 +1,24 @@
 import { get, isEmpty } from 'lodash';
 
-export const getUser = state => get(state, ['api', 'user']) || {};
+export const getUser = state =>
+  get(state, ['api', 'user']) || {};
 
-export const getOne = (state, key, id) => get(state, ['api', key, 'byId', id]) || {};
+export const getOne = (state, resourceName, id) =>
+  get(state, ['api', resourceName, 'byId', id]) || {};
 
-export const getMap = (state, key) => get(state, ['api', key, 'byId']) || {};
-
-export const getMany = (state, key, ids) => {
-  const { byId } = get(state, ['api', key]) || {};
+export const getMap = (state, resourceName) =>
+  get(state, ['api', resourceName, 'byId']) || {};
 
+export const getMany = (state, resourceName, ids) => {
+  const byId = get(state, ['api', resourceName, 'byId']);
   return isEmpty(byId)
     ? []
     : (ids || Object.keys(byId)).map(id => byId[id]);
 };
 
-export const getList = (state, key) => {
-  const { byId, list } = get(state, ['api', key]) || {};
+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]) };