create WithCurrentUser component

Author: Allicolyer

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

@@ -1,31 +1,29 @@
 import React from 'react';
-import { Query } from 'react-apollo';
-import { CurrentUserQuery } from '../graphqlTypes';
 import { Text, Image, Flex } from './shared/base';
 import { Link } from 'gatsby';
-import { CenteredLoader } from './Loader';
 import CustomButton from './CustomButton';
-import { optionalChaining } from '../utils/helpers';
 import { loginUser } from '../utils/auth';
-import { CURRENT_USER } from './queries/userQueries';
+import WithCurrentUser from '../utils/WithCurrentUser';
+import { CenteredLoader } from '../components/Loader';
 
 const Account = () => {
   return (
-    <Query<CurrentUserQuery> query={CURRENT_USER}>
-      {({ data, error, loading }) => {
-        if (error || loading) {
+    <WithCurrentUser>
+      {({ user, loading }) => {
+        if (loading) {
           return <CenteredLoader />;
         }
-        if (optionalChaining(() => data.viewer.user)) {
-          return <Profile user={data.viewer.user} />;
+        if (user) {
+          return <Profile user={user} />;
+        } else {
+          return (
+            <CustomButton onClick={() => loginUser()} type="github">
+              Sign up
+            </CustomButton>
+          );
         }
-        return (
-          <CustomButton onClick={() => loginUser()} type="github">
-            Sign up
-          </CustomButton>
-        );
       }}
-    </Query>
+    </WithCurrentUser>
   );
 };
 

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

@@ -1,32 +1,31 @@
 import * as React from 'react';
-import { Query } from 'react-apollo';
-import { CurrentUserQuery } from '../graphqlTypes';
-import { Image, Heading, Flex } from './shared/base';
+import { Heading, Flex } from './shared/base';
 import CustomButton from './CustomButton';
-import { optionalChaining } from '../utils/helpers';
 import { loginUser } from '../utils/auth';
-import { CURRENT_USER } from './queries/userQueries';
+import WithCurrentUser from '../utils/WithCurrentUser';
 
 const Upvote = () => {
   return (
-    <Query<CurrentUserQuery> query={CURRENT_USER}>
-      {({ data, error, loading }) => {
-        if (error || loading) {
-          return null;
-        }
-        if (optionalChaining(() => data.viewer.user)) {
+    <WithCurrentUser>
+      {({ user }) => {
+        if (user) {
           return <UpvoteData event={() => console.log('upvoted!')} />;
+        } else {
+          return <UpvoteData event={() => loginUser()} />;
         }
-        return <UpvoteData event={() => loginUser()} />;
       }}
-    </Query>
+    </WithCurrentUser>
   );
 };
 
-const UpvoteData = props => {
+type UpvoteDataProps = {
+  event: string;
+};
+
+const UpvoteData: React.FunctionComponent<UpvoteDataProps> = ({ event }) => {
   return (
     <Flex flexDirection="column" alignItems="center" justifyContent="center">
-      <CustomButton type="vote" onClick={props.event} />
+      <CustomButton type="vote" onClick={event} />
       <Heading>{Math.floor(Math.random() * 100)}</Heading>
     </Flex>
   );

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

@@ -1,9 +1,9 @@
-import { RouterProps } from "@reach/router";
-import * as React from "react";
-import Helmet from "react-helmet";
-import { theme, ThemeProvider, styled } from "../styles";
-import { useLayoutQuery } from "../hooks/useLayoutQuery";
-import Header from "./shared/Header";
+import { RouterProps } from '@reach/router';
+import * as React from 'react';
+import Helmet from 'react-helmet';
+import { theme, ThemeProvider, styled } from '../styles';
+import { useLayoutQuery } from '../hooks/useLayoutQuery';
+import Header from './shared/Header';
 
 const MainLayout = styled.main`
   max-width: 90%;
@@ -13,7 +13,7 @@ const MainLayout = styled.main`
 
 type LayoutProps = React.ReactNode & RouterProps;
 
-const Layout: React.FunctionComponent<LayoutProps> = ({ children }) => {
+const Layout = ({ children }) => {
   const { site } = useLayoutQuery();
 
   const { title, description, keywords } = site!.siteMetadata;
@@ -24,8 +24,8 @@ const Layout: React.FunctionComponent<LayoutProps> = ({ children }) => {
         <Helmet
           title={title}
           meta={[
-            { name: "description", content: description },
-            { name: "keywords", content: keywords || undefined }
+            { name: 'description', content: description },
+            { name: 'keywords', content: keywords || undefined },
           ]}
         >
           <html lang="en" />

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

@@ -1,30 +1,28 @@
 import * as React from 'react';
 import Layout from '../components/layout';
-import { Query } from 'react-apollo';
-import gql from 'graphql-tag';
-import { ViewerQuery } from '../graphqlTypes';
 import { Text, Image, Flex } from '../components/shared/base';
 import { logoutUser } from '../utils/auth';
 import { navigate } from 'gatsby';
+import WithCurrentUser from '../utils/WithCurrentUser';
 import { CenteredLoader } from '../components/Loader';
-import { optionalChaining } from '../utils/helpers';
 
-import { CURRENT_USER } from '../components/queries/userQueries';
-
-const Profile = () => (
-  <Query<ViewerQuery> query={CURRENT_USER}>
-    {({ data, error, loading }) => {
-      if (error || loading) {
-        return <CenteredLoader />;
-      }
-      if (optionalChaining(() => data.viewer.user)) {
-        return <ProfilePage user={data.viewer.user} />;
-      }
-      navigate('/signup/');
-      return null;
-    }}
-  </Query>
-);
+const Profile = () => {
+  return (
+    <WithCurrentUser>
+      {({ user, loading }) => {
+        if (loading) {
+          return <CenteredLoader />;
+        }
+        if (user) {
+          return <ProfilePage user={user} />;
+        } else {
+          navigate('/signup/');
+          return null;
+        }
+      }}
+    </WithCurrentUser>
+  );
+};
 
 type ProfileProps = {
   user: User;

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

@@ -1,29 +1,34 @@
 import * as React from 'react';
 import Layout from '../components/layout';
-import { Query } from 'react-apollo';
-import { CurrentUserQuery } from '../graphqlTypes';
 import { navigate } from 'gatsby';
 import { CenteredLoader } from '../components/Loader';
 import { Flex, Text, Box } from '../components/shared/base';
 import CustomButton from '../components/CustomButton';
 import { loginUser } from '../utils/auth';
+<<<<<<< HEAD
 import { CURRENT_USER } from '../components/queries/userQueries';
 import { optionalChaining } from '../utils/helpers';
+=======
+import WithCurrentUser from '../utils/WithCurrentUser';
+>>>>>>> create WithCurrentUser component
 
-const Signup = () => (
-  <Query<CurrentUserQuery> query={CURRENT_USER}>
-    {({ data, error, loading }) => {
-      if (error || loading) {
-        return <CenteredLoader />;
-      }
-      if (optionalChaining(() => data.viewer.user)) {
-        navigate('/profile/');
-        return null;
-      }
-      return <SignupPage />;
-    }}
-  </Query>
-);
+const Signup = () => {
+  return (
+    <WithCurrentUser>
+      {({ user, loading }) => {
+        if (loading) {
+          return <CenteredLoader />;
+        }
+        if (user) {
+          navigate('/profile/');
+          return null;
+        } else {
+          return <SignupPage />;
+        }
+      }}
+    </WithCurrentUser>
+  );
+};
 
 const SignupPage = () => {
   return (

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

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { Query } from 'react-apollo';
+import { CURRENT_USER } from '../components/queries/userQueries';
+import { optionalChaining } from './helpers';
+
+const WithCurrentUser = ({ children }) => {
+  return (
+    <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 default WithCurrentUser;