inital set up for voting mechanism

Author: Allicolyer

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

@@ -3,7 +3,9 @@ import { ButtonProps } from './shared/base.d';
 import { Flex, Image, Button } from './shared/base';
 
 export const CustomButton: React.FunctionComponent<
-  ButtonProps & { type?: 'github' | 'tutorial' | 'spectrum' | 'default' }
+  ButtonProps & {
+    type?: 'github' | 'tutorial' | 'spectrum' | 'vote' | 'default';
+  }
 > = ({ type = 'default', children, ...buttonProps }) => {
   const { icon, bg } = customButtonTypes[type];
 
@@ -30,6 +32,7 @@ interface CustomButtonType {
   tutorial: ButtonType;
   github: ButtonType;
   spectrum: ButtonType;
+  vote: ButtonType;
   default: ButtonType;
 }
 
@@ -46,6 +49,10 @@ const customButtonTypes: CustomButtonType = {
     icon: 'https://i.ibb.co/gmtgnsP/Spectrum.png',
     bg: 'grey',
   },
+  vote: {
+    icon: 'https://i.ibb.co/b3FGXbD/Vote.png',
+    bg: 'white',
+  },
   default: {
     icon: '',
     bg: 'primary',

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Heading, Text, Card } from './shared/base';
+import { Heading, Text, Card, Flex, Box } from './shared/base';
 import { getTutorialOverviewSlug } from '../utils/getTutorialSlug';
+import Upvote from './Upvote';
 import { Link } from 'gatsby';
 
 type TutorialListingProps = {
@@ -23,10 +24,17 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
 }) => {
   return (
     <Card width={[1]} p={4} my={4} borderRadius={8} boxShadow="small">
-      <Link to={getTutorialOverviewSlug(tutorial.fileAbsolutePath)}>
-        <Heading>{tutorial.frontmatter.tutorialTitle}</Heading>
-      </Link>
-      <Text>{tutorial.frontmatter.description}</Text>
+      <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>
   );
 };

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Query } from 'react-apollo';
+import { CurrentUserQuery } from '../graphqlTypes';
+import { Image, 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';
+
+const Upvote = () => {
+  return (
+    <Query<CurrentUserQuery> query={CURRENT_USER}>
+      {({ data, error, loading }) => {
+        if (error || loading) {
+          return null;
+        }
+        if (optionalChaining(() => data.viewer.user)) {
+          return <UpvoteData event={() => console.log('upvoted!')} />;
+        }
+        return <UpvoteData event={() => loginUser()} />;
+      }}
+    </Query>
+  );
+};
+
+const UpvoteData = props => {
+  return (
+    <Flex flexDirection="column" alignItems="center" justifyContent="center">
+      <CustomButton type="vote" onClick={props.event} />
+      <Heading>{Math.floor(Math.random() * 100)}</Heading>
+    </Flex>
+  );
+};
+export default Upvote;