Get the course from graph cms

Author: Lazhari

components/CoursesQuery.js

@@ -0,0 +1,30 @@
+import React from "react";
+import gql from "graphql-tag";
+import { Query } from "react-apollo";
+
+const CoursesQuery = gql`
+  {
+    courses {
+      id
+      title
+      subtitle
+      caption
+      author
+      image {
+        url
+      }
+      logo {
+        url
+      }
+      avatar {
+        url
+      }
+    }
+  }
+`;
+
+const CoursesQueryContainer = ({ children }) => (
+  <Query query={CoursesQuery}>{children}</Query>
+);
+
+export default CoursesQueryContainer;

screens/HomeScreen.js

@@ -17,6 +17,7 @@ import Course from "../components/Course";
 import Menu from "../components/Menu";
 import Avatar from "../components/Avatar";
 import CardsQuery from "../components/CardsQuery";
+import CoursesQuery from "../components/CoursesQuery";
 
 function mapDispatchToProps(dispatch) {
   return {
@@ -148,9 +149,20 @@ class HomeScreen extends React.Component {
                 </CardsQuery>
               </ScrollView>
               <Subtitle>Popular Courses</Subtitle>
-              {courses.map(course => (
-                <Course {...course} key={course.title} />
-              ))}
+              <CoursesQuery>
+                {({ loading, error, data }) => {
+                  if (loading) {
+                    return <Message>Loading...</Message>;
+                  }
+                  if (error) {
+                    return <Message>Error...</Message>;
+                  }
+                  const { courses } = data;
+                  return courses.map(course => (
+                    <Course {...course} key={course.id} />
+                  ));
+                }}
+              </CoursesQuery>
             </ScrollView>
           </SafeAreaView>
         </AnimatedContainer>
@@ -237,43 +249,3 @@ const logos = [
     text: "Sketch"
   }
 ];
-
-const courses = [
-  {
-    title: "Prototype in InVision Studio",
-    subtitle: "10 sections",
-    image: require("../assets/background13.jpg"),
-    logo: require("../assets/logo-studio.png"),
-    author: "Meng To",
-    avatar: require("../assets/avatar.jpg"),
-    caption: "Design an interactive prototype"
-  },
-  {
-    title: "React for Designers",
-    subtitle: "12 sections",
-    image: require("../assets/background11.jpg"),
-    logo: require("../assets/logo-react.png"),
-    author: "Meng To",
-    avatar: require("../assets/avatar.jpg"),
-    caption: "Learn to design and code a React site"
-  },
-  {
-    title: "Design and Code with Framer X",
-    subtitle: "10 sections",
-    image: require("../assets/background14.jpg"),
-    logo: require("../assets/logo-framerx.png"),
-    author: "Meng To",
-    avatar: require("../assets/avatar.jpg"),
-    caption: "Create powerful design and code components for your app"
-  },
-  {
-    title: "Design System in Figma",
-    subtitle: "10 sections",
-    image: require("../assets/background6.jpg"),
-    logo: require("../assets/logo-figma.png"),
-    author: "Meng To",
-    avatar: require("../assets/avatar.jpg"),
-    caption:
-      "Complete guide to designing a site using a collaborative design tool"
-  }
-];