feed 작업중

pages/index.vue

@@ -60,8 +60,30 @@
           </md-option>
         </md-select>
       </md-field>
+
+      <!-- Feed Content -->
+      <md-list v-for="headline in feed" :key="headline.id" class="md-triple-line">
+        <md-list-item>
+          <md-avatar><img :src="headline.utlToImage" :alt="headline.title"></md-avatar>
+
+          <div class="md-list-item-text">
+            <span><a :href="headline.url" target="_blank">{{ headline.title }}</a></span>
+            <span>{{ headline.source.name }}</span>
+            <span>View comments</span>
+          </div>
+
+          <md-button class="md-icon-button md-list-action">
+            <md-icon class="md-accent">
+              delete
+            </md-icon>
+          </md-button>
+        </md-list-item>
+
+        <md-divider class="md-inset"></md-divider>
+      </md-list>
     </md-drawer>
 
+    <!-- News categories (Right Drawer) -->
     <md-drawer :md-active.sync="showRightSidepanel" class="md-right" md-fixed>
       <md-toolbar :md-elevation="1">
         <span class="md-title">News Categories</span>
@@ -118,7 +140,7 @@
               </md-card-content>
 
               <md-card-actions>
-                <md-button class="md-icon-button">
+                <md-button @click="addHeadlineToFeed(headline)" class="md-icon-button">
                   <md-icon>bookmark</md-icon>
                 </md-button>
                 <md-button class="md-icon-button">
@@ -168,6 +190,9 @@ export default {
     user () {
       return this.$store.getters.user
     },
+    feed () {
+      return this.$store.getters.feed
+    },
     isAuthenticated () {
       return this.$store.getters.isAuthenticated
     }
@@ -179,6 +204,7 @@ export default {
   },
   async fetch ({ store }) {
     await store.dispatch('loadHeadLines', `/api/top-headlines?country=${store.state.country}&category=${store.state.category}`)
+    // await store.dispatch('loadUserFeed')
   },
   methods: {
     async loadCategory (category) {
@@ -190,6 +216,11 @@ export default {
     },
     logoutUser () {
       this.$store.dispatch('logoutUser')
+    },
+    async addHeadlineToFeed (headline) {
+      if (this.user) {
+        await this.$store.dispatch('addHeadlineToFeed', headline)
+      }
     }
   }
 }

store/index.js

@@ -7,6 +7,7 @@ const createStore = () => {
   return new Vuex.Store({
     state: {
       headlines: [],
+      feed: [],
       loading: false,
       category: '',
       token: null,
@@ -32,6 +33,9 @@ const createStore = () => {
       setUser (state, user) {
         state.user = user
       },
+      setFeed (state, headlines) {
+        state.feed = headlines
+      },
       clearToken: state => (state.token = null),
       clearUser: state => (state.user = null)
     },
@@ -75,6 +79,21 @@ const createStore = () => {
           // console.log(error)
         }
       },
+      async addHeadlineToFeed ({ state }, headline) {
+        const feedRef = db.collection(`users/${state.user.email}/feed`).doc(headline.title)
+        await feedRef.set(headline)
+      },
+      async loadUserFeed ({ state, commit }) {
+        const feedRef = db.collection(`users/${state.user.email}/feed`)
+
+        await feedRef.get().then((querySnapshot) => {
+          const headlines = []
+          querySnapshot.forEach((doc) => {
+            headlines.push(doc.data())
+          })
+          commit('setFeed', headlines)
+        })
+      },
       setLogoutTimer ({ dispatch }, interval) {
         setTimeout(() => dispatch('logoutUser'), interval)
       },
@@ -86,6 +105,7 @@ const createStore = () => {
     },
     getters: {
       headlines: state => state.headlines,
+      feed: state => state.feed,
       loading: state => state.loading,
       category: state => state.category,
       country: state => state.country,