reload-component.hoc.js

import { curry } from 'ramda'
import React from 'react'
import { withStateHandlers } from 'recompose'
import styled, { css } from 'styled-components'

const initialState = { retryCount: 1 }
const stateHandlers = {
    reload: ({ retryCount }) => _ => ({ retryCount: retryCount + 1 })
}

const hideComponent = Cmp => styled(Cmp)`
    ${css`
        ${props => (props.hide ? 'transition: opacity 0.75s; opacity: 0;' : 'opacity: 1;')};
    `};
`
export default curry((errorCondition, RawCmp, RawError) => {
    const Error = hideComponent(RawError)
    const Cmp = hideComponent(RawCmp)

    return withStateHandlers(initialState, stateHandlers)(({ retryCount, reload, ...rest }) => (
        <>
            <Error hide={!errorCondition(rest)} key={-retryCount} action={reload} />
            <Cmp hide={errorCondition(rest)} key={retryCount} />
        </>
    ))
})