refactor and add types

Author: Allicolyer

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

@@ -14,12 +14,22 @@ import { getTutorialOverviewSlug } from '../utils/getTutorialSlug';
 import ProgressBar from '../components/ProgressBar';
 
 const courses = data => {
-  console.log(data);
-  let frontend = data.data.frontend.edges;
-  let backend = data.data.backend.edges;
-  console.log(frontend);
-  console.log(backend);
-
+  const courseSectionData = [
+    {
+      heading: `Frontend`,
+      body: `Implement a web frontend for a Hacker News app that talks to a GraphQL
+            API. We provide a hosted GraphQL API for you so that you can test your
+            app in a real world environment.`,
+      data: data.data.frontend.edges,
+    },
+    {
+      heading: `Backend`,
+      body: `Implement a GraphQL API that's backed by a database. The tutorial
+      teach schema design and implement features like authentication,
+      filtering, pagination and a lot more`,
+      data: data.data.backend.edges,
+    },
+  ];
   return (
     <Layout>
       <Content>
@@ -28,59 +38,78 @@ const courses = data => {
           A general introduction to GraphQL for frontend and backend developers.
         </Text>
         <Text>
-          {' '}
           Read this tutorial to learn about GraphQL's basic concepts and prepare
           yourself for a hands-on beginner tutorial.
         </Text>
-        <Flex m={[1, 1, 1]}>
-          <Box width={[0.2, 0.2, 0.2]}>
-            <Heading> Frontend </Heading>
-            <Text>
-              Implement a web frontend for a Hacker News app that talks to a
-              GraphQL API. We provide a hosted GraphQL API for you so that you
-              can test your app in a real world environment.
-            </Text>
-          </Box>
-          <Box width={[0.8, 0.8, 0.8]}>
-            <Flex alignItems="top" justifyContent="center" flexWrap="wrap">
-              {frontend.map(tutorial => (
-                <CourseCard
-                  tutorialTitle={tutorial.node.frontmatter.tutorialTitle}
-                  fileAbsolutePath={tutorial.node.fileAbsolutePath}
-                />
-              ))}
-            </Flex>
-          </Box>
-        </Flex>
-
-        <Flex m={[1, 1, 1]}>
-          <Box width={[0.2, 0.2, 0.2]}>
-            <Heading> Backend </Heading>
-            <Text>
-              Implement a GraphQL API that's backed by a database. The tutorial
-              teach schema design and implement features like authentication,
-              filtering, pagination and a lot more
-            </Text>
-          </Box>
-          <Box width={[0.8, 0.8, 0.8]}>
-            <Flex alignItems="top" justifyContent="center" flexWrap="wrap">
-              {backend.map(tutorial => (
-                <CourseCard
-                  tutorialTitle={tutorial.node.frontmatter.tutorialTitle}
-                  fileAbsolutePath={tutorial.node.fileAbsolutePath}
-                />
-              ))}
-            </Flex>
-          </Box>
-        </Flex>
+        {courseSectionData.map(section => (
+          <div key={section.heading}>
+            <CourseSection {...section} />
+          </div>
+        ))}
       </Content>
     </Layout>
   );
 };
 
-const CourseCard = ({ tutorialTitle, fileAbsolutePath }) => {
+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>
+  );
+};
+
+type CourseCardProps = {
+  tutorialTitle: string;
+  fileAbsolutePath: string;
+};
+
+const CourseCard: React.FunctionComponent<CourseCardProps> = ({
+  tutorialTitle,
+  fileAbsolutePath,
+}) => {
   return (
-    <Card m={[2, 2, 2]} p={[2, 2, 2]} width={[1 / 2, 1 / 2, 1 / 4]}>
+    <Card m={[1, 1, 1]} p={[2, 2, 2]}>
       <Flex flexDirection="column" alignItems="center" justifyContent="center">
         <Image
           width={[0.5, 0.5, 0.5]}