import React from 'react'
import { connect } from 'react-redux'
import { initLoading, stopLoading } from '@/state/actions/loadingActions.js'
import { cacheData } from '@/state/actions/dataActions.js'

export default connect((state, props) => {
  return {
    data: state.data[props.cache]
  }
})(
  class DataLoader extends React.Component {
    constructor (props) {
      super(props)

      this.state = {
        loading: true
      }
    }

    async componentDidMount () {
      const { cache, load, dispatch } = this.props

      this.setState({ loading: true })

      dispatch(initLoading())

      const data = await load()

      dispatch(cacheData({
        [cache]: data
      }))

      this.setState({ loading: false })

      dispatch(stopLoading())
    }

    render () {
      const { loading } = this.state
      const {
        children,
        cache,
        render,
        fallback = () => null,
        data
      } = this.props

      const component = typeof children === 'function' ? children : render

      return loading ? fallback() : component({ data })
    }
  }
)