revisions to pull request

Author: Allicolyer

packages/gatsby-theme/src/Apollo.ts

@@ -4,21 +4,21 @@ import { HttpLink } from 'apollo-link-http';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 import fetch from 'isomorphic-fetch';
 import config from '../config';
-import { getAuthToken } from './utils/auth/auth';
+import { getAuthToken } from './utils/auth';
 
 const authLink = setContext((_, { headers }) => {
-    // get the authentication token from local storage if it exists
-    const token = getAuthToken();
-    // return the headers to the context so httpLink can read them
-    return {
-        headers: {
-            ...headers,
-            authorization: token ? `Bearer ${token}` : "",
-        }
-    }
+  // get the authentication token from local storage if it exists
+  const token = getAuthToken();
+  // return the headers to the context so httpLink can read them
+  return {
+    headers: {
+      ...headers,
+      authorization: token ? `Bearer ${token}` : '',
+    },
+  };
 });
 const httpLink = new HttpLink({ uri: config.apiUrl, fetch });
 export const client = new ApolloClient({
-    link: authLink.concat(httpLink),
-    cache: new InMemoryCache(),
+  link: authLink.concat(httpLink),
+  cache: new InMemoryCache(),
 });

packages/gatsby-theme/src/components/Account.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Text, Image, Flex } from './shared/base';
 import { Link } from 'gatsby';
-import CustomButton from './CustomButton';
-import { loginUser } from '../utils/auth/auth';
+import { GithubButton } from './buttons';
+import { loginUser } from '../utils/auth';
 import WithCurrentUser from '../utils/auth/WithCurrentUser';
 import { CenteredLoader } from '../components/Loader';
 
@@ -17,9 +17,7 @@ const Account = () => {
           return <Profile user={user} />;
         } else {
           return (
-            <CustomButton onClick={() => loginUser()} type="github">
-              Sign up
-            </CustomButton>
+            <GithubButton onClick={() => loginUser()}>Sign up</GithubButton>
           );
         }
       }}

packages/gatsby-theme/src/components/TutorialSidebar.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Card, Image, Heading, Flex } from './shared/base';
 import { authors } from '../utils/sampleData';
 import AuthorList from './AuthorList';
-import CustomButton from './CustomButton';
+import { SpectrumButton } from './buttons';
 
 type SidebarProps = {
   tutorialTitle: string;
@@ -26,7 +26,7 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({
         ))}
       </ul>
       <AuthorList authors={authors} />
-      <CustomButton type="spectrum"> Get help on Spectrum </CustomButton>
+      <SpectrumButton> Get help on Spectrum </SpectrumButton>
     </div>
   );
 };

packages/gatsby-theme/src/components/Upvote.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Heading, Flex } from './shared/base';
-import CustomButton from './CustomButton';
-import { loginUser } from '../utils/auth/auth';
+import { VoteButton } from './buttons';
+import { loginUser } from '../utils/auth/';
 import WithCurrentUser from '../utils/auth/WithCurrentUser';
 
 // Still to-do:
@@ -30,7 +30,7 @@ type UpvoteDataProps = {
 const UpvoteData: React.FunctionComponent<UpvoteDataProps> = ({ event }) => {
   return (
     <Flex flexDirection="column" alignItems="center" justifyContent="center">
-      <CustomButton type="vote" onClick={event} />
+      <VoteButton onClick={event} />
       <Heading>{Math.floor(Math.random() * 100)}</Heading>
     </Flex>
   );

packages/gatsby-theme/src/components/CustomButton.tsx renamed to packages/gatsby-theme/src/components/buttons.tsx

@@ -1,7 +1,23 @@
 import React from 'react';
-import { ButtonProps } from './shared/base.d';
+import { ButtonProps } from './shared/base';
 import { Flex, Image, Button } from './shared/base';
 
+export const VoteButton: React.FunctionComponent<ButtonProps> = props => (
+  <CustomButton {...props} type="vote" />
+);
+
+export const GithubButton: React.FunctionComponent<ButtonProps> = props => (
+  <CustomButton {...props} type="github" />
+);
+
+export const TutorialButton: React.FunctionComponent<ButtonProps> = props => (
+  <CustomButton {...props} type="tutorial" />
+);
+
+export const SpectrumButton: React.FunctionComponent<ButtonProps> = props => (
+  <CustomButton {...props} type="tutorial" />
+);
+
 export const CustomButton: React.FunctionComponent<
   ButtonProps & {
     type?: 'github' | 'tutorial' | 'spectrum' | 'vote' | 'default';
@@ -58,5 +74,3 @@ const customButtonTypes: CustomButtonType = {
     bg: 'primary',
   },
 };
-
-export default CustomButton;

packages/gatsby-theme/src/components/templates/TutorialOverview.tsx

@@ -6,7 +6,7 @@ import AuthorList from '../AuthorList';
 import TutorialHeader from '../overview/TutorialHeader';
 import { Heading, Flex, Box } from '../shared/base';
 import ProgressBar from '../overview/ProgressBar';
-import CustomButton from '../CustomButton';
+import { GithubButton, SpectrumButton, TutorialButton } from '../buttons';
 import { Content } from '../shared/styledHelpers';
 import { authors } from '../../utils/sampleData';
 import { graphql } from 'gatsby';
@@ -29,13 +29,13 @@ const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
             />
           </Box>
           <Box width={1 / 4} m={3}>
-            <CustomButton type="tutorial">Continue Tutorial</CustomButton>
+            <TutorialButton>Continue Tutorial</TutorialButton>
             <Box m={3}>
               <ProgressBar percentage={33} width={100} />
             </Box>
             <Flex>
-              <CustomButton type="github">Github</CustomButton>
-              <CustomButton type="spectrum">Spectrum</CustomButton>
+              <GithubButton>Github</GithubButton>
+              <SpectrumButton>Spectrum</SpectrumButton>
             </Flex>
             <AuthorList authors={authors} />
           </Box>
@@ -46,10 +46,7 @@ const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
             let num = index + 1;
             return (
               <div>
-                <Chapter
-                  num={num < 10 ? `0${num}` : num}
-                  tutorial = {mdx.node}
-                />
+                <Chapter num={num < 10 ? `0${num}` : num} tutorial={mdx.node} />
               </div>
             );
           })}

packages/gatsby-theme/src/pages/profile.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Layout from '../components/layout';
 import { Text, Image, Flex } from '../components/shared/base';
-import { logoutUser } from '../utils/auth/auth';
+import { logoutUser } from '../utils/auth';
 import { navigate } from 'gatsby';
 import WithCurrentUser from '../utils/auth/WithCurrentUser';
 import { CenteredLoader } from '../components/Loader';

packages/gatsby-theme/src/pages/signup.tsx

@@ -3,9 +3,9 @@ import Layout from '../components/layout';
 import { navigate } from 'gatsby';
 import { CenteredLoader } from '../components/Loader';
 import { Flex, Text, Box } from '../components/shared/base';
-import CustomButton from '../components/CustomButton';
+import { GithubButton } from '../components/buttons';
 import WithCurrentUser from '../utils/auth/WithCurrentUser';
-import { loginUser } from '../utils/auth/auth';
+import { loginUser } from '../utils/auth/';
 
 const Signup = () => {
   return (
@@ -35,9 +35,9 @@ const SignupPage = () => {
           Lorem ipsum dolor sit amet.
         </Text>
         <Box m={4}>
-          <CustomButton onClick={() => loginUser()} type="github">
+          <GithubButton onClick={() => loginUser()}>
             Sign in with Github
-          </CustomButton>
+          </GithubButton>
         </Box>
       </Flex>
     </Layout>

packages/gatsby-theme/src/utils/auth/WithCurrentUser.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Query } from 'react-apollo';
+import { optionalChaining } from '../helpers';
+import gql from 'graphql-tag';
+import { User } from 'src/graphqlTypes';
+
+type ChildrenRenderProps = {
+  user?: User | boolean;
+  loading?: boolean;
+};
+type WithCurrentUserProps = {
+  children: (renderProps: ChildrenRenderProps) => any;
+};
+
+const WithCurrentUser: React.FunctionComponent<WithCurrentUserProps> = ({
+  children,
+}) => (
+  <Query query={CURRENT_USER}>
+    {({ data, error, loading }) => {
+      if (loading) {
+        return children({ loading });
+      }
+      if (optionalChaining(() => data.viewer.user)) {
+        return children({ user: data.viewer.user });
+      } else {
+        return children({ user: false });
+      }
+    }}
+  </Query>
+);
+
+export const CURRENT_USER = gql`
+  query currentUser {
+    viewer {
+      id
+      user {
+        id
+        name
+        avatarUrl
+        githubHandle
+      }
+    }
+  }
+`;
+
+export default WithCurrentUser;