102 lines
2.7 KiB
JavaScript
102 lines
2.7 KiB
JavaScript
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)
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.fetchAPI()
|
|
}
|
|
|
|
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 />
|
|
}
|
|
}
|
|
|
|
export default App
|