Created
October 10, 2017 16:42
-
-
Save guangLess/b5d0a5bbad613dec07f9e79c921f2c39 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import Footer from './Footer.js'; | |
| import Sidebar from './Sidebar.js'; | |
| import AllAlbums from './AllAlbums.js'; | |
| import SingleAlbum from './SingleAlbum.js' | |
| import axios from 'axios'; | |
| export default class Main extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| //greeting: ':D' // Tom's law here dataType | |
| albums: [], | |
| selectedAlbum: {}, | |
| }; | |
| this.selectAlbum = this.selectAlbum.bind(this) | |
| this.deselectAlbum = this.deselectAlbum.bind(this) | |
| } | |
| componentDidMount(){ | |
| axios.get('api/albums') | |
| .then(response => { | |
| return response.data; | |
| }) | |
| .then(albums => { | |
| console.log('success'); | |
| this.setState({albums: albums}); //why can you not do this.setState.alubm = albums | |
| //console.log(this.setState.albums); | |
| //console.log(this.setState.albums[0].name); | |
| }) | |
| .catch(err => { | |
| console.error('error'); | |
| console.error(err); | |
| }); | |
| } | |
| selectAlbum(albumId) { | |
| console.log('I am clicked') | |
| axios.get(`/api/albums/${albumId}`) | |
| .then(res => res.data) | |
| .then(album => // Using arrow functions is important here! Otherwise, our this context would be undefined! | |
| this.setState({ selectedAlbum: album }) | |
| ); | |
| } | |
| deselectAlbum(){ | |
| this.setState({selectedAlbum: {}}) | |
| } | |
| render() { | |
| return ( | |
| <div id="main" className="container-fluid"> | |
| <Sidebar deselectAlbum={this.deselectAlbum}/> | |
| <div className="col-xs-10"> | |
| {this.state.selectedAlbum.id | |
| ? <SingleAlbum album={this.state.selectedAlbum}/> | |
| : <AllAlbums selectAlbum={this.selectAlbum} {...this.state} /> | |
| } | |
| </div> | |
| <Footer /> | |
| </div> | |
| ) | |
| } | |
| } | |
| //line 45 if I put if I call selectAlbum to x and then inside of AllAlnum ? confused // should it be this.selectAlbum = selectAlbum? | |
| // assign key of props as selectAlbum . | |
| /* | |
| Summery question lihe 55: | |
| ->it is saying selectAlum is passed in as a function through props, then ? I do not understand this => {...this.state}. | |
| ->I do understand you can write albums = {this.state.albums} but without the assignment it is ok as well? | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment