mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-25 01:36:06 +08:00
a25ec2551f
Summary: Package names must match directory names Not going to use new Swithc component, but might as well be part of component kit Move APMWrapper into core so it can be used from anywhere Move manual package install coe to package-manager Gray out window titles when in the background Do not allow multiple onboarding windows at the same time Finalize styling f initial-prefs and initial-packages, make it work (only github package atm) Other nits Change the welcome copy: - Call it easy to extend vs easy to use - Remove the subtitle from the first screen which doesn't really fit - Make the second page emphasize that its created /for/ developers and easy to extend with Javascript. - Explain what the sync engine is rather than saying it's "faster and more extensible" (??) Test Plan: Run tests Reviewers: evan, dillon Reviewed By: evan Maniphest Tasks: T3346 Differential Revision: https://phab.nylas.com/D2079
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://N1-Github-Contact-Card-Section/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()
|