선택된 feed 스타일 변경

pages/index.vue

@@ -79,7 +79,7 @@
           </md-button>
         </md-list-item>
 
-        <md-divider class="md-inset"></md-divider>
+        <md-divider class="md-inset" />
       </md-list>
     </md-drawer>
 
@@ -140,7 +140,7 @@
               </md-card-content>
 
               <md-card-actions>
-                <md-button @click="addHeadlineToFeed(headline)" class="md-icon-button">
+                <md-button @click="addHeadlineToFeed(headline)" :class="isInFeed(headline.title)" class="md-icon-button">
                   <md-icon>bookmark</md-icon>
                 </md-button>
                 <md-button class="md-icon-button">
@@ -221,6 +221,10 @@ export default {
       if (this.user) {
         await this.$store.dispatch('addHeadlineToFeed', headline)
       }
+    },
+    isInFeed (title) {
+      const inFeed = this.feed.findIndex(headline => headline.title === title) > -1
+      return inFeed ? 'md-primary' : ''
     }
   }
 }

store/index.js

@@ -37,7 +37,8 @@ const createStore = () => {
         state.feed = headlines
       },
       clearToken: state => (state.token = null),
-      clearUser: state => (state.user = null)
+      clearUser: state => (state.user = null),
+      clearFeed: state => (state.feed = [])
     },
     actions: {
       async loadHeadLines ({ commit }, apiUrl) {
@@ -86,6 +87,7 @@ const createStore = () => {
       async loadUserFeed ({ state, commit }) {
         if (state.user) {
           const feedRef = db.collection(`users/${state.user.email}/feed`)
+          // feedRef.onSnapshot now work
           await feedRef.get().then((querySnapshot) => {
             // eslint-disable-next-line prefer-const
             let headlines = []
@@ -102,6 +104,7 @@ const createStore = () => {
       logoutUser ({ commit }) {
         commit('clearToken')
         commit('clearUser')
+        commit('clearFeed')
         clearUserData()
       }
     },