waveform/src/app.js

import React, {Component} from 'react'
import Main from './components'
import Navbar from './components/navbar'
import Footer from './components/footer'
import Routes from './routes'

import {connect} from 'react-redux'
import {fetchAllEpisodes, fetchAllCaptions} from './store'

class App extends Component {

  constructor() {
    super()
    this.state = { loading: true }
  }

  componentDidMount() {
    console.log('App Loaded. Now Fetching Data...')
    this.fetchData()
  }

  async fetchData() {
    await this.props.loadEpisodes()
    await this.props.loadCaptions()
    await this.setState({loading: false})
  }

  renderError() {
    return <div>{this.state.error} </div>
  }

  renderApp() {
    return (
      <div>
        <Navbar />
        <Routes />  
        <Footer />
      </div>
    )
  }

  render()  {
    if (this.state.loading) return <div />
    return this.renderApp()
  }
}

const mapState = state => {
  return {
    episodes: state.episodes
  }
}

const mapDispatch = dispatch => {
  return {
    loadEpisodes: () => dispatch(fetchAllEpisodes()),
    loadCaptions: () => dispatch(fetchAllCaptions())
  }
}



export default connect(mapState, mapDispatch)(App)