mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-25 01:36:06 +08:00
d5f4aa4ac0
- The FocusedContactStore was triggering too often, and leaving it up to the FullcontactStore to fetch the full Contact model for the focused contact (pulled from thread.) The FocusedContactStore triggers more responsibly, and registering for the role "MessageListSidebar:ContactCard" now gives you the focused contact as a full database model. The whole ContactCard region also fades in and out.
77 lines
2.8 KiB
CoffeeScript
77 lines
2.8 KiB
CoffeeScript
_ = 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: =>
|
|
<div className="repo">
|
|
<div className="stars">{@props.repo.stargazers_count}</div>
|
|
<a href={@props.repo.html_url}>{@props.repo.full_name}</a>
|
|
</div>
|
|
|
|
# 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 <GithubRepo> elements
|
|
repoElements = _.map @props.profile.repos, (repo) ->
|
|
<GithubRepo key={repo.id} repo={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.
|
|
<div className="profile">
|
|
<img className="logo" src="nylas://sidebar-github-profile/assets/github.png"/>
|
|
<a href={@props.profile.html_url}>{@props.profile.login}</a>
|
|
<div>{repoElements}</div>
|
|
</div>
|
|
|
|
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: =>
|
|
<div className="sidebar-github-profile">
|
|
<h2>Github</h2>
|
|
{@_renderInner()}
|
|
</div>
|
|
|
|
_renderInner: =>
|
|
# Handle various loading states by returning early
|
|
return <div>Loading...</div> if @state.loading
|
|
return <div>No Matching Profile</div> if not @state.profile
|
|
<GithubProfile profile={@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()
|