fix(api error): catch failed to fetch errors and let the user know

- refactors `apiActionTypes` and `isApiAction` to `utils/actionTypes` file
- fix all imports
- moved `apiConnection` to new `Connection` store
- add `failedToFetchCount` to `Connection` store
- remove `setApiConnection` func
- add `Connection` reducer
- add `FAILED_TO_FETCH` action type to `Connection` reducer
- test for failed to fetch errors in `apiMiddleware`, send action with type `FAILED_TO_FETCH`
- catch `FAILED_TO_FETCH` actions in `Connection` reducer, increment `failedToFetchCount` each time. Set `apiConnection` to -1 after 15 tries
- catch all api success actions in the `Connection` reducer. On api success, set `apiConnection` to 1 and reset `failedToFetchCount`

app/reducers/connection.ts

@@ -4,17 +4,15 @@ import { getActionType, isApiAction } from '../utils/actionType'
 export const FAILED_TO_FETCH = 'FAILED_TO_FETCH'
 export const SET_API_CONNECTION = 'SET_API_CONNECTION'
 
-export const initialState = {
+const initialState = {
   apiConnection: 0,
   failedToFetchCount: 0
 }
 
-export const maxFailedFetches = 14
-
 export default (state = initialState, action: AnyAction) => {
   // if an api action succeeds, we are no longer in an
   // unconnected state!
-  if (isApiAction(action) && getActionType(action) === 'success') {
+  if (isApiAction(action.type) && getActionType(action) === 'success') {
     if (state.apiConnection !== 1 || state.failedToFetchCount > 0) {
       return {
         apiConnection: 1,
@@ -25,8 +23,7 @@ export default (state = initialState, action: AnyAction) => {
   }
   switch (action.type) {
     case FAILED_TO_FETCH:
-      if (state.apiConnection === -1) return state
-      if (state.failedToFetchCount >= maxFailedFetches) {
+      if (state.failedToFetchCount >= 14) {
         return {
           failedToFetchCount: 0,
           apiConnection: -1

app/utils/actionType.ts

@@ -1,15 +1,15 @@
+export const getActionType = (action = { type: '' }): string => {
+  if (action.type.includes('REQUEST')) return 'request'
+  if (action.type.includes('SUCCESS')) return 'success'
+  if (action.type.includes('FAILURE')) return 'failure'
+  return ''
+}
+
 export function apiActionTypes (endpoint: string): [string, string, string] {
   const name = endpoint.toUpperCase()
   return [`API_${name}_REQUEST`, `API_${name}_SUCCESS`, `API_${name}_FAILURE`]
 }
 
-export const getActionType = (action = { type: '' }): string => {
-  if (action.type.endsWith('REQUEST')) return 'request'
-  if (action.type.endsWith('SUCCESS')) return 'success'
-  if (action.type.endsWith('FAILURE')) return 'failure'
-  return ''
-}
-
-export function isApiAction (action = { type: '' }): boolean {
-  return !!action.type && action.type.startsWith('API')
+export function isApiAction (endpoint: string): boolean {
+  return endpoint.includes('API')
 }