mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
272 lines
11 KiB
HTML
272 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html>
|
||
<head>
|
||
<title>github-user-store.coffee</title>
|
||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||
<link rel="stylesheet" media="all" href="docco.css" />
|
||
</head>
|
||
<body>
|
||
<div id="container">
|
||
<div id="background"></div>
|
||
|
||
<ul class="sections">
|
||
|
||
<li id="title">
|
||
<div class="annotation">
|
||
<h1>github-user-store.coffee</h1>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li id="section-1">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-1">¶</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre>_ = <span class="hljs-built_in">require</span> <span class="hljs-string">'underscore-plus'</span>
|
||
Reflux = <span class="hljs-built_in">require</span> <span class="hljs-string">'reflux'</span>
|
||
request = <span class="hljs-built_in">require</span> <span class="hljs-string">'request'</span>
|
||
{FocusedContactsStore} = <span class="hljs-built_in">require</span> <span class="hljs-string">'nylas-exports'</span>
|
||
|
||
<span class="hljs-built_in">module</span>.exports =</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-2">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-2">¶</a>
|
||
</div>
|
||
<p>This package uses the Flux pattern - our Store is a small singleton that
|
||
observes other parts of the application and vends data to our React
|
||
component. If the user could interact with the GithubSidebar, this store
|
||
would also listen for <code>Actions</code> emitted by our React components.</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre>GithubUserStore = Reflux.createStore
|
||
|
||
<span class="hljs-attribute">init</span>: <span class="hljs-function">-></span>
|
||
<span class="hljs-property">@_profile</span> = <span class="hljs-literal">null</span>
|
||
<span class="hljs-property">@_cache</span> = {}
|
||
<span class="hljs-property">@_loading</span> = <span class="hljs-literal">false</span>
|
||
<span class="hljs-property">@_error</span> = <span class="hljs-literal">null</span></pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-3">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-3">¶</a>
|
||
</div>
|
||
<p>Register a callback with the FocusedContactsStore. This will tell us
|
||
whenever the selected person has changed so we can refresh our data.</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre> <span class="hljs-property">@listenTo</span> FocusedContactsStore, <span class="hljs-property">@_onFocusedContactChanged</span></pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-4">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-4">¶</a>
|
||
</div>
|
||
<p>Getter Methods</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre>
|
||
<span class="hljs-attribute">profileForFocusedContact</span>: <span class="hljs-function">-></span>
|
||
<span class="hljs-property">@_profile</span>
|
||
|
||
<span class="hljs-attribute">loading</span>: <span class="hljs-function">-></span>
|
||
<span class="hljs-property">@_loading</span>
|
||
|
||
<span class="hljs-attribute">error</span>: <span class="hljs-function">-></span>
|
||
<span class="hljs-property">@_error</span></pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-5">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-5">¶</a>
|
||
</div>
|
||
<p>Called when the FocusedContactStore <code>triggers</code>, notifying us that the data
|
||
it vends has changed.</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">_onFocusedContactChanged</span>: <span class="hljs-function">-></span></pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-6">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-6">¶</a>
|
||
</div>
|
||
<p>Grab the new focused contact</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre> contact = FocusedContactsStore.focusedContact()</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-7">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-7">¶</a>
|
||
</div>
|
||
<p>First, clear the contact that we’re currently showing and <code>trigger</code>. Since
|
||
our React component observes our store, <code>trigger</code> causes our React component
|
||
to re-render.</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre> <span class="hljs-property">@_error</span> = <span class="hljs-literal">null</span>
|
||
<span class="hljs-property">@_profile</span> = <span class="hljs-literal">null</span>
|
||
|
||
<span class="hljs-keyword">if</span> contact
|
||
<span class="hljs-property">@_profile</span> = <span class="hljs-property">@_cache</span>[contact.email]</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-8">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-8">¶</a>
|
||
</div>
|
||
<p>Make a Github search request to find the matching user profile</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre> <span class="hljs-property">@_githubFetchProfile</span>(contact.email) <span class="hljs-keyword">unless</span> <span class="hljs-property">@_profile</span>?
|
||
|
||
<span class="hljs-property">@trigger</span>(@)
|
||
|
||
<span class="hljs-attribute">_githubFetchProfile</span>: <span class="hljs-function"><span class="hljs-params">(email)</span> -></span>
|
||
<span class="hljs-property">@_loading</span> = <span class="hljs-literal">true</span>
|
||
<span class="hljs-property">@_githubRequest</span> <span class="hljs-string">"https://api.github.com/search/users?q=<span class="hljs-subst">#{email}</span>"</span>, <span class="hljs-function"><span class="hljs-params">(err, resp, data)</span> =></span>
|
||
<span class="hljs-keyword">return</span> <span class="hljs-keyword">if</span> err <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> data
|
||
|
||
<span class="hljs-built_in">console</span>.warn(data.message) <span class="hljs-keyword">if</span> data.message?</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-9">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-9">¶</a>
|
||
</div>
|
||
<p>Sometimes we get rate limit errors, etc., so we need to check and make
|
||
sure we’ve gotten items before pulling the first one.</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre> profile = data?.items?[<span class="hljs-number">0</span>] ? <span class="hljs-literal">false</span></pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-10">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-10">¶</a>
|
||
</div>
|
||
<p>If a profile was found, make a second request for the user’s public
|
||
repositories.</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> profile
|
||
profile.repos = []
|
||
<span class="hljs-property">@_githubRequest</span> profile.repos_url, <span class="hljs-function"><span class="hljs-params">(err, resp, repos)</span> =></span></pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-11">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-11">¶</a>
|
||
</div>
|
||
<p>Sort the repositories by their stars (<code>-</code> for descending order)</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre> profile.repos = _.sortBy repos, <span class="hljs-function"><span class="hljs-params">(repo)</span> -></span> -repo.stargazers_count</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-12">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-12">¶</a>
|
||
</div>
|
||
<p>Trigger so that our React components refresh their state and display
|
||
the updated data.</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre> <span class="hljs-property">@trigger</span>(@)
|
||
|
||
<span class="hljs-property">@_loading</span> = <span class="hljs-literal">false</span>
|
||
<span class="hljs-property">@_profile</span> = <span class="hljs-property">@_cache</span>[email] = profile
|
||
<span class="hljs-property">@trigger</span>(@)</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-13">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-13">¶</a>
|
||
</div>
|
||
<p>Wrap the Node <code>request</code> library and pass the User-Agent header, which is required
|
||
by Github’s API. Also pass <code>json:true</code>, which causes responses to be automatically
|
||
parsed.</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">_githubRequest</span>: <span class="hljs-function"><span class="hljs-params">(url, callback)</span> -></span>
|
||
request({<span class="hljs-attribute">url</span>: url, <span class="hljs-attribute">headers</span>: {<span class="hljs-string">'User-Agent'</span>: <span class="hljs-string">'request'</span>}, <span class="hljs-attribute">json</span>: <span class="hljs-literal">true</span>}, callback)</pre></div></div>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
</html>
|