refs #25 Add favourite event card in notifications

src/renderer/components/TimelineSpace.vue

@@ -19,6 +19,7 @@ export default {
         this.$store.dispatch('TimelineSpace/fetchHomeTimeline', account)
         this.$store.dispatch('TimelineSpace/startUserStreaming', account)
         this.$store.dispatch('TimelineSpace/username', account)
+        this.$store.dispatch('TimelineSpace/fetchNotifications', account)
       })
       .catch(() => {
         this.$message({

src/renderer/components/TimelineSpace/Cards/Notification.vue

@@ -0,0 +1,22 @@
+<template>
+<div id="notification">
+  <favourite v-if="message.type === 'favourite'" :message="message"></favourite>
+  <follow v-if="message.type === 'follow'" :message="message"></follow>
+  <mention v-if="message.type === 'mention'" :message="message"></mention>
+  <reblog v-if="message.type == 'reblog'" :message="message"></reblog>
+</div>
+</template>
+
+<script>
+import Favourite from './Notification/Favourite'
+import Follow from './Notification/Follow'
+import Mention from './Notification/Mention'
+import Reblog from './Notification/Reblog'
+
+export default {
+  name: 'notification',
+  props: ['message'],
+  components: { Favourite, Follow, Mention, Reblog }
+}
+</script>
+

src/renderer/components/TimelineSpace/Cards/Notification/Favourite.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="favourite">
+    <div class="action">
+      <div class="action-mark">
+        <icon name="star" scale="0.7"></icon>
+      </div>
+      <div class="action-detail">
+        <span class="bold">{{ message.account.display_name }}</span> favourited your status
+      </div>
+      <div class="action-icon">
+        <img :src="message.account.avatar" />
+      </div>
+    </div>
+    <div class="clearfix"></div>
+    <div class="target">
+      <div class="icon">
+        <img :src="message.status.account.avatar" />
+      </div>
+      <div class="detail">
+        <div class="toot-header">
+          <div class="user">
+            {{ message.status.account.display_name }}
+          </div>
+          <div class="timestamp">
+            {{ parseDatetime(message.status.created_at) }}
+          </div>
+        </div>
+        <div class="content" v-html="message.status.content"></div>
+      </div>
+    </div>
+    <div class="clearfix"></div>
+    <div class="fill-line"></div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+
+export default {
+  name: 'favourite',
+  props: ['message'],
+  methods: {
+    parseDatetime (datetime) {
+      return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fill-line {
+  height: 1px;
+  background-color: #f2f6fc;
+  margin: 4px 0;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.favourite {
+  margin-top: 8px;
+
+  .action {
+    margin-right: 8px;
+
+    .action-mark {
+      color: #e6a23c;
+      float: left;
+      width: 32px;
+      text-align: right;
+    }
+
+    .action-detail {
+      margin-left: 10px;
+      font-size: 14px;
+      float: left;
+    }
+
+    .action-icon {
+      width: 100%;
+      text-align: right;
+
+      img {
+        width: 16px;
+        height: 16px;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .target {
+    .icon {
+      float: left;
+      width: 42px;
+
+      img {
+        width: 32px;
+        height: 32px;
+        border-radius: 4px;
+      }
+    }
+
+    .detail {
+      margin: 8px 8px 0 42px;
+      color: #909399;
+
+      .toot-header {
+        .user {
+          float: left;
+          font-size: 14px;
+        }
+
+        .timestamp {
+          font-size: 14px;
+          text-align: right;
+          width: 100%;
+        }
+      }
+
+      .content {
+        font-size: 14px;
+        margin: 4px 0 8px;
+      }
+    }
+  }
+}
+</style>

src/renderer/components/TimelineSpace/Cards/Notification/Follow.vue

@@ -1,11 +1,12 @@
 <template>
-  <div id="notification">
-    notification
+  <div id="follow">
+    follow
   </div>
 </template>
 
 <script>
 export default {
-  name: 'notification'
+  name: 'follow',
+  props: ['message']
 }
 </script>

src/renderer/components/TimelineSpace/Cards/Notification/Mention.vue

@@ -0,0 +1,12 @@
+<template>
+  <div id="mention">
+    mention
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mention',
+  props: ['message']
+}
+</script>

src/renderer/components/TimelineSpace/Cards/Notification/Reblog.vue

@@ -0,0 +1,12 @@
+<template>
+  <div id="reblog">
+    reblog
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'reblog',
+  props: ['message']
+}
+</script>

src/renderer/components/TimelineSpace/Favorites.vue

@@ -1,11 +1,11 @@
 <template>
-  <div id="fav">
+  <div id="favorites">
     fav
   </div>
 </template>
 
 <script>
 export default {
-  name: 'fav'
+  name: 'favorites'
 }
 </script>

src/renderer/components/TimelineSpace/Notifications.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="notifications">
+    <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
+      <notification :message="message"></notification>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Notification from './Cards/Notification'
+
+export default {
+  name: 'notifications',
+  components: { Notification },
+  computed: {
+    ...mapState({
+      notifications: state => state.TimelineSpace.notifications
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.notifications {
+  margin-left: 16px;
+}
+</style>

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -17,11 +17,11 @@
         <icon name="home"></icon>
         <span>Home</span>
       </el-menu-item>
-      <el-menu-item index="2" :route="{path: `/${id()}/notification`}">
+      <el-menu-item index="2" :route="{path: `/${id()}/notifications`}">
         <icon name="bell"></icon>
         <span>Notification</span>
       </el-menu-item>
-      <el-menu-item index="3" :route="{path: `/${id()}/fav`}">
+      <el-menu-item index="3" :route="{path: `/${id()}/favorites`}">
         <icon name="star"></icon>
         <span>Fav</span>
       </el-menu-item>

src/renderer/router/index.js

@@ -31,14 +31,14 @@ export default new Router({
               component: require('@/components/TimelineSpace/Home').default
             },
             {
-              path: 'notification',
-              name: 'notification',
-              component: require('@/components/TimelineSpace/Notification').default
+              path: 'notifications',
+              name: 'notifications',
+              component: require('@/components/TimelineSpace/Notifications').default
             },
             {
-              path: 'fav',
-              name: 'fav',
-              component: require('@/components/TimelineSpace/Fav').default
+              path: 'favorites',
+              name: 'favorites',
+              component: require('@/components/TimelineSpace/Favorites').default
             },
             {
               path: 'local',

src/renderer/store/TimelineSpace.js

@@ -14,7 +14,7 @@ const TimelineSpace = {
     },
     username: '',
     homeTimeline: [],
-    notification: []
+    notifications: []
   },
   mutations: {
     updateAccount (state, account) {
@@ -26,11 +26,14 @@ const TimelineSpace = {
     appendHomeTimeline (state, update) {
       state.homeTimeline = [update].concat(state.homeTimeline)
     },
-    appendNotification (state, notification) {
-      state.notification = [notification].concat(state.notification)
+    appendNotifications (state, notifications) {
+      state.notifications = [notifications].concat(state.notifications)
     },
     insertHomeTimeline (state, messages) {
       state.homeTimeline = state.homeTimeline.concat(messages)
+    },
+    insertNotifications (state, notifications) {
+      state.notifications = state.notifications.concat(notifications)
     }
   },
   actions: {
@@ -96,6 +99,24 @@ const TimelineSpace = {
             reject(err)
           })
       })
+    },
+    fetchNotifications ({ commit }, account) {
+      return new Promise((resolve, reject) => {
+        const client = new Mastodon(
+          {
+            access_token: account.accessToken,
+            api_url: account.baseURL + '/api/v1'
+          }
+        )
+        client.get('/notifications', { limit: 30 })
+          .then((res) => {
+            commit('insertNotifications', res.data)
+            resolve()
+          })
+          .catch((err) => {
+            reject(err)
+          })
+      })
     }
   }
 }