reorganize components into folders, move queries out of componets and into utils

Author: Allicolyer

packages/gatsby-theme/src/components/BookmarkMutation.tsx renamed to packages/gatsby-theme/src/components/community/BookmarkMutation.tsx

@@ -1,24 +1,13 @@
 import * as React from 'react';
-import gql from 'graphql-tag';
 import { Mutation } from 'react-apollo';
 import { loginUser } from '../utils/auth';
 import { BookmarkButton } from './buttons';
+import { BookmarkTutorial } from '../utils/queries/tutorial';
 import { handleMutationResponse, ApiErrors } from '../utils/errorHandling';
 
 const BookmarkMutation = ({ tutorial }) => (
   <Mutation
-    mutation={gql`
-      mutation BookmarkTutorial($id: ID!) {
-        bookmarkTutorial(tutorialId: $id) {
-          code
-          success
-          userTutorial {
-            id
-            bookmarked
-          }
-        }
-      }
-    `}
+    mutation={BookmarkTutorial}
     variables={{
       id: tutorial.id,
     }}

packages/gatsby-theme/src/components/TutorialListing.tsx renamed to packages/gatsby-theme/src/components/community/TutorialListing.tsx

@@ -3,10 +3,10 @@ import { Heading, Text, Card, Flex, Box } from './shared/base';
 import { getTutorialOverviewSlug } from '../utils/getTutorialSlug';
 import { Link } from 'gatsby';
 import { Query } from 'react-apollo';
-import gql from 'graphql-tag';
 import UpvoteMutation from './UpvoteMutation';
 import BookmarkMutation from './BookmarkMutation';
 import Percentage from './Percentage';
+import { getTutorialbyGatsbyID } from '../utils/queries/tutorial';
 
 type TutorialListingProps = {
   tutorial: Tutorial;
@@ -30,26 +30,7 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
   const gatsbyID = tutorial.frontmatter.id;
   let tutorialPath = getTutorialOverviewSlug(tutorial.fileAbsolutePath);
   return (
-    <Query
-      query={gql`
-        query getTutorialbyGatsbyID($gatsbyID: String!) {
-          getTutorialbyGatsbyID(gatsbyID: $gatsbyID) {
-            id
-            name
-            upvotes
-            numberofChapters
-            numberOfStudents
-            viewerUserTutorial {
-              id
-              upvoted
-              bookmarked
-              currentChapter
-            }
-          }
-        }
-      `}
-      variables={{ gatsbyID: gatsbyID }}
-    >
+    <Query query={getTutorialbyGatsbyID} variables={{ gatsbyID: gatsbyID }}>
       {({ data }) => {
         return (
           <Card width={[1]} p={4} my={4} borderRadius={8} boxShadow="small">

packages/gatsby-theme/src/components/UpvoteMutation.tsx renamed to packages/gatsby-theme/src/components/community/UpvoteMutation.tsx

@@ -1,33 +1,13 @@
 import * as React from 'react';
-import gql from 'graphql-tag';
 import { Mutation } from 'react-apollo';
 import { loginUser } from '../utils/auth';
 import { handleMutationResponse, ApiErrors } from '../utils/errorHandling';
 import { VoteButton } from './buttons';
 import { Heading, Flex } from './shared/base';
+import { UpvoteTutorial } from '../utils/queries/tutorial';
 
 const UpvoteMutation = ({ tutorial }) => (
-  <Mutation
-    mutation={gql`
-      mutation UpvoteTutorial($id: ID!) {
-        upvoteTutorial(tutorialId: $id) {
-          code
-          success
-          userTutorial {
-            id
-            upvoted
-            tutorial {
-              id
-              upvotes
-            }
-          }
-        }
-      }
-    `}
-    variables={{
-      id: tutorial.id,
-    }}
-  >
+  <Mutation mutation={UpvoteTutorial} variables={{ id: tutorial.id }}>
     {upvote => {
       let active = tutorial.viewerUserTutorial.upvoted;
       let upvotes = tutorial.upvotes;

packages/gatsby-theme/src/components/courses/CourseCard.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Card, Flex, Image } from '../shared/base';
+import ProgressBar from '../shared/ProgressBar';
+import { TutorialButton } from '../shared/buttons';
+import { getTutorialOverviewSlug } from '../../utils/getTutorialSlug';
+
+type CourseCardProps = {
+  tutorialTitle: string;
+  fileAbsolutePath: string;
+};
+
+const CourseCard: React.FunctionComponent<CourseCardProps> = ({
+  tutorialTitle,
+  fileAbsolutePath,
+}) => {
+  return (
+    <Card m={[1, 1, 1]} p={[2, 2, 2]}>
+      <Flex flexDirection="column" alignItems="center" justifyContent="center">
+        <Image
+          width={[0.5, 0.5, 0.5]}
+          src="https://i.ibb.co/TcKwmwR/Icons.png"
+        />
+        <h3>{tutorialTitle}</h3>
+        <ProgressBar percentage={Math.floor(Math.random() * 100)} width={80} />
+        <a href={getTutorialOverviewSlug(fileAbsolutePath)}>
+          <TutorialButton>Start Tutorial</TutorialButton>
+        </a>
+      </Flex>
+    </Card>
+  );
+};
+
+export default CourseCard;

packages/gatsby-theme/src/components/courses/CourseSection.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Heading, Text, Flex, Box } from '../shared/base';
+import CourseCard from './CourseCard';
+
+type CourseSectionProps = {
+  heading: string;
+  body: string;
+  data: [QueryData];
+};
+
+type QueryData = {
+  node: Node;
+};
+
+type Node = {
+  id: string;
+  fileAbsolutePath: string;
+  frontmatter: Frontmatter;
+};
+
+type Frontmatter = {
+  tutorialTitle: string;
+  description: string;
+};
+
+const CourseSection: React.FunctionComponent<CourseSectionProps> = ({
+  heading,
+  body,
+  data,
+}) => {
+  return (
+    <Flex m={[1, 1, 1]}>
+      <Box width={[0.2, 0.2, 0.2]}>
+        <Heading> {heading} </Heading>
+        <Text>{body}</Text>
+      </Box>
+      <Box width={[0.8, 0.8, 0.8]}>
+        <Flex alignItems="top" justifyContent="center" flexWrap="wrap">
+          {data.map(tutorial => (
+            <Box width={[1, 0.8, 0.4]} key={tutorial.node.id}>
+              <CourseCard
+                tutorialTitle={tutorial.node.frontmatter.tutorialTitle}
+                fileAbsolutePath={tutorial.node.fileAbsolutePath}
+              />
+            </Box>
+          ))}
+        </Flex>
+      </Box>
+    </Flex>
+  );
+};
+
+export default CourseSection;

packages/gatsby-theme/src/components/listing.tsx renamed to packages/gatsby-theme/src/components/index/listing.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Text } from './shared/base';
+
+const Percentage = ({ tutorial }) => {
+  let progress = tutorial.viewerUserTutorial.currentChapter;
+  let percentage = progress
+    ? Math.floor((progress / tutorial.numberofChapters) * 100)
+    : 0;
+  return (
+    <div>
+      {percentage ? <Text>{percentage}%</Text> : <Text> No Progress </Text>}
+    </div>
+  );
+};
+
+export default Percentage;