Normalize state shape, add reselect and withLoading component

Author: ewydra

package-lock.json

@@ -14,7 +14,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));
   }
 }
+
+export const getArticles = () => ({ type: types.GET_ARTICLES });
+export const getArticlesSuccess = payload => ({ type: types.GET_ARTICLES_SUCCESS, payload });
+export const getArticlesError = payload => ({ type: types.GET_ARTICLES_ERROR, payload });
+
+export const addArticle = () => ({ type: types.ADD_ARTICLE });
+export const addArticleSuccess = payload => ({ type: types.ADD_ARTICLE_SUCCESS, payload });
+export const addArticleError = payload => ({ type: types.ADD_ARTICLE_ERROR, payload });

src/actions/articles.js

@@ -1,7 +1,6 @@
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import mockAxios from 'axios';
-import * as types from '../types/articles';
 import * as actions from './articles';
 
 const middlewares = [thunk]
@@ -33,6 +32,8 @@ const addArticleData = {
   text: 'New article content'
 };
 
+const setupHistory = () => ({ push: jest.fn()});
+
 describe('articles actions', () => {
   beforeEach(() => {
     store.clearActions();
@@ -42,8 +43,8 @@ describe('articles actions', () => {
     mockAxios.get.mockImplementationOnce(() => Promise.resolve({ data: fetchArticlesData }));
 
     const expectedActions = [
-      { type: types.GET_ARTICLES },
-      { type: types.GET_ARTICLES_SUCCESS, payload: fetchArticlesData }
+      actions.getArticles(),
+      actions.getArticlesSuccess(fetchArticlesData)
     ];
 
     await store.dispatch(actions.fetchArticles())
@@ -56,11 +57,11 @@ describe('articles actions', () => {
     mockAxios.post.mockImplementationOnce(() => Promise.resolve({ data: addArticleData }));
 
     const expectedActions = [
-      { type: types.ADD_ARTICLE },
-      { type: types.ADD_ARTICLE_SUCCESS, payload: addArticleData }
+      actions.addArticle(),
+      actions.addArticleSuccess(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,17 @@
 import React from "react";
 import { connect } from 'react-redux';
-import { selectArticleById } from '../selectors/articles';
+import { getArticleById } 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),
-});
+  article: getArticleById(state, props.match.params.id)
+})
 
 export default connect(mapStateToProps)(ArticleDetails);

src/components/ArticleDetails.jsx

@@ -1,11 +1,12 @@
 import React, { Component, Fragment } from "react";
+import { compose } from 'redux';
 import { connect } from "react-redux";
 import { Formik, Field, Form } from "formik";
 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: "",
@@ -30,16 +31,17 @@ export class ArticleForm extends Component {
       date: format(new Date(), 'MMMM d, yyyy H:mm:ss'),
       id: Date.now()
     };
-    this.props.addArticle(data);
-    this.props.history.push(`/article/${data.id}`);
+    values.date = format(new Date(), 'MMMM d, yyyy H:mm:ss');
+    values.id = Date.now();
+    this.props.createArticle(data, 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}
@@ -78,10 +80,10 @@ export class ArticleForm extends Component {
 }
 
 const mapDispatchToProps = {
-  addArticle
+  createArticle
 };
 
-export default connect(
-  null,
-  mapDispatchToProps
-)(withRouter(ArticleForm));
+export default compose(
+  connect(null, mapDispatchToProps),
+  withRouter,
+)(ArticleForm);

src/components/ArticleForm.jsx

@@ -1,37 +1,21 @@
 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 => {
+  listArticles = () => (
+    this.props.articles.map((article) => {
       return <ArticleListItem key={article.id} article={article} />
-    });
+    })
+  )
 
   render() {
-    if (this.props.isLoading) return <Spinner />
-    return ( 
+    return (
       <ul className="Article-list">
         {this.listArticles()}
       </ul>
     )
   }
 }
 
-const mapStateToProps = (state) => ({
-  articles: getArticles(state),
-  isLoading: isLoading(state),
-});
-
-const mapDispatchToProps = {
-  fetchArticles
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ArticleList);
+export default withLoading(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,18 +12,18 @@ 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,
-        }}
-      >
+      <SnackbarContext.Provider value={this.state}>
         <Snackbar />
         {children}
       </SnackbarContext.Provider>

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};