feat: Implement page switching

pastelmind · pastelmind · commit 0b9bb953cd76 · 2020-06-08T09:58:14.000+09:00
- When the user clicks on a "View Guide" button in the Search Page, the app switches to the Guide Page and displays the contents of the guide. - When the user clicks on the "Close Guide" button in the Guide Page, the app switches back to the Search Page. Note: I must explicitly close component tags (<page-guide></page-guide>) because using self-closing tags (<page-guide />) breaks v-if logic. For more information on this issue, see: - https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended - vuejs/eslint-plugin-vue#29
diff --git a/index.html b/index.html
@@ -21,7 +21,16 @@
   <body>
     <div id="app">
       <h1 class="logo">RiftGuide</h1>
-      <page-guide :guide="currentGuide" />
+      <page-search
+        v-if="currentPage === 'search'"
+        :guides="guides"
+        @guide-open="openPageGuide($event)"
+      ></page-search>
+      <page-guide
+        v-if="currentPage === 'guide'"
+        :guide="currentGuide"
+        @guide-close="openPageSearch"
+      /></page-guide>
     </div>
 
     <template id="template-page-guide">
diff --git a/js/app.js b/js/app.js
@@ -7,6 +7,26 @@ const vm = new Vue({
   el: "#app",
   data: {
     currentGuide: guides[0],
+    currentPage: "search",
     guides: guides,
   },
+  methods: {
+    /**
+     * Switches to the Guide Page, opening the guide with the given ID.
+     * @param {string} guideId
+     */
+    openPageGuide(guideId) {
+      const guideToView = this.guides.find((guide) => guide.id === guideId);
+      if (!guideToView)
+        throw new Error(`Cannot find guide with ID: '${guideId}'`);
+      this.currentGuide = guideToView;
+      this.currentPage = "guide";
+    },
+    /**
+     * Switches to the Search Page.
+     */
+    openPageSearch() {
+      this.currentPage = "search";
+    },
+  },
 });
