Added React Routing

src/app.js

@@ -0,0 +1,63 @@
+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)

src/components/index.js

@@ -1,101 +1,23 @@
-import React, { Component } from 'react'
-import axios from 'axios'
-import { Episodes } from './episodes'
-import { Captions } from './captions'
-import fetchEpisodes from './fetchEpisodes'
-import { Form, Button } from 'react-bootstrap'
-class App extends Component {
-  constructor() {
-    super()
-    this.state = { savedComments: [], loading: true }
-    this.fetchEpisodeComments = this.fetchEpisodeComments.bind(this)
-    this.handleClick = this.handleClick.bind(this)
-    this.handleSubmit = this.handleSubmit.bind(this)
-  }
+import React  from 'react'
+import {connect} from 'react-redux'
+import {Container, Row, Col, Image} from 'react-bootstrap'
 
-  componentDidMount() {
-    this.fetchAPI()
-  }
+const Main = () => {
+  return (
+    <Container>
+      <Row>
+        <Col className="text-center mt-5">
+          <Image src="img/anarchybang.jpg" fluid /></Col>
+      </Row>
+    </Container>
+  )
+}
 
-  async fetchAPI() {
-    try {
-      const { data } = await axios.get('/api')
-      const { ascii } = await data
-      await console.log(ascii)
-      const episodes = await fetchEpisodes()
-      await this.setState({ loading: false, episodes, ascii })
-    } catch (e) {
-      console.log(e)
-    }
-  }
-
-  async fetchEpisodeComments(slug) {
-    try {
-      const { data } = await axios.get(`/api/v2/episodes/${slug}`)
-      console.log(`FETCH COMMENTS FOR EPISODE ${data.slug}`, data.captions)
-      const captions = data.captions
-      this.setState({ loading: false, captions })
-    } catch (e) {
-      console.log(e)
-    }
-  }
-  handleClick(msg) {
-    const comments = this.state.savedComments.concat([msg])
-    this.setState({ savedComments: comments })
-    console.log(this.state.savedComments)
-  }
-
-  handleSubmit(e) {
-    e.preventDefault()
-    console.log(this.state.savedComments)
-  }
-
-  renderEpisodes() {
-    return (
-      <div className="mt-5">
-        <Episodes fetchEpisodeComments={this.fetchEpisodeComments} episodes={this.state.episodes} />
-      </div>
-    )
-  }
-
-  renderCaptions() {
-    return (
-      <div className="mt-5">
-        <div>
-          <Button
-            onClick={() => {
-              this.setState({ captions: null })
-            }}
-          >
-            Show Episodes
-          </Button>
-        </div>
-        <Form onSubmit={this.handleSubmit}>
-          <Form.Group controlId="formSavedComments">
-            <Form.Label>Saved Comments</Form.Label>
-            <Form.Control type="savedComments" placeholder="Saved Comments" />
-            <Form.Text className="text-muted">
-              {this.state.savedComments.map(comment => `${comment.text}\n`)}
-            </Form.Text>
-          </Form.Group>
-
-          <Captions handleClick={this.handleClick} captions={this.state.captions} />
-        </Form>
-      </div>
-    )
-  }
-  renderError() {
-    return <div>{this.state.error} </div>
-  }
-
-  render() {
-    console.log(this.state)
-    if (this.state.loading) return <div />
-    if (this.state.captions) return this.renderCaptions()
-    if (this.state.episodes) return this.renderEpisodes()
-    // if (this.state.error) return this.renderError()
-    else return <div />
+const mapState = state => {
+  return {
+    episodes: state.episodes
   }
 }
 
-export default App
+
+export default connect(mapState)(Main)

src/history.js

@@ -0,0 +1,7 @@
+const createHistory = require('history').createBrowserHistory
+const createMemoryHistory = require('history').createMemoryHistory
+
+const history =
+  process.env.NODE_ENV === 'test' ? createMemoryHistory() : createHistory()
+
+export default history

src/index.js

@@ -1,16 +1,19 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import Main from './components'
-import Navbar from './components/navbar'
-import Footer from './components/footer'
+import {Provider} from 'react-redux'
+import {Router} from 'react-router-dom'
+import history from './history'
+import store from './store'
+import App from './app'
+
 
 ReactDOM.render(
-  <div>
-    <Navbar />
-    <Main />
-    <Footer />
-  </div>,
+  <Provider store={store}>
+    <Router history={history}>
+      <App />
+    </Router>
+  </Provider>,
   document.getElementById('app')
 )
 
-module.hot.accept()
+//module.hot.accept()

src/routes.js

@@ -0,0 +1,28 @@
+import React, {Component} from 'react'
+import {withRouter, Route} from 'react-router-dom'
+import {connect} from 'react-redux'
+import {Episodes} from './components/episodes'
+import {Captions} from './components/captions'
+import Main from './components'
+class Routes extends Component {
+  componentDidMount() {
+  }
+  render() {
+    return (
+      <div>
+        <Route exact path="/" component = {Main} />
+        <Route path="/episodes" component={Episodes} />
+        <Route path="/captions/:slug" component={Captions} />
+      </div>
+    )
+  }
+}
+
+const mapState = state => {
+  return {
+    episodes: state.episodes,
+    captions: state.captions
+  }
+}
+
+export default connect(mapState)(withRouter(Routes))