Add SectionList.vue with second query

Author: lorensr

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,
+      sections,
+      noSections: computed(() => sections.value.length === 1)
+    }
+  }
+}
+</script>

src/components/TableOfContents.vue

@@ -5,20 +5,34 @@
 
   <ul>
     <li v-for="chapter of chapters" :key="chapter.id">
-      {{
-        chapter.number ? `${chapter.number}. ${chapter.title}` : chapter.title
-      }}
+      <a @click="updateCurrentSection(chapter.id)">
+        {{
+          chapter.number ? `${chapter.number}. ${chapter.title}` : chapter.title
+        }}
+      </a>
     </li>
   </ul>
+
+  <SectionList :id="currentSection" />
 </template>
 
 <script>
-import { gql } from '@apollo/client/core'
 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 currentSection = ref(PREFACE_ID)
+
     const { result, loading, error } = useQuery(gql`
       query ChapterList {
         chapters {
@@ -34,7 +48,9 @@ export default {
     return {
       loading,
       error,
-      chapters
+      chapters,
+      currentSection,
+      updateCurrentSection: newSection => (currentSection.value = newSection)
     }
   }
 }