AppContext.js

import React from 'react'
import styled from 'styled-components'
import { version } from '../../../../package.json'
import { FlexContainerPositionable } from '../../../components/common/Layout'
import { SmallLightBoldText } from '../../../components/common/Text'
import * as Mixins from '../../../styles/Mixins'

const VersionContainer = styled(FlexContainerPositionable)`
  ${Mixins.Shadow}
  ${Mixins.BackgroundColor}
  ${Mixins.Margin}
  ${Mixins.Height}
`

export const AppContext = React.createContext({
  isError: false,
  error: { code: '', message: '', source: '' },
  setError: () => {}
})

const initialError = []

const reducer = (state, action) => {
  const newState = state.slice()
  newState.push(action)
  return newState
}

export const AppProvider = props => {
  const [errorState, dispatchError] = React.useReducer(reducer, initialError)
  const [isError, setIsError] = React.useState(false)

  const createErrorState = (error = { code: 'unknown', message: 'unknown', source: 'unknown' }) => {
    dispatchError(error)
    if (!isError) setIsError(true)
  }

  return (
    <AppContext.Provider value={{ isError, error: errorState, createErrorState }}>
      {props.children}
      <VersionContainer
        shadow={'0 0 8px -2px var(--col-shadow)'}
        height={'20px'}
        backgroundColor={'darker'}
        pos={'fixed'}
        bottom={'0'}
        left={'0'}
        right={'0'}
        align={'center'}
        justify={'center'}
      >
        <SmallLightBoldText>v{version}</SmallLightBoldText>
      </VersionContainer>
    </AppContext.Provider>
  )
}

export const AppConsumer = AppContext.Consumer