implemented frontend of upvote

Author: rohit-ravikoti

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

@@ -3,6 +3,9 @@ import { Heading, Text, Card, Flex, Box } from './shared/base';
 import { getTutorialOverviewSlug } from '../utils/getTutorialSlug';
 import Upvote from './Upvote';
 import { Link } from 'gatsby';
+import { Query, Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import { optionalChaining } from '../utils/helpers';
 
 type TutorialListingProps = {
   tutorial: Tutorial;
@@ -22,20 +25,73 @@ type FrontMatter = {
 const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
   tutorial,
 }) => {
+  const tutorialId = "cjwb6f2hy7e4f0b14bxh1mar2";
   return (
-    <Card width={[1]} p={4} my={4} borderRadius={8} boxShadow="small">
-      <Flex alignItems="center" justifyContent="center">
-        <Box width={1 / 12}>
-          <Upvote />
-        </Box>
-        <Box width={11 / 12}>
-          <Link to={getTutorialOverviewSlug(tutorial.fileAbsolutePath)}>
-            <Heading>{tutorial.frontmatter.tutorialTitle}</Heading>
-          </Link>
-          <Text>{tutorial.frontmatter.description}</Text>
-        </Box>
-      </Flex>
-    </Card>
+    <Query
+      query={gql`
+        query TutorialListing($id: ID!) {
+          tutorial(id: $id) {
+            id
+            upvotes
+            numberOfStudents
+            viewerUserTutorial {
+              id
+              upvoted
+              saved
+            }
+          }
+        }
+      `}
+      variables={{ id: tutorialId }}
+    >
+      {({ data }) => {
+        return (
+          <Card width={[1]} p={4} my={4} borderRadius={8} boxShadow="small">
+            <Flex alignItems="center" justifyContent="center">
+              <Box width={1 / 12}>
+                <Mutation
+                  mutation={gql`
+                    mutation UpvoteTutorial($id: ID!) {
+                      upvoteTutorial(tutorialId: $id) {
+                        code
+                        success
+                        userTutorial {
+                          id
+                          upvoted
+                          tutorial {
+                            id
+                            upvotes
+                          }
+                        }
+                      }
+                    }
+                  `}
+                  variables={{
+                    id: tutorialId
+                  }}
+                >
+                  {(upvote) => {
+                    return (
+                      <Upvote
+                        onClick={() => upvote()}
+                        active={optionalChaining(() => data.tutorial.viewerUserTutorial.upvoted)}
+                        count={optionalChaining(() => data.tutorial.upvotes)}
+                      />
+                    )
+                  }}
+                </Mutation>
+              </Box>
+              <Box width={11 / 12}>
+                <Link to={getTutorialOverviewSlug(tutorial.fileAbsolutePath)}>
+                  <Heading>{tutorial.frontmatter.tutorialTitle}</Heading>
+                </Link>
+                <Text>{tutorial.frontmatter.description}</Text>
+              </Box>
+            </Flex>
+          </Card>
+        )
+      }}
+    </Query>
   );
 };
 

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

@@ -9,30 +9,32 @@ import WithCurrentUser from '../utils/auth/WithCurrentUser';
 // Create a way to store which user has upvoted the tutorial so that they can only
 // upvote it once
 
-const Upvote = () => {
-  return (
-    <WithCurrentUser>
-      {({ user }) => {
-        if (user) {
-          return <UpvoteData event={() => console.log('upvoted!')} />;
-        }
-        return <UpvoteData event={() => loginUser()} />;
-      }}
-    </WithCurrentUser>
-  );
-};
+// 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 = {
-  event: string;
+  onClick: () => any;
+  count: number;
+  active: boolean;
 };
 
 // place holder until we have a backend that stores the number of upvotes
 // and can keep track of which tutorials a user upvotes
-const UpvoteData: React.FunctionComponent<UpvoteDataProps> = ({ event }) => {
+const Upvote: React.FunctionComponent<UpvoteDataProps> = ({ onClick: event, active, count = "..." }) => {
   return (
     <Flex flexDirection="column" alignItems="center" justifyContent="center">
-      <VoteButton onClick={event} />
-      <Heading>{Math.floor(Math.random() * 100)}</Heading>
+      <VoteButton active={active} onClick={event} />
+      <Heading>{count}</Heading>
     </Flex>
   );
 };