render a github avatar

Author: wadethestealth

lib/containers/__generated__/githubTabHeaderContainerQuery.graphql.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {QueryRenderer, graphql} from 'react-relay';
+
+import {incrementCounter} from '../reporter-proxy';
+import {
+  RemotePropType, RemoteSetPropType, BranchSetPropType, OperationStateObserverPropType, EndpointPropType,
+} from '../prop-types';
+import RelayNetworkLayerManager from '../relay-network-layer-manager';
+import {UNAUTHENTICATED, INSUFFICIENT} from '../shared/keytar-strategy';
+import RemoteController from '../controllers/remote-controller';
+import ObserveModel from '../views/observe-model';
+import LoadingView from '../views/loading-view';
+import QueryErrorView from '../views/query-error-view';
+import GithubLoginView from '../views/github-login-view';
+import Author, {nullAuthor} from '../models/author';
+import GithubTabHeaderView from '../views/github-tab-header-view';
+
+export default class GithubTabHeaderContainer extends React.Component {
+  static propTypes = {
+    // Connection
+    loginModel: PropTypes.object.isRequired,
+    endpoint: EndpointPropType.isRequired,
+
+    currentWorkDir: PropTypes.string,
+
+    handleWorkDirSelect: PropTypes.func,
+    onDidChangeWorkDirs: PropTypes.func,
+    onDidUpdateRepo: PropTypes.func,
+  }
+
+  render() {
+    return (
+      <ObserveModel model={this.props.loginModel} fetchData={this.fetchToken}>
+        {this.renderWithToken}
+      </ObserveModel>
+    );
+  }
+
+  renderWithToken = token => {
+    if (
+      token == null
+      || token instanceof Error
+      || token === UNAUTHENTICATED
+      || token === INSUFFICIENT
+    ) {
+      return this.renderNoResult();
+    }
+
+    const environment = RelayNetworkLayerManager.getEnvironmentForHost(this.props.endpoint, token);
+    const query = graphql`
+      query githubTabHeaderContainerQuery {
+        viewer {
+          name,
+          email,
+          avatarUrl,
+          login
+        }
+      }
+    `;
+
+    return (
+      <QueryRenderer
+        environment={environment}
+        variables={{}}
+        query={query}
+        render={result => this.renderWithResult(result, token)}
+      />
+    );
+  }
+
+  renderWithResult({error, props, retry}, token) {
+    if (error || props === null) {
+      return this.renderNoResult();
+    }
+
+    const {email, name, avatarUrl, login} = props.viewer;
+
+    return (
+      <GithubTabHeaderView
+        currentWorkDir={this.props.workingDirectory}
+        committer={new Author(email, name, login, false, avatarUrl)}
+        handleWorkDirSelect={this.props.handleWorkDirSelect}
+        getCurrentWorkDirs={this.props.getCurrentWorkDirs}
+        onDidChangeWorkDirs={this.props.onDidChangeWorkDirs}
+      />
+    );
+  }
+
+  renderNoResult() {
+    return (
+      <GithubTabHeaderView
+        currentWorkDir={this.props.workingDirectory}
+        committer={nullAuthor}
+        handleWorkDirSelect={this.props.handleWorkDirSelect}
+        getCurrentWorkDirs={this.props.getCurrentWorkDirs}
+        onDidChangeWorkDirs={this.props.onDidChangeWorkDirs}
+      />
+    );
+  }
+
+  fetchToken = loginModel => {
+    return loginModel.getToken(this.props.endpoint.getLoginAccount());
+  }
+}

lib/containers/github-tab-header-container.js

@@ -42,9 +42,11 @@ export default class GitHubTabController extends React.Component {
 
     return (
       <GitHubTabView
+        // Connection
+        loginModel={this.props.loginModel}
+
         workspace={this.props.workspace}
         remoteOperationObserver={this.props.remoteOperationObserver}
-        loginModel={this.props.loginModel}
         rootHolder={this.props.rootHolder}
 
         workingDirectory={this.props.workingDirectory || this.props.currentWorkDir}

lib/controllers/github-tab-controller.js

@@ -3,14 +3,15 @@ const NEW = Symbol('new');
 export const NO_REPLY_GITHUB_EMAIL = '[email protected]';
 
 export default class Author {
-  constructor(email, fullName, login = null, isNew = null) {
-    const match = email.match(/^(\d+)\+[^@]+@users.noreply.github.com$/);
-
-    let avatarUrl;
-    if (match) {
-      avatarUrl = 'https://avatars.githubusercontent.com/u/' + match[1] + '?s=32';
-    } else {
-      avatarUrl = 'https://avatars.githubusercontent.com/u/e?email=' + encodeURIComponent(email) + '&s=32';
+  constructor(email, fullName, login = null, isNew = null, avatarUrl = null) {
+    if (avatarUrl == null) {
+      const match = email.match(/^(\d+)\+[^@]+@users.noreply.github.com$/);
+
+      if (match) {
+        avatarUrl = 'https://avatars.githubusercontent.com/u/' + match[1] + '?s=32';
+      } else {
+        avatarUrl = 'https://avatars.githubusercontent.com/u/e?email=' + encodeURIComponent(email) + '&s=32';
+      }
     }
 
     this.email = email;

lib/models/author.js

@@ -2,24 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import path from 'path';
 import {CompositeDisposable} from 'atom';
-import {nullAuthor} from '../models/author';
+import {AuthorPropType} from '../prop-types';
 
 export default class GithubTabHeaderView extends React.Component {
   static propTypes = {
     currentWorkDir: PropTypes.string,
+    committer: AuthorPropType.isRequired,
 
     handleWorkDirSelect: PropTypes.func,
     onDidChangeWorkDirs: PropTypes.func,
-    onDidUpdateRepo: PropTypes.func,
-    isRepoDestroyed: PropTypes.func.isRequired,
     getCurrentWorkDirs: PropTypes.func.isRequired,
-    getCommitter: PropTypes.func.isRequired,
   }
 
   constructor(props) {
     super(props);
     this._isMounted = false;
-    this.state = {currentWorkDirs: [], committer: nullAuthor};
+    this.state = {currentWorkDirs: []};
     this.disposable = new CompositeDisposable();
   }
 
@@ -35,28 +33,17 @@ export default class GithubTabHeaderView extends React.Component {
     if (this.props.onDidChangeWorkDirs) {
       this.disposable.add(this.props.onDidChangeWorkDirs(this.updateWorkDirs));
     }
-    if (this.props.onDidUpdateRepo) {
-      this.disposable.add(this.props.onDidUpdateRepo(this.updateCommitter));
-    }
-    this.updateCommitter();
   }
 
   componentDidUpdate(prevProps) {
     if (
       prevProps.onDidChangeWorkDirs !== this.props.onDidChangeWorkDirs
-      || prevProps.onDidUpdateRepo !== this.props.onDidUpdateRepo
     ) {
       this.disposable.dispose();
       this.disposable = new CompositeDisposable();
       if (this.props.onDidChangeWorkDirs) {
         this.disposable.add(this.props.onDidChangeWorkDirs(this.updateWorkDirs));
       }
-      if (this.props.onDidUpdateRepo && !this.props.isRepoDestroyed()) {
-        this.disposable.add(this.props.onDidUpdateRepo(this.updateCommitter));
-      }
-    }
-    if (prevProps.getCommitter !== this.props.getCommitter) {
-      this.updateCommitter();
     }
   }
 
@@ -88,26 +75,18 @@ export default class GithubTabHeaderView extends React.Component {
   }
 
   renderCommitter() {
-    const email = this.state.committer.getEmail();
-    const avatarUrl = this.state.committer.getAvatarUrl();
-    const name = this.state.committer.getFullName();
+    const login = this.props.committer.getLogin();
+    const avatarUrl = this.props.committer.getAvatarUrl();
 
     return (
       <img className="github-Project-avatar"
         src={avatarUrl ? avatarUrl : 'atom://github/img/avatar.svg'}
-        title={`${name} ${email}`}
-        alt={`${name}'s avatar`}
+        title={`@${login}`}
+        alt={`@${login}'s avatar`}
       />
     );
   }
 
-  updateCommitter = async () => {
-    const committer = await this.props.getCommitter() || nullAuthor;
-    if (this._isMounted) {
-      this.setState({committer});
-    }
-  }
-
   componentWillUnmount() {
     this._isMounted = false;
     if (this.disposable && this.disposable.dispose) {