From 322622909a9f11682430f8e2d672c4b73c409697 Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Wed, 29 Dec 2021 01:11:01 -0600
Subject: [PATCH] chore: move video list loading

---
 components/VideosList.vue | 25 +++++++++++++++++++++++--
 pages/index.vue           | 29 +----------------------------
 2 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/components/VideosList.vue b/components/VideosList.vue
index 282955b..9b3a781 100644
--- a/components/VideosList.vue
+++ b/components/VideosList.vue
@@ -22,8 +22,29 @@ import Vue from 'vue'
 export default Vue.extend({
   name: 'VideoList',
 
-  props: {
-    videos: Array,
+  data(): {
+    hasError: boolean
+    videos: []
+  } {
+    return {
+      hasError: false,
+      videos: [],
+    }
   },
+
+  async fetch() {
+    try {
+      const response = await fetch(
+        `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails&maxResults=50&playlistId=${process.env.YOUTUBE_UPLOADS_PLAYLIST_ID}&key=${process.env.YOUTUBE_API_KEY}`
+      )
+      const json = await response.json()
+      this.videos = json.items
+    } catch (error: any) {
+      this.hasError = true
+      throw new Error(error)
+    }
+  },
+
+  fetchOnServer: true,
 })
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 50ff658..e28ff61 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,9 +4,7 @@
       <PageNav />
     </header>
     <main>
-      <span>Content</span>
-
-      <VideosList :videos="videos" />
+      <VideosList />
     </main>
   </div>
 </template>
@@ -16,30 +14,5 @@ import Vue from 'vue'
 
 export default Vue.extend({
   name: 'IndexPage',
-
-  data(): {
-    hasError: boolean
-    videos: []
-  } {
-    return {
-      hasError: false,
-      videos: [],
-    }
-  },
-
-  async fetch() {
-    try {
-      const response = await fetch(
-        `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails&maxResults=50&playlistId=${process.env.YOUTUBE_UPLOADS_PLAYLIST_ID}&key=${process.env.YOUTUBE_API_KEY}`
-      )
-      const json = await response.json()
-      this.videos = json.items
-    } catch (error: any) {
-      this.hasError = true
-      throw new Error(error)
-    }
-  },
-
-  fetchOnServer: true,
 })
 </script>