헤드라인보기추가+백버튼 추가

package-lock.json

@@ -11982,7 +11982,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -12170,6 +12171,7 @@
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -12270,6 +12272,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -12345,7 +12348,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -12393,6 +12397,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -12431,11 +12436,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         },

pages/headlines/_slug.vue

@@ -1,3 +1,43 @@
 <template>
-  <p>{{ $route.params.slug }}</p>
+  <div class="md-layout md-alignment-center" style="margin: 5em 0">
+    <!--Headline Markup-->
+    <md-card class="md-layout-item md-size-75 md-small-size-80 md-xsmall-size-100">
+      <md-card-media style="height: 300px" md-ratio="16:9">
+        <img :src="headline.urlToImage" :alt="headline.title">
+      </md-card-media>
+
+      <md-card-header>
+        <div class="md-title">
+          <a :href="headline.url" target="_blank">{{ headline.title }}</a>
+        </div>
+        <div>
+          {{ headline.source.name }}
+          <md-icon>book</md-icon>
+        </div>
+        <span class="md-subhead">
+          {{ headline.author }}
+          <md-icon>face</md-icon>
+        </span>
+      </md-card-header>
+      <md-card-content>{{ headline.content }}</md-card-content>
+    </md-card>
+
+    <!-- Back Button -->
+    <md-button @click="$router.go(-1)" class="md-fixed md-fab-bottom-right md-fab md-primary">
+      <md-icon>arrow_back</md-icon>
+    </md-button>
+  </div>
 </template>
+
+<script>
+export default {
+  computed: {
+    headline () {
+      return this.$store.getters.headline
+    }
+  },
+  async fetch ({ store, params }) {
+    await store.dispatch('loadHeadline', params.slug)
+  }
+}
+</script>

pages/index.vue

@@ -229,8 +229,10 @@ export default {
     async removeHeadlineFromFeed (headline) {
       await this.$store.dispatch('removeHeadlineFromFeed', headline)
     },
-    saveHeadline (headline) {
-      this.$router.push(`/headlines/${headline.slug}`)
+    async saveHeadline (headline) {
+      await this.$store.dispatch('saveHeadline', headline).then(() => {
+        this.$router.push(`/headlines/${headline.slug}`)
+      })
     },
     async addHeadlineToFeed (headline) {
       if (this.user) {

store/index.js

@@ -8,6 +8,7 @@ const createStore = () => {
   return new Vuex.Store({
     state: {
       headlines: [],
+      headline: null,
       feed: [],
       loading: false,
       category: '',
@@ -19,6 +20,9 @@ const createStore = () => {
       setHeadLines (state, headlines) {
         state.headlines = headlines
       },
+      setHeadline (state, headline) {
+        state.headline = headline
+      },
       setLoading (state, loading) {
         state.loading = loading
       },
@@ -89,6 +93,31 @@ const createStore = () => {
           // console.log(error)
         }
       },
+      async loadHeadline ({ commit }, headlineSlug) {
+        const headlineRef = db.collection('headlines').doc(headlineSlug)
+
+        await headlineRef.get().then((doc) => {
+          if (doc.exists) {
+            const headline = doc.data()
+            this.commit('setHeadline', headline)
+          }
+        })
+      },
+      async saveHeadline (context, headline) {
+        const headlineRef = db.collection('headlines').doc(headline.slug)
+
+        // eslint-disable-next-line no-unused-vars
+        let headlineId
+        await headlineRef.get().then((doc) => {
+          if (doc.exists) {
+            headlineId = doc.id
+          }
+        })
+
+        if (!headlineId) {
+          await headlineRef.set(headline)
+        }
+      },
       async removeHeadlineFromFeed ({ state }, headline) {
         const headlineRef = db.collection(`users/${state.user.email}/feed`).doc(headline.title)
         await headlineRef.delete()
@@ -128,6 +157,7 @@ const createStore = () => {
     },
     getters: {
       headlines: state => state.headlines,
+      headline: state => state.headline,
       feed: state => state.feed,
       loading: state => state.loading,
       category: state => state.category,