import _ from 'underscore'; import GithubUserStore from "./github-user-store"; import {React} from 'nylas-exports'; // Small React component that renders a single Github repository const GithubRepo = function GithubRepo(props) { const {repo} = props; return (
{repo.stargazers_count}
{repo.full_name}
); } GithubRepo.propTypes = { // This component takes a `repo` object as a prop. Listing props is optional // but enables nice React warnings when our expectations aren't met repo: React.PropTypes.object.isRequired, }; // Small React component that renders the user's Github profile. const GithubProfile = function GithubProfile(props) { const {profile} = props; // Transform the profile's array of repos into an array of React elements const repoElements = _.map(profile.repos, (repo) => { return }); // Remember - this looks like HTML, but it's actually CJSX, which is converted into // Coffeescript at transpile-time. We're actually creating a nested tree of Javascript // objects here that *represent* the DOM we want. return (
github logo {profile.login}
{repoElements}
); } GithubProfile.propTypes = { // This component takes a `profile` object as a prop. Listing props is optional // but enables nice React warnings when our expectations aren't met. profile: React.PropTypes.object.isRequired, } export default class GithubContactCardSection extends React.Component { static displayName = 'GithubContactCardSection'; static containerStyles = { order: 10, } constructor(props) { super(props); this.state = this._getStateFromStores(); } componentDidMount() { // When our component mounts, start listening to the GithubUserStore. // When the store `triggers`, our `_onChange` method will fire and allow // us to replace our state. this._unsubscribe = GithubUserStore.listen(this._onChange); } componentWillUnmount() { this._unsubscribe(); } _getStateFromStores = () => { return { profile: GithubUserStore.profileForFocusedContact(), loading: GithubUserStore.loading(), }; } // The data vended by the GithubUserStore has changed. Calling `setState:` // will cause React to re-render our view to reflect the new values. _onChange = () => { this.setState(this._getStateFromStores()) } _renderInner() { // Handle various loading states by returning early if (this.state.loading) { return (
Loading...
); } if (!this.state.profile) { return (
No Matching Profile
); } return ( ); } render() { return (

Github

{this._renderInner()}
); } }