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
// at app.js -- write a call back to update selectedVideo & provide that as props at VideoList | |
onVideoSelect={selectedVideo => this.setState({selectedVideo})} | |
// at video.list.js -- extract the callback from props and send that to VideoListItem | |
const onVideoSelect = props.onVideoSelect; | |
const videoList = videos.map( v => <VideoListItem onVideoSelect={onVideoSelect} key={v.etag} video={v} />); | |
// at video.list.item.js -- call the call back | |
const VideoListItem = ({video, onVideoSelect}) | |
<li className="list-group-item" onClick={() => onVideoSelect(video)}> |
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
// step one | |
const VideoDetail = ({video}) => { | |
console.log("called here: "+video); | |
if(!video) { | |
return <div>Loading...</div> | |
} | |
const videoId = video.id.videoId; | |
const url = `https://www.youtube.com/embed/${videoId}`; | |
let {title, description} = video.snippet; | |
return ( |
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
// step one | |
const VideoListItem = ({video}) => { | |
console.log(video); | |
return ( | |
<li className="list-group-item"> | |
<div className="video-list media"> | |
<div className="media-left"> | |
<img className="media-object" /> | |
</div> | |
<div className="media-body"> |
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
// step one | |
const VideoList = (props) => { | |
const videos = props.videos; | |
return ( | |
<ul className="col-md-4 list-group"> | |
{videos.length} | |
</ul> | |
); | |
}; |
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
// defining state | |
state = { | |
videos: [], | |
selectedVideo: null | |
}; | |
// fetch video at startup | |
componentDidMount() { | |
this.searchNewVideos('Caspian Report') | |
} |
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
class App extends Component { | |
render() { | |
return ( | |
<div> | |
<SearchBar onSearchTermChange={term => this.onSearchTermChange(term)}/> | |
</div> | |
); | |
} | |
onSearchTermChange(term){ |
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
// constructor | |
constructor() { | |
super(); | |
this.employees = [ | |
{'name': 'Himel'}, | |
{'name': 'Rana'}, | |
{'name': 'Shuvro'}, | |
{'name': 'Proshad'} | |
]; | |
} |
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
renderLogin() { | |
if(this.state.loginVisible){ | |
return ( | |
<Login | |
visible={this.state.loginVisible} | |
titleBarApi={this.setTitleBar.bind(this)} | |
goToMemberList={this.goToMemberList.bind(this)} | |
/> | |
); | |
} |
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
onEmailChange(text) { | |
this.emailAddress = text; | |
} | |
<Input | |
label="Email" | |
placeholder="[email protected]" | |
onChangeText={this.onEmailChange.bind(this)} | |
/> |
NewerOlder