Code smart, not hard

import axios from 'axios'
import store from '../store'
import { startLoading, stopLoading, notify } from '../actions'

const JWT_TOKEN = 'JWT_TOKEN'

// have a base api instance to avoid repeating common config - like the base URL
// https://github.com/axios/axios#custom-instance-defaults
const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  timeout: process.env.REACT_APP_API_TIMEOUT
})

// add the Auth header to the base API instance once here to avoid repeated code
if (localStorage.getItem(JWT_TOKEN)) {
  const token = localStorage.getItem(JWT_TOKEN)
  api.defaults.headers.Authorization = `Bearer ${token}`
}

// keep networking logic - like handling headers and tokens - in the network layer
export function login (token) {
  api.defaults.headers.Authorization = `Bearer ${token}`
  localStorage.setItem(JWT_TOKEN, token)
}

export function logout () {
  delete api.defaults.headers.Authorization
  localStorage.removeItem(JWT_TOKEN)
}

// handle generic events - like loading and 500 type errors - in API interceptors
api.interceptors.request.use(config => {
  // display a single subtle loader on the top of the page when there is networking in progress
  // avoid multiple loaders, use placeholders or consistent updates instead
  store.dispatch(startLoading())
  return config
})

api.interceptors.response.use(
  resp => {
    store.dispatch(stopLoading())
    return resp
  },
  err => {
    store.dispatch(stopLoading())
    // if you have no specific plan B for errors, let them be handled here with a notification
    const { data, status } = err.response
    if (500 < status) {
      const message = data.message || 'Ooops, something bad happened.'
      store.dispatch(notify({ message, color: 'danger' }))
    }
    throw err
  }
)

export default api

import articlesApi from '../api/articles'

const LIST_ARTICLES = 'LIST_ARTICLES'

export function listArticles () {
  return async dispatch => {
    // no need to handle LIST_ARTICLES_INIT and LIST_ARTICLES_ERROR here
    const articles = await articlesApi.list()
    dispatch({ type: LIST_ARTICLES, articles })
  }
}

import { LIST_ARTICLES } from '../actions/articles'

export function articles (state = [], { type, articles }) {
  switch (type) {
    case LIST_ARTICLES:
      return articles
    default:
      return state
  }
}

import React from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'

// isLoggedIn is coming from the redux store
export default App ({ isLoggedIn }) {
  // render the private routes when the user is logged in
  if (isLoggedIn) {
    return (
      <Switch>
        <Route exact path="/home" component={HomePage} />
        <Route exact path="/article/:id" component={ArticlePage} />
        <Route exact path="/error" component={ErrorPage} />
        <Redirect exact from="/" to="/home" />
        <Route component={NotFoundPage} />
      </Switch>
    )
  }

  // render the public router when the user is not logged in
  return (
    <Switch>
      <Route exact path="/login" component={LoginPage} />
      <Route exact path="/register" component={RegisterPage} />
      <Redirect to="/login" />
    </Switch>
  )
}

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './store'

// do not render the app until we know if there is a logged in user or not
store.dispatch(getMe()).then(renderApp)

function renderApp () {
  ReactDOM.render(<App />, document.getElementById('root'))
}

export function getMe (data) {
  return async dispatch => {
    try {
      const user = await userApi.getMe(data)
      dispatch({ type: LOGIN, user })
    } catch (err) {
      userApi.logout()
    }
  }
}