No need to observe the token again

Author: smashwilson

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

@@ -2,18 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {QueryRenderer, graphql} from 'react-relay';
 
-import {EndpointPropType} from '../prop-types';
+import {EndpointPropType, TokenPropType} from '../prop-types';
 import RelayNetworkLayerManager from '../relay-network-layer-manager';
 import {UNAUTHENTICATED, INSUFFICIENT} from '../shared/keytar-strategy';
-import ObserveModel from '../views/observe-model';
 import Author, {nullAuthor} from '../models/author';
 import GithubTabHeaderController from '../controllers/github-tab-header-controller';
 
 export default class GithubTabHeaderContainer extends React.Component {
   static propTypes = {
     // Connection
-    loginModel: PropTypes.object.isRequired,
     endpoint: EndpointPropType.isRequired,
+    token: TokenPropType,
 
     // Workspace
     currentWorkDir: PropTypes.string,
@@ -27,24 +26,16 @@ export default class GithubTabHeaderContainer extends React.Component {
   }
 
   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
+      this.props.token == null
+      || this.props.token instanceof Error
+      || this.props.token === UNAUTHENTICATED
+      || this.props.token === INSUFFICIENT
     ) {
       return this.renderNoResult();
     }
 
-    const environment = RelayNetworkLayerManager.getEnvironmentForHost(this.props.endpoint, token);
+    const environment = RelayNetworkLayerManager.getEnvironmentForHost(this.props.endpoint, this.props.token);
     const query = graphql`
       query githubTabHeaderContainerQuery {
         viewer {
@@ -61,12 +52,12 @@ export default class GithubTabHeaderContainer extends React.Component {
         environment={environment}
         variables={{}}
         query={query}
-        render={result => this.renderWithResult(result)}
+        render={this.renderWithResult}
       />
     );
   }
 
-  renderWithResult({error, props}) {
+  renderWithResult = ({error, props}) => {
     if (error || props === null) {
       return this.renderNoResult();
     }
@@ -108,8 +99,4 @@ export default class GithubTabHeaderContainer extends React.Component {
       />
     );
   }
-
-  fetchToken = loginModel => {
-    return loginModel.getToken(this.props.endpoint.getLoginAccount());
-  }
 }

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

@@ -4,18 +4,16 @@ import {QueryRenderer} from 'react-relay';
 
 import GithubTabHeaderContainer from '../../lib/containers/github-tab-header-container';
 import {queryBuilder} from '../builder/graphql/query';
-import GithubLoginModel from '../../lib/models/github-login-model';
-import {getEndpoint} from '../../lib/models/endpoint';
-import {InMemoryStrategy, INSUFFICIENT, UNAUTHENTICATED} from '../../lib/shared/keytar-strategy';
+import {DOTCOM} from '../../lib/models/endpoint';
+import {UNAUTHENTICATED, INSUFFICIENT} from '../../lib/shared/keytar-strategy';
 
 import tabHeaderQuery from '../../lib/containers/__generated__/githubTabHeaderContainerQuery.graphql';
 
 describe('GithubTabHeaderContainer', function() {
-  let atomEnv, model;
+  let atomEnv;
 
   beforeEach(function() {
     atomEnv = global.buildAtomEnvironment();
-    model = new GithubLoginModel(InMemoryStrategy);
   });
 
   afterEach(function() {
@@ -25,65 +23,56 @@ describe('GithubTabHeaderContainer', function() {
   function buildApp(overrideProps = {}) {
     return (
       <GithubTabHeaderContainer
-        loginModel={model}
-        endpoint={getEndpoint('github.com')}
+        endpoint={DOTCOM}
+        token="1234"
+
         currentWorkDir={null}
         contextLocked={false}
         changeWorkingDirectory={() => {}}
         setContextLock={() => {}}
         getCurrentWorkDirs={() => new Set()}
+
         onDidChangeWorkDirs={() => {}}
         {...overrideProps}
       />
     );
   }
 
-  it('renders a null user while the GraphQL query is being performed', async function() {
-    model.setToken('https://api.github.com', '1234');
-
-    sinon.spy(model, 'getToken');
-    sinon.stub(model, 'getScopes').resolves(GithubLoginModel.REQUIRED_SCOPES);
-
-    const wrapper = shallow(buildApp());
-
-    assert.strictEqual(await wrapper.find('ObserveModel').prop('fetchData')(model), '1234');
-    const tokenWrapper = wrapper.find('ObserveModel').renderProp('children')('1234');
-
-    const resultWrapper = tokenWrapper.find(QueryRenderer).renderProp('render')({
-      error: null,
-      props: null,
-      retry: () => {},
-    });
-
-    assert.isFalse(resultWrapper.find('GithubTabHeaderController').prop('user').isPresent());
+  it('renders a null user if the token is still loading', function() {
+    const wrapper = shallow(buildApp({token: null}));
+    assert.isFalse(wrapper.find('GithubTabHeaderController').prop('user').isPresent());
   });
 
   it('renders a null user if no token is found', function() {
-    const wrapper = shallow(buildApp());
-    const tokenWrapper = wrapper.find('ObserveModel').renderProp('children')(UNAUTHENTICATED);
-    assert.isFalse(tokenWrapper.find('GithubTabHeaderController').prop('user').isPresent());
+    const wrapper = shallow(buildApp({token: UNAUTHENTICATED}));
+    assert.isFalse(wrapper.find('GithubTabHeaderController').prop('user').isPresent());
   });
 
   it('renders a null user if the token has insufficient OAuth scopes', function() {
-    const wrapper = shallow(buildApp());
-    const tokenWrapper = wrapper.find('ObserveModel').renderProp('children')(INSUFFICIENT);
-
-    assert.isFalse(tokenWrapper.find('GithubTabHeaderController').prop('user').isPresent());
+    const wrapper = shallow(buildApp({token: INSUFFICIENT}));
+    assert.isFalse(wrapper.find('GithubTabHeaderController').prop('user').isPresent());
   });
 
-  it('renders a null user if the user is offline', function() {
-    sinon.spy(model, 'didUpdate');
+  it('renders a null user if there was an error acquiring the token', function() {
+    const e = new Error('oops');
+    e.rawStack = e.stack;
+    const wrapper = shallow(buildApp({token: e}));
+    assert.isFalse(wrapper.find('GithubTabHeaderController').prop('user').isPresent());
+  });
 
+  it('renders a null user while the GraphQL query is being performed', function() {
     const wrapper = shallow(buildApp());
-    const e = new Error('oh no');
-    const tokenWrapper = wrapper.find('ObserveModel').renderProp('children')(e);
-    assert.isFalse(tokenWrapper.find('GithubTabHeaderController').prop('user').isPresent());
+    const resultWrapper = wrapper.find(QueryRenderer).renderProp('render')({
+      error: null,
+      props: null,
+      retry: () => {},
+    });
+
+    assert.isFalse(resultWrapper.find('GithubTabHeaderController').prop('user').isPresent());
   });
 
   it('renders the controller once results have arrived', function() {
     const wrapper = shallow(buildApp());
-    const tokenWrapper = wrapper.find('ObserveModel').renderProp('children')('1234');
-
     const props = queryBuilder(tabHeaderQuery)
       .viewer(v => {
         v.name('user');
@@ -92,7 +81,7 @@ describe('GithubTabHeaderContainer', function() {
         v.login('us3rh4nd13');
       })
       .build();
-    const resultWrapper = tokenWrapper.find(QueryRenderer).renderProp('render')({error: null, props, retry: () => {}});
+    const resultWrapper = wrapper.find(QueryRenderer).renderProp('render')({error: null, props, retry: () => {}});
 
     const controller = resultWrapper.find('GithubTabHeaderController');
     assert.isTrue(controller.prop('user').isPresent());