i This is a combination of 2 commits.

put saved and upvoted tutorials on profile page

Author: Allicolyer

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Heading, Text, Card, Flex, Box } from './shared/base';
+import { Heading, Text, Card, Flex, Box, Button } from './shared/base';
 import { getTutorialOverviewSlug } from '../utils/getTutorialSlug';
 import Upvote from './Upvote';
 import { Link } from 'gatsby';
@@ -114,7 +114,7 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
                 >
                   {save => {
                     return (
-                      <button
+                      <Button
                         onClick={async () => {
                           const mutationRes = await handleMutationResponse(
                             save(),
@@ -129,7 +129,7 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
                         }}
                       >
                         Save
-                      </button>
+                      </Button>
                     );
                   }}
                 </Mutation>

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

@@ -1,26 +1,6 @@
 import * as React from 'react';
 import { Heading, Flex } from './shared/base';
 import { VoteButton } from './buttons';
-import { loginUser } from '../utils/auth/';
-import WithCurrentUser from '../utils/auth/WithCurrentUser';
-
-// Still to-do:
-// Query the backend with the ID of the tutorial to see whcih tutorial was upvoted
-// Create a way to store which user has upvoted the tutorial so that they can only
-// upvote it once
-
-// const Upvote = ({active}) => {
-//   return (
-//     <WithCurrentUser>
-//       {({ user }) => {
-//         if (user) {
-//           return <UpvoteData active={active} event={() => console.log('upvoted!')} />;
-//         }
-//         return <UpvoteData active={active} event={() => loginUser()} />;
-//       }}
-//     </WithCurrentUser>
-//   );
-// };
 
 type UpvoteDataProps = {
   onClick: () => any;
@@ -30,7 +10,11 @@ type UpvoteDataProps = {
 
 // place holder until we have a backend that stores the number of upvotes
 // and can keep track of which tutorials a user upvotes
-const Upvote: React.FunctionComponent<UpvoteDataProps> = ({ onClick: event, active, count = "..." }) => {
+const Upvote: React.FunctionComponent<UpvoteDataProps> = ({
+  onClick: event,
+  active,
+  count = '...',
+}) => {
   return (
     <Flex flexDirection="column" alignItems="center" justifyContent="center">
       <VoteButton active={active} onClick={event} />

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

@@ -1,25 +1,27 @@
 import * as React from 'react';
 import Layout from '../components/layout';
-import { Text, Image, Flex } from '../components/shared/base';
+import { Heading, Text, Image, Flex } from '../components/shared/base';
 import { logoutUser } from '../utils/auth';
 import { navigate } from 'gatsby';
-import WithCurrentUser from '../utils/auth/WithCurrentUser';
+import { Query } from 'react-apollo';
+import gql from 'graphql-tag';
+import { optionalChaining } from '../utils/helpers';
 import { CenteredLoader } from '../components/Loader';
 
 const Profile = () => {
   return (
-    <WithCurrentUser>
-      {({ user, loading }) => {
+    <Query query={PROFILE_QUERY}>
+      {({ data, loading }) => {
         if (loading) {
           return <CenteredLoader />;
         }
-        if (user) {
-          return <ProfilePage user={user} />;
+        if (optionalChaining(() => data!.viewer!.user)) {
+          return <ProfilePage user={data.viewer.user} />;
         }
         navigate('/signup/');
         return null;
       }}
-    </WithCurrentUser>
+    </Query>
   );
 };
 
@@ -32,9 +34,22 @@ type User = {
   avatarUrl: string;
   name: string;
   githubHandle: string;
+  bio: string;
+  upvoted: [Tutorials];
+  saved: [Tutorials];
+};
+
+type Tutorials = {
+  tutorial: Tutorial;
+};
+
+type Tutorial = {
+  id: 'string';
+  name: 'string';
 };
 
 const ProfilePage: React.FunctionComponent<ProfileProps> = ({ user }) => {
+  console.log(user);
   return (
     <Layout>
       <Flex flexDirection="column">
@@ -52,7 +67,49 @@ const ProfilePage: React.FunctionComponent<ProfileProps> = ({ user }) => {
         viverra nibh nec, ultrices risus. */
       </Text>
       <button onClick={() => logoutUser()}> Log out </button>
+      <Heading> Upvoted Tutorials </Heading>
+      <ul>
+        {user.upvoted.map(a => (
+          <li key={a.tutorial.id}>
+            <span>{a.tutorial.name}</span>
+          </li>
+        ))}
+      </ul>
+      <Heading> Saved Tutorials </Heading>
+      <ul>
+        {user.saved.map(a => (
+          <li key={a.tutorial.id}>
+            <span>{a.tutorial.name}</span>
+          </li>
+        ))}
+      </ul>
     </Layout>
   );
 };
 export default Profile;
+
+const PROFILE_QUERY = gql`
+  query profileQuery {
+    viewer {
+      user {
+        id
+        name
+        githubHandle
+        avatarUrl
+        bio
+        upvoted: userTutorials(where: { upvoted: true }) {
+          tutorial {
+            id
+            name
+          }
+        }
+        saved: userTutorials(where: { saved: true }) {
+          tutorial {
+            id
+            name
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -16,7 +16,7 @@ const WithCurrentUser: React.FunctionComponent<WithCurrentUserProps> = ({
   children,
 }) => {
   return (
-    <Query<CurrentUserQuery> query={CURRENT_USER} >
+    <Query<CurrentUserQuery> query={CURRENT_USER}>
       {({ data, loading }) => {
         if (loading) {
           return children({ loading });
@@ -27,7 +27,7 @@ const WithCurrentUser: React.FunctionComponent<WithCurrentUserProps> = ({
         return children({ user: false });
       }}
     </Query>
-  )
+  );
 };
 
 export const CURRENT_USER = gql`
@@ -37,11 +37,11 @@ export const CURRENT_USER = gql`
       user {
         id
         name
-      avatarUrl
-      githubHandle
+        avatarUrl
+        githubHandle
+      }
     }
   }
-}
 `;
 
 export default WithCurrentUser;

packages/server/src/graphql/Viewer.ts

@@ -1,30 +1,33 @@
-import { queryField, objectType } from "yoga";
+import { queryField, objectType } from 'yoga'
 
 export const Viewer = objectType({
-    name: "Viewer",
-    definition: (t) => {
-        t.id("id");
-        t.field("user", {
-            type: "User",
-            resolve: async (parent, _, ctx) => {
-                const { id } = parent;
-                return await ctx.prisma.user({ id })
-            }
-        })
-    }
-});
+  name: 'Viewer',
+  definition: t => {
+    t.id('id')
+    t.field('user', {
+      type: 'User',
+      resolve: async (parent, _, ctx) => {
+        const { id } = parent
+        return await ctx.prisma.user({ id })
+      },
+    })
+  },
+})
 
-export const viewer = queryField("viewer", {
-    type: Viewer,
-    nullable: true,
-    resolve: (_, args, ctx) => {
-        try {
-            const id = ctx.currentUserId
-            return {
-                id
-            }
-        } catch (e) {
-            return null;
-        }
+export const viewer = queryField('viewer', {
+  type: Viewer,
+  nullable: true,
+  resolve: (_, args, ctx) => {
+    try {
+      const id = ctx.currentUserId
+      if (!id) {
+        return null
+      }
+      return {
+        id,
+      }
+    } catch (e) {
+      return null
     }
-})
+  },
+})