Add list of sections

lorensr · lorensr · commit 1df83b2d8d26 · 2020-12-18T12:20:45.000-05:00
diff --git a/apollo.config.js b/apollo.config.js
@@ -2,11 +2,8 @@ module.exports = {
   client: {
     service: {
       name: 'guide-api',
-      url: 'https://api.graphql.guide/graphql',
+      url: 'https://api.graphql.guide/graphql'
     },
-    includes: [
-      'src/**/*.vue',
-      'src/**/*.js',
-    ],
-  },
-}
+    includes: ['src/**/*.vue', 'src/**/*.js']
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>The GraphQL Guide</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
@@ -1,14 +1,12 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <TableOfContents />
-  </div>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <TableOfContents />
 </template>
 
 <script>
-import { provide } from 'vue'
 import { ApolloClient, InMemoryCache } from '@apollo/client/core'
 import { DefaultApolloClient } from '@vue/apollo-composable'
+import { provide } from 'vue'
 
 import TableOfContents from './components/TableOfContents.vue'
 
@@ -27,5 +25,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/SectionList.vue b/src/components/SectionList.vue
@@ -0,0 +1,56 @@
+<template>
+  <h2>Sections</h2>
+
+  <div v-if="loading">Loading...</div>
+
+  <div v-else-if="error">Error: {{ error.message }}</div>
+
+  <div v-else-if="noSections">This chapter has no sections</div>
+
+  <ul v-else>
+    <li v-for="section of sections" :key="section.id">
+      {{ section.number }}. {{ section.title }}
+    </li>
+  </ul>
+</template>
+
+<script>
+import { useQuery, useResult } from '@vue/apollo-composable'
+import { gql } from '@apollo/client/core'
+import { computed } from 'vue'
+
+export default {
+  name: 'SectionList',
+  props: {
+    id: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(props) {
+    const { result, loading, error } = useQuery(
+      gql`
+        query SectionList($id: Int!) {
+          chapter(id: $id) {
+            sections {
+              id
+              number
+              title
+            }
+          }
+        }
+      `,
+      props
+    )
+
+    const sections = useResult(result, [], data => data.chapter.sections)
+
+    return {
+      loading,
+      error,
+      noSections: computed(() => sections.value.length === 1),
+      sections
+    }
+  }
+}
+</script>
diff --git a/src/components/TableOfContents.vue b/src/components/TableOfContents.vue
@@ -1,42 +1,57 @@
 <template>
-  <div class="TableOfContents">
+  <h1>The GraphQL Guide</h1>
+
+  <div v-if="loading">Loading...</div>
+
+  <div v-else-if="error">Error: {{ error.message }}</div>
+
+  <ul>
     <li v-for="chapter of chapters" :key="chapter.id">
-      {{ chapter.title }}
+      <a @click="updateCurrentSection(chapter.id)">
+        {{ (chapter.number ? chapter.number + '. ' : '') + chapter.title }}
+      </a>
     </li>
-  </div>
+  </ul>
+
+  <SectionList v-bind:id="currentSection" />
 </template>
 
 <script>
 import { useQuery, useResult } from '@vue/apollo-composable'
 import { gql } from '@apollo/client/core'
+import { ref } from 'vue'
+
+import SectionList from './SectionList.vue'
+
+const PREFACE_ID = -2
 
 export default {
   name: 'TableOfContents',
+  components: {
+    SectionList
+  },
   setup() {
     const { result, loading, error } = useQuery(gql`
-      query ChapterQuery {
+      query ChapterList {
         chapters {
           id
           number
           title
-          sections {
-            id
-            number
-            title
-          }
         }
       }
     `)
 
     const chapters = useResult(result, [])
 
+    const currentSection = ref(PREFACE_ID)
+
     return {
       loading,
       error,
-      chapters
+      chapters,
+      currentSection,
+      updateCurrentSection: newSection => (currentSection.value = newSection)
     }
   }
 }
 </script>
-
-<style scoped></style>
