Normalize state shape, add reselect and withLoading component

Author: ewydra

package-lock.json

@@ -15,7 +15,8 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
     "redux": "^4.0.4",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -4,7 +4,7 @@ import {
   Switch,
   Route,
 } from "react-router-dom";
-import ArticleList from './components/ArticleList';
+import ArticleListPage from './components/ArticleListPage';
 import ArticleDetails from './components/ArticleDetails';
 import Navbar from './components/Navbar';
 import AddArticlePage from './components/AddArticlePage';
@@ -16,7 +16,7 @@ function App() {
       <Router>
         <Navbar />
         <Switch>
-          <Route exact path="/" component={ArticleList} />
+          <Route exact path="/" component={ArticleListPage} />
           <Route path="/article/new" component={AddArticlePage} />
           <Route path="/article/:id" component={ArticleDetails} />
         </Switch>

src/App.js

@@ -1,29 +1,31 @@
 import * as types from '../types/articles';
 import axios from '../utils/axios';
 
-export const fetchArticles = () => {
-  return (dispatch) => {
-    dispatch({type: types.GET_ARTICLES});
-    axios.get('/articles')
-      .then(response => {
-        dispatch({ type: types.GET_ARTICLES_SUCCESS, payload: response.data });
-      })
-      .catch(error => {
-        dispatch({ type: types.GET_ARTICLES_ERROR, payload: error });
-      });
+export const fetchArticles = () => async dispatch => {
+  try {
+    dispatch(getArticles());
+    const response = await axios.get('/articles');
+    dispatch(getArticlesSuccess(response.data));
+  } catch (error) {
+    dispatch(getArticlesError(error));
   }
 }
 
-export const addArticle = (payload, history) => {
-  return (dispatch) => {
-    dispatch({type: types.ADD_ARTICLE});
-    axios.post('/articles', payload)
-      .then(response => {
-        dispatch({ type: types.ADD_ARTICLE_SUCCESS, payload: response.data });
-        history.push(`/article/${response.data.id}`);
-      })
-      .catch(error => {
-        dispatch({ type: types.ADD_ARTICLE_ERROR, payload: error });
-      });
+export const createArticle = (payload, history) => async dispatch => {
+  try {
+    dispatch(addArticle());
+    const response = await axios.post('/articles', payload);
+    dispatch(addArticleSuccess(response.data));
+    history.push(`/article/${response.data.id}`);
+  } catch (error) {
+    dispatch(addArticleError(error));
   }
 }
+
+const getArticles = () => ({ type: types.GET_ARTICLES });
+const getArticlesSuccess = payload => ({ type: types.GET_ARTICLES_SUCCESS, payload });
+const getArticlesError = payload => ({ type: types.GET_ARTICLES_ERROR, payload });
+
+const addArticle = () => ({ type: types.ADD_ARTICLE });
+const addArticleSuccess = payload => ({ type: types.ADD_ARTICLE_SUCCESS, payload });
+const addArticleError = payload => ({ type: types.ADD_ARTICLE_ERROR, payload });

src/actions/articles.js

@@ -33,6 +33,8 @@ const addArticleData = {
   text: 'New article content'
 };
 
+const setupHistory = () => ({ push: jest.fn()});
+
 describe('articles actions', () => {
   beforeEach(() => {
     store.clearActions();
@@ -60,7 +62,7 @@ describe('articles actions', () => {
       { type: types.ADD_ARTICLE_SUCCESS, payload: addArticleData }
     ];
 
-    await store.dispatch(actions.addArticle())
+    await store.dispatch(actions.createArticle(addArticleData, setupHistory()))
 
     expect(store.getActions()).toEqual(expectedActions);
     expect(mockAxios.post).toHaveBeenCalledTimes(1);

src/actions/articles.test.js

@@ -1,17 +1,20 @@
 import React from "react";
 import { connect } from 'react-redux';
-import { selectArticleById } from '../selectors/articles';
+import { getArticleByIdSelector } from '../selectors/articles';
 
 export const ArticleDetails = ({ article: { title, text, date } }) => (
   <article className="Article">
     <header className="Article__title">{title}</header>
     <section className="Article__content">{text}</section>
     <footer className="Article__footer">Created: {date}</footer>
   </article>
-);
+)
 
-const mapStateToProps = (state, props) => ({
-  article: selectArticleById(state, props.match.params.id),
-});
+const mapStateToProps = () => {
+  const getArticleById = getArticleByIdSelector()
+  return (state, props) => ({
+    article: getArticleById(state, props.match.params.id)
+  })
+}
 
 export default connect(mapStateToProps)(ArticleDetails);

src/components/ArticleDetails.jsx

@@ -5,7 +5,7 @@ import { format } from 'date-fns';
 import { withRouter } from 'react-router-dom';
 import TextField from "./utils/TextField";
 import SnackbarContext from "./Snackbar/SnackbarContext";
-import { addArticle } from "../actions/articles";
+import { createArticle } from "../actions/articles";
 
 const initialValues = {
   title: "",
@@ -28,15 +28,15 @@ export class ArticleForm extends Component {
   submit = (values, { resetForm }) => {
     values.date = format(new Date(), 'MMMM d, yyyy H:mm:ss');
     values.id = Date.now();
-    this.props.addArticle(values, this.props.history);
+    this.props.createArticle(values, this.props.history);
     this.context.showSnackbar('The article was published successfully', 'success');
     resetForm();
   }
 
   render() {
     return (
       <Fragment>
-        <h1 className="Article-form__title">{this.props.title}</h1>
+        <h1 className="Article-form__title">{this.props.title || ''}</h1>
           <Formik
             initialValues={this.props.article || initialValues}
             onSubmit={this.submit}
@@ -75,7 +75,7 @@ export class ArticleForm extends Component {
 }
 
 const mapDispatchToProps = {
-  addArticle
+  createArticle
 };
 
 export default connect(

src/components/ArticleForm.jsx

@@ -1,22 +1,15 @@
 import React, {Component} from 'react';
-import { connect } from 'react-redux';
-import { getArticles, isLoading } from '../selectors/articles';
-import { fetchArticles } from '../actions/articles';
 import ArticleListItem from './ArticleListItem';
-import Spinner from './utils/Spinner';
+import withLoading from './utils/withLoading';
 
 export class ArticleList extends Component {
-  componentDidMount() {
-    this.props.fetchArticles();
-  }
-
-  listArticles = () => 
-    this.props.articles.map(article => {
-      return <ArticleListItem key={article.id} article={article} />
-    });
+  listArticles = () => (
+    Object.entries(this.props.articles).map(([key, val]) => {
+      return <ArticleListItem key={key} article={val} />
+    })
+  )
 
   render() {
-    if (this.props.isLoading) return <Spinner />
     return ( 
       <ul className="Article-list">
         {this.listArticles()}
@@ -25,13 +18,6 @@ export class ArticleList extends Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  articles: getArticles(state),
-  isLoading: isLoading(state),
-});
-
-const mapDispatchToProps = {
-  fetchArticles
-};
+ArticleList = withLoading(ArticleList)
 
-export default connect(mapStateToProps, mapDispatchToProps)(ArticleList);
+export default ArticleList;

src/components/ArticleList.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { isLoading, getArticlesSelector } from '../selectors/articles';
+import { fetchArticles } from '../actions/articles';
+import { ArticleList } from './ArticleList';
+
+class ArticleListPage extends Component {
+  componentDidMount() {
+    this.props.fetchArticles();
+  }
+
+  render() {
+    const { articles, isLoading } = this.props;
+    return (
+      <ArticleList articles={articles} isLoading={isLoading} />
+    )
+  }
+}
+
+const mapStateToProps = (state) => ({
+  articles: getArticlesSelector(state),
+  isLoading: isLoading(state),
+});
+
+const mapDispatchToProps = {
+  fetchArticles
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ArticleListPage);

src/components/ArticleListPage.jsx

@@ -3,15 +3,6 @@ import SnackbarContext from './SnackbarContext';
 import Snackbar from './Snackbar';
 
 export class SnackbarProvider extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-      message: '',
-      status: 'success',
-    };
-  }
-
   showSnackbar = (message, status) => {
     this.setState({
       message,
@@ -21,17 +12,19 @@ export class SnackbarProvider extends Component {
     setTimeout(() => this.setState({ isOpen: false}), 3000);
   };
 
+  state = {
+    isOpen: false,
+    message: '',
+    status: 'success',
+    showSnackbar: this.showSnackbar,
+  };
+
   render() {
     const { children } = this.props;
 
     return (
       <SnackbarContext.Provider
-        value={{
-          showSnackbar: this.showSnackbar,
-          isOpen: this.state.isOpen,
-          message: this.state.message,
-          status: this.state.status,
-        }}
+        value={this.state}
       >
         <Snackbar />
         {children}

src/components/Snackbar/SnackbarProvider.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import SnackbarProvider from './SnackbarProvider';
+
+jest.useFakeTimers();
+
+describe('SnackbarProvider', () => {
+  it('should display snackbar when showSnackbar() is called', () => {
+    const component = mount(<SnackbarProvider />);
+    component.state().showSnackbar('test', 'success');
+    
+    expect(component.state('message')).toEqual('test');
+    expect(component.state('status')).toEqual('success');
+    expect(component.state('isOpen')).toEqual(true);
+    expect(component.find('Snackbar')).toExist();
+
+    jest.runAllTimers();
+
+    expect(component.state('isOpen')).toEqual(false);
+  })
+})

src/components/Snackbar/SnackbarProvider.test.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Spinner from './Spinner';
+
+const withLoading = WrappedComponent => {
+  return ({ isLoading, ...props }) => {
+    if (isLoading === true) return <Spinner />;
+    return <WrappedComponent {...props} />
+  }
+}
+
+export default withLoading;

src/components/utils/withLoading.jsx

@@ -1,16 +1,28 @@
 import * as types from '../types/articles';
 
-const initialState = { data: [], loading: false, error: null };
+const initialState = { byId: {}, allIds: [], loading: false, error: null };
 
-export default function articles(state = initialState, action) {
+const normalizeData = data => data.reduce((previous, current) => {
+  const result = addNormalizedData(previous, current);
+  return {...result, loading: false, error: null};
+}, initialState);
+
+const addNormalizedData = (result, data) => ({
+  ...result, 
+    byId: {...result.byId, [data.id]: data},
+    allIds: [...result.allIds, data.id]
+})
+
+export default function getArticles(state = initialState, action) {
   switch (action.type) {
     case types.GET_ARTICLES:
     case types.ADD_ARTICLE: 
       return {...state, loading: true};
     case types.GET_ARTICLES_SUCCESS: 
-      return {...state, loading: false, data: action.payload};
+      return normalizeData(action.payload);
     case types.ADD_ARTICLE_SUCCESS: 
-      return {...state, loading: false, data: [...state.data, action.payload]};
+      const data = addNormalizedData(state, action.payload);
+      return {...data, loading: false, error: null};
     case types.GET_ARTICLES_ERROR:
     case types.ADD_ARTICLE_ERROR: 
       return {...state, loading: false, error: action.payload};

src/reducers/articles.js

@@ -1,7 +1,17 @@
-export const selectArticleById = (state, id) => {
-  return state.articles.data.find(article => article.id === Number(id));
-}
+import { createSelector } from 'reselect'
 
-export const getArticles = state => state.articles.data;
+export const getArticleById = (state, id) => state.articles.byId[id];
+
+const getArticles = state => state.articles.byId;
 
 export const isLoading = state => state.articles.loading;
+
+export const getArticlesSelector = createSelector(
+  getArticles,
+  (articles) => articles
+)
+
+export const getArticleByIdSelector = () => createSelector(
+  getArticleById,
+  (article) => article
+)

src/selectors/articles.js

@@ -1,10 +1,12 @@
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import rootReducer from './reducers';
 
+const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
 export default function configureStore() {
  return createStore(
   rootReducer,
-   applyMiddleware(thunk)
+   composeEnhancer(applyMiddleware(thunk))
  );
 }