Add GetStarted comp and user info query

cosmos.proxies.js

@@ -0,0 +1,4 @@
+import createBackgroundProxy from 'react-cosmos-background-proxy';
+import createRouterProxy from 'react-cosmos-router-proxy';
+
+export default [createBackgroundProxy(), createRouterProxy()];

src/components/GetStarted/index.fixture.js

@@ -1,26 +1,44 @@
 import { GetStarted } from '.';
 
 const baseProps = {
-  saveGithubToken: () => {},
-  setLoadingToken: () => {},
-  loadingToken: false,
+  data: {
+    viewer: {
+      login: 'rkclark',
+      avatarUrl: 'https://avatars2.githubusercontent.com/u/15447744?v=4',
+    },
+  },
+  loading: false,
+  error: null,
+  refetch: () => {},
+  networkStatus: 1,
 };
 
 export default [
   {
     component: GetStarted,
-    name: 'Not loading the token',
+    name: 'With data',
+    props: {
+      ...baseProps,
+    },
+    url: '/',
+  },
+  {
+    component: GetStarted,
+    name: 'Loading',
     props: {
       ...baseProps,
+      loading: true,
     },
+    url: '/',
   },
   {
     component: GetStarted,
-    name: 'Loading the token',
+    name: 'Refetching',
     props: {
       ...baseProps,
-      loadingToken: true,
+      networkStatus: 4,
     },
+    url: '/',
   },
   {
     component: GetStarted,
@@ -29,5 +47,6 @@ export default [
       ...baseProps,
       error: 'Borked',
     },
+    url: '/',
   },
 ];

src/components/GetStarted/index.js

@@ -1,39 +1,85 @@
 /* eslint-disable no-return-assign */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import gql from 'graphql-tag';
 import { Query } from 'react-apollo';
+import { Link } from 'react-router-dom';
 
+import LoadingMessage from '../LoadingMessage';
+import Error from '../Error';
+import Button from '../Button';
 import style from './style.css';
 
-export function GetStarted({ data }) {
-  console.log(data);
-  return <div className={style.container} />;
+export function GetStarted({ data, loading, error, refetch, networkStatus }) {
+  const renderContent = () => {
+    if (loading || networkStatus === 4) {
+      return <LoadingMessage message="Loading your Github profile..." />;
+    }
+
+    if (error) {
+      return (
+        <div>
+          <Error
+            message={
+              'Failed to load your Github profile from the Github API. Please try again later.'
+            }
+          />
+          <Button onClick={refetch}>Retry</Button>
+        </div>
+      );
+    }
+    return (
+      <Fragment>
+        <p className={style.success}>
+          Successfully signed in as <strong>{data.viewer.login}</strong>!
+        </p>
+        <p className={style.continue}>
+          Now its time to select the Github repos that you would like to monitor
+          with Pullp.
+        </p>
+        <Link to="/app/selectRepos">
+          <Button className={style.button}>Let&#39;s get started</Button>
+        </Link>
+      </Fragment>
+    );
+  };
+
+  return <div className={style.container}>{renderContent()}</div>;
 }
 
 GetStarted.propTypes = {
   data: PropTypes.shape({}).isRequired,
+  loading: PropTypes.bool.isRequired,
+  error: PropTypes.shape({}),
+  refetch: PropTypes.func.isRequired,
+  networkStatus: PropTypes.number.isRequired,
 };
 
-// GetStarted.defaultProps = {
-
-// };
+GetStarted.defaultProps = {
+  error: null,
+};
 
 const GET_CURRENT_USER = gql(`
 query {
 	viewer {
     login
     avatarUrl
-    url
   }
 }
 `);
 
 export default function GetStartedContainer() {
   return (
-    <Query query={GET_CURRENT_USER}>
-      {({ data, client }) => <GetStarted data={data} client={client} />}
+    <Query
+      query={GET_CURRENT_USER}
+      notifyOnNetworkStatusChange
+      fetchPolicy="network-only"
+    >
+      {props => {
+        console.log('props are', props);
+        return <GetStarted {...props} />;
+      }}
     </Query>
   );
 }

src/components/GetStarted/style.css

@@ -1,21 +1,19 @@
 @import "../../css/colors.css";
-@import "../../css/units.css";
 
-.signInContainer {
-  text-align: center;
+.container {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  text-align: center;
 }
 
-.welcome {
+.success {
   font-weight: bold;
   color: var(--primary-medium);
   font-size: 1.8rem;
-  margin-top: 0;
 }
 
-.begin {
+.continue {
   margin: 3rem auto;
 }

src/components/GetStarted/test.js

@@ -1,10 +1,107 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { Link } from 'react-router-dom';
 import { GetStarted } from '.';
+import LoadingMessage from '../LoadingMessage';
+import Error from '../Error';
+import Button from '../Button';
 
 describe('<GetStarted/>', () => {
+  const defaultProps = {
+    data: {
+      viewer: {
+        login: 'test',
+        avatarUrl: '/avatar/url',
+      },
+    },
+    loading: false,
+    error: null,
+    refetch: () => {},
+    networkStatus: 1,
+  };
+
   it('renders successfully', () => {
-    const component = shallow(<GetStarted />);
+    const component = shallow(<GetStarted {...defaultProps} />);
     expect(component.length).toBe(1);
   });
+
+  describe('when loading is true', () => {
+    it('renders a <LoadingMessage/> with correct message', () => {
+      const component = shallow(<GetStarted {...defaultProps} loading />);
+      const loadingMessage = component.find(LoadingMessage);
+      expect(loadingMessage.length).toBe(1);
+      expect(loadingMessage.props().message).toBe(
+        'Loading your Github profile...',
+      );
+    });
+  });
+
+  describe('when network status === 4 (refetching)', () => {
+    it('renders a <LoadingMessage/> with correct message', () => {
+      const component = shallow(
+        <GetStarted {...defaultProps} networkStatus={4} />,
+      );
+      const loadingMessage = component.find(LoadingMessage);
+      expect(loadingMessage.length).toBe(1);
+      expect(loadingMessage.props().message).toBe(
+        'Loading your Github profile...',
+      );
+    });
+  });
+
+  describe('when error is truthy', () => {
+    let component;
+    const refetchMock = jest.fn();
+
+    beforeAll(() => {
+      component = shallow(
+        <GetStarted
+          {...defaultProps}
+          error={{ borked: true }}
+          refetch={refetchMock}
+        />,
+      );
+    });
+
+    afterEach(() => {
+      refetchMock.mockClear();
+    });
+
+    it('renders an <Error /> with the correct message', () => {
+      const error = component.find(Error);
+      expect(error.length).toBe(1);
+      expect(error.props().message).toBe(
+        'Failed to load your Github profile from the Github API. Please try again later.',
+      );
+    });
+
+    it('renders a retry button', () => {
+      const button = component.find(Button);
+      expect(button.length).toBe(1);
+      expect(button.props().children).toBe('Retry');
+    });
+
+    describe('retry button onClick', () => {
+      it('calls the refetch function', () => {
+        expect(refetchMock).not.toHaveBeenCalled();
+        const button = component.find(Button);
+        button.props().onClick();
+        expect(refetchMock).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('when data is received', () => {
+    let component;
+
+    beforeAll(() => {
+      component = shallow(<GetStarted {...defaultProps} />);
+    });
+
+    it('renders an <Link /> to /app/selectRepos', () => {
+      const link = component.find(Link);
+      expect(link.length).toBe(1);
+      expect(link.props().to).toBe('/app/selectRepos');
+    });
+  });
 });

src/routes/SetupNew/index.js

@@ -4,7 +4,7 @@ import { get } from 'lodash';
 import gql from 'graphql-tag';
 import { Query } from 'react-apollo';
 import SignInForm from '../../components/SignInForm';
-import { GetStarted } from '../../components/GetStarted';
+import GetStartedContainer from '../../components/GetStarted';
 
 export const GET_GITHUB_TOKEN_FROM_CACHE = gql`
   {
@@ -61,7 +61,7 @@ export function SetupNew({ data, client }) {
           error={get(data, 'githubAuth.error')}
         />
       )}
-      {authToken && <GetStarted />}
+      {authToken && <GetStartedContainer />}
     </Fragment>
   );
 }

src/routes/SetupNew/test.js

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { SetupNew } from './';
 
 import SignInForm from '../../components/SignInForm';
-import { GetStarted } from '../../components/GetStarted';
+import GetStartedContainer from '../../components/GetStarted';
 
 describe('Setup', () => {
   const defaultProps = {
@@ -45,8 +45,8 @@ describe('Setup', () => {
       expect(props.error).toBe(data.githubAuth.error);
     });
 
-    it('does not render a <GetStarted/> component', () => {
-      expect(component.find(GetStarted).length).toBe(0);
+    it('does not render a <GetStartedContainer/> component', () => {
+      expect(component.find(GetStartedContainer).length).toBe(0);
     });
 
     describe('saveGithubToken fn passed to <SignInForm/> as a prop', () => {
@@ -119,8 +119,8 @@ describe('Setup', () => {
     };
     const component = shallow(<SetupNew {...defaultProps} data={data} />);
 
-    it('renders a <GetStarted/> component', () => {
-      expect(component.find(GetStarted).length).toBe(1);
+    it('renders a <GetStartedContainer/> component', () => {
+      expect(component.find(GetStartedContainer).length).toBe(1);
     });
 
     it('does not render a <SignInForm/> component', () => {