_ = require 'underscore-plus' GithubUserStore = require "./github-user-store" {React} = require 'nylas-exports' # Small React component that renders a single Github repository class GithubRepo extends React.Component @displayName: '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 render: =>
{@props.repo.stargazers_count}
{@props.repo.full_name}
# Small React component that renders the user's Github profile. class GithubProfile extends React.Component @displayName: '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 render: => # Transform the profile's array of repos into an array of React elements repoElements = _.map @props.profile.repos, (repo) -> # 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.
{@props.profile.login}
{repoElements}
module.exports = class GithubContactCardSection extends React.Component @displayName: 'GithubContactCardSection' constructor: (@props) -> @state = @_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. @unsubscribe = GithubUserStore.listen @_onChange componentWillUnmount: => @unsubscribe() render: =>

Github

{@_renderInner()}
_renderInner: => # Handle various loading states by returning early return
Loading...
if @state.loading return
No Matching Profile
if not @state.profile # The data vended by the GithubUserStore has changed. Calling `setState:` # will cause React to re-render our view to reflect the new values. _onChange: => @setState(@_getStateFromStores()) _getStateFromStores: => profile: GithubUserStore.profileForFocusedContact() loading: GithubUserStore.loading()