Add error boundary handling

- dispatch errors to redux - display error message if request fails
AgileVentures · Jan 26, 2019 · 2c5788d · 2c5788d
1 parent 8578c9c
commit 2c5788d
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 19 deletions.
diff --git a/src/actions/getProjectsAction.js b/src/actions/getProjectsAction.js
@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { GET_PROJECTS } from '../types'
+import { GET_PROJECTS, FETCH_PROJECTS_FAILURE } from '../types'
 import '../assets/LogIn.scss'
 
 export let getProjects = projects => ({
@@ -12,6 +12,11 @@ export let fetchProjects = () => dispatch => {
     let { projects, languages, followers, documents } = response.data
     updateProjectsObject(projects, languages, followers, documents)
     dispatch(getProjects(projects))
+  }).catch(error => {
+    dispatch({
+      type: FETCH_PROJECTS_FAILURE,
+      message: error.message
+    })
   })
 }
 

diff --git a/src/components/Paginate.js b/src/components/Paginate.js
@@ -1,21 +1,29 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { RingLoader } from 'react-spinners'
+import { Header } from 'semantic-ui-react'
 
-const Paginate = ({ items, Component }) => {
+const Paginate = ({ items, Component, error }) => {
   let itemsArray
+  let errorMessage
+
+  if (error) {
+    errorMessage = (
+      <Fragment>
+        <Header as='h1'>
+        Oops! There was an error fetching Projects...
+        </Header>
+        <Header as='h2'>
+        Please try again later, or
+        send us an email at info@agileventures.org
+        </Header>
+      </Fragment>
+    )
+  }
   if (items.length) {
-    itemsArray = items.map(item => (
-      <Component key={item.id} item={item} />
-    ))
+    itemsArray = items.map(item => <Component key={item.id} item={item} />)
   }
   return (
-    itemsArray || (
-      <RingLoader
-        sizeUnit={'px'}
-        size={200}
-        color={'#34495E'}
-      />
-    )
+    itemsArray || errorMessage || <RingLoader sizeUnit={'px'} size={200} color={'#34495E'} />
   )
 }
 

diff --git a/src/containers/ProjectsList.js b/src/containers/ProjectsList.js
@@ -7,6 +7,7 @@ import Select from 'react-select'
 import Project from '../components/Project'
 import Paginate from '../components/Paginate'
 import PaginationLinks from '../components/PaginationLinks'
+import '../assets/LogIn.scss'
 import '../assets/ProjectsList.css'
 
 const projectsPerPage = 12
@@ -22,19 +23,27 @@ export class ProjectsList extends Component {
     filteredProjects: {},
     totalProjects: null,
     selectedLanguage: null,
-    languages: []
+    languages: [],
+    error: false
   };
 
-  componentDidMount () {
+  componentDidMount = async () => {
     if (!this.props.projects.length) {
-      this.props.fetchProjects()
+      await this.props.fetchProjects()
+      if (this.props.projects[0].error) {
+        console.log(this.props.projects)
+        this.setState({ error: <div /> })
+      }
     } else {
       this.paginateProjects(this.props.projects)
     }
-  }
+  };
 
   componentWillReceiveProps (nextProps) {
-    if (this.props.projects.length !== nextProps.projects.length) {
+    if (
+      this.props.projects.length !== nextProps.projects.length &&
+      !nextProps.projects[0].error
+    ) {
       this.paginateProjects(nextProps.projects)
     }
   }
@@ -155,7 +164,8 @@ export class ProjectsList extends Component {
       projectsList,
       filteredProjectsList,
       selectedLanguage,
-      pageCount
+      pageCount,
+      error
     } = this.state
 
     return (
@@ -190,6 +200,7 @@ export class ProjectsList extends Component {
                   items={filteredProjectsList || projectsList}
                   Component={Project}
                   pageCount={pageCount}
+                  error={error}
                 />
               </Card.Group>
               {!(pageCount === 1) ? (

diff --git a/src/reducers/projectsReducer.js b/src/reducers/projectsReducer.js
@@ -5,6 +5,8 @@ const projectsReducer = (state = initialState.projects, action) => {
   switch (action.type) {
     case GET_PROJECTS:
       return [ ...action.payload ]
+    case FETCH_PROJECTS_FAILURE:
+      return [ ...state, { error: action.message } ]
     default:
       return state
   }

diff --git a/src/types/index.js b/src/types/index.js
@@ -2,3 +2,4 @@ export const GET_USERS = 'GET_USERS'
 export const GET_PROJECTS = 'GET_PROJECTS'
 export const POST_LOGIN_INFO = 'POST_LOGIN_INFO'
 export const POST_SIGNUP_INFO = 'POST_SIGNUP_INFO'
+export const FETCH_PROJECTS_FAILURE = 'FETCH_PROJECTS_FAILURE'