Add ChapterScreen and SECTIONS_QUERY

Author: lorensr

App.js

@@ -5,6 +5,7 @@ import { createStackNavigator } from '@react-navigation/stack'
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
 
 import HomeScreen from './src/HomeScreen'
+import ChapterScreen from './src/ChapterScreen'
 import { screenOptions } from './src/styles'
 
 const Stack = createStackNavigator()
@@ -24,6 +25,19 @@ export default function App() {
             component={HomeScreen}
             options={{ title: '📖 The GraphQL Guide' }}
           />
+          <Stack.Screen
+            name="Chapter"
+            component={ChapterScreen}
+            options={({
+              route: {
+                params: {
+                  chapter: { number, title },
+                },
+              },
+            }) => ({
+              title: number ? `Chapter ${number}: ${title}` : title,
+            })}
+          />
         </Stack.Navigator>
         <StatusBar style="light" />
       </NavigationContainer>

src/ChapterScreen.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { View, Text, FlatList } from 'react-native'
+import { gql, useQuery } from '@apollo/client'
+
+import styles from './styles'
+import Loading from './Loading'
+
+const SECTIONS_QUERY = gql`
+  query Sections($id: Int!) {
+    chapter(id: $id) {
+      sections {
+        number
+        title
+      }
+    }
+  }
+`
+
+const SectionItem = ({ section, chapter }) => (
+  <View style={styles.item}>
+    <Text style={styles.header}>
+      {chapter.number}.{section.number}: {section.title}
+    </Text>
+  </View>
+)
+
+export default ({ route }) => {
+  const { data, loading } = useQuery(SECTIONS_QUERY, {
+    variables: { id: route.params.chapter.id },
+  })
+
+  if (loading) {
+    return <Loading />
+  }
+
+  const {
+    chapter: { sections },
+  } = data
+
+  if (sections.length === 1) {
+    return (
+      <View style={styles.centered}>
+        <Text>No sections</Text>
+      </View>
+    )
+  }
+
+  return (
+    <FlatList
+      data={sections}
+      renderItem={({ item }) => (
+        <SectionItem section={item} chapter={route.params.chapter} />
+      )}
+      keyExtractor={(section) => section.number.toString()}
+      initialNumToRender={15}
+    />
+  )
+}

src/HomeScreen.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Text, FlatList, Pressable } from 'react-native'
 import { gql, useQuery } from '@apollo/client'
+import { AppLoading } from 'expo'
 
-import Loading from './Loading'
 import styles from './styles'
 
 const CHAPTERS_QUERY = gql`
@@ -15,7 +15,7 @@ const CHAPTERS_QUERY = gql`
   }
 `
 
-const ChapterItem = ({ chapter }) => {
+const ChapterItem = ({ chapter, onPress }) => {
   const { number, title } = chapter
   let header, subheader
 
@@ -27,24 +27,29 @@ const ChapterItem = ({ chapter }) => {
   }
 
   return (
-    <Pressable style={styles.item}>
+    <Pressable style={styles.item} onPress={onPress}>
       <Text style={styles.header}>{header}</Text>
       {subheader && <Text style={styles.subheader}>{subheader}</Text>}
     </Pressable>
   )
 }
 
-export default () => {
+export default ({ navigation }) => {
   const { data, loading } = useQuery(CHAPTERS_QUERY)
 
   if (loading) {
-    return <Loading />
+    return <AppLoading />
   }
 
   return (
     <FlatList
       data={data.chapters}
-      renderItem={({ item }) => <ChapterItem chapter={item} />}
+      renderItem={({ item }) => (
+        <ChapterItem
+          chapter={item}
+          onPress={() => navigation.navigate('Chapter', { chapter: item })}
+        />
+      )}
       keyExtractor={(chapter) => chapter.id.toString()}
     />
   )