Basic mention support.

I still have to think about how to integrate them in the state system...

src/components/mentions/mentions.js

@@ -0,0 +1,28 @@
+import Status from '../status/status.vue'
+// Temporary
+import { prepareStatus, updateTimestampsInStatuses } from '../../modules/statuses.js'
+import { map } from 'lodash'
+
+const Mentions = {
+  data () {
+    return {
+      mentions: []
+    }
+  },
+  computed: {
+    username () {
+      return this.$route.params.username
+    }
+  },
+  components: {
+    Status
+  },
+  created () {
+    this.$store.state.api.backendInteractor.fetchMentions({username: this.username})
+      .then((mentions) => {
+        this.mentions = updateTimestampsInStatuses(map(mentions, prepareStatus))
+      })
+  }
+}
+
+export default Mentions

src/components/mentions/mentions.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="timeline panel panel-default">
+    <div class="panel-heading">Mentions</div>
+    <div class="panel-body">
+      <div class="timeline">
+        <status v-for="status in mentions" :key="status.id" v-bind:statusoid="status"></status>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./mentions.js"></script>

src/components/nav_panel/nav_panel.js

@@ -1,6 +1,6 @@
 const NavPanel = {
   computed: {
-    loggedIn () {
+    currentUser () {
       return this.$store.state.users.currentUser
     }
   }

src/components/nav_panel/nav_panel.vue

@@ -2,11 +2,16 @@
   <div class="nav-panel">
     <div class="panel panel-default">
       <ul>
-        <li v-if='loggedIn'>
+        <li v-if='currentUser'>
           <router-link to='/main/friends'>
             Timeline
           </router-link>
         </li>
+        <li v-if='currentUser'>
+          <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
+            Mentions
+          </router-link>
+        </li>
         <li>
           <router-link to='/main/public'>
             Public Timeline

src/main.js

@@ -6,6 +6,7 @@ import PublicTimeline from './components/public_timeline/public_timeline.vue'
 import PublicAndExternalTimeline from './components/public_and_external_timeline/public_and_external_timeline.vue'
 import FriendsTimeline from './components/friends_timeline/friends_timeline.vue'
 import Conversation from './components/conversation/conversation.vue'
+import Mentions from './components/mentions/mentions.vue'
 
 import statusesModule from './modules/statuses.js'
 import usersModule from './modules/users.js'
@@ -27,7 +28,8 @@ const routes = [
   { path: '/main/all', component: PublicAndExternalTimeline },
   { path: '/main/public', component: PublicTimeline },
   { path: '/main/friends', component: FriendsTimeline },
-  { name: 'conversation', path: '/notice/:id', component: Conversation }
+  { name: 'conversation', path: '/notice/:id', component: Conversation },
+  { name: 'mentions', path: '/:username/mentions', component: Mentions }
 ]
 
 const router = new VueRouter({

src/modules/statuses.js

@@ -52,7 +52,7 @@ export const prepareStatus = (status) => {
   return status
 }
 
-const updateTimestampsInStatuses = (statuses) => {
+export const updateTimestampsInStatuses = (statuses) => {
   return map(statuses, (statusoid) => {
     const status = statusoid.retweeted_status || statusoid
 

src/services/api/api.service.js

@@ -10,6 +10,7 @@ const STATUS_UPDATE_URL = '/api/statuses/update.json'
 const STATUS_URL = '/api/statuses/show'
 const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
 const CONVERSATION_URL = '/api/statusnet/conversation'
+const MENTIONS_URL = '/api/statuses/mentions.json'
 
 const oldfetch = window.fetch
 
@@ -27,6 +28,12 @@ const authHeaders = (user) => {
   }
 }
 
+const fetchMentions = ({username, sinceId = 0, credentials}) => {
+  let url = `${MENTIONS_URL}?since_id=${sinceId}&screen_name=${username}`
+  return fetch(url, { headers: authHeaders(credentials) })
+    .then((data) => data.json())
+}
+
 const fetchConversation = ({id, credentials}) => {
   let url = `${CONVERSATION_URL}/${id}.json?count=100`
   return fetch(url, { headers: authHeaders(credentials) })
@@ -120,6 +127,7 @@ const apiService = {
   fetchTimeline,
   fetchConversation,
   fetchStatus,
+  fetchMentions,
   favorite,
   unfavorite,
   retweet,

src/services/backend_interactor_service/backend_interactor_service.js

@@ -9,9 +9,14 @@ const backendInteractorService = (credentials) => {
     return apiService.fetchConversation({id, credentials})
   }
 
+  const fetchMentions = ({sinceId, username}) => {
+    return apiService.fetchMentions({sinceId, username, credentials})
+  }
+
   const backendInteractorServiceInstance = {
     fetchStatus,
     fetchConversation,
+    fetchMentions,
     verifyCredentials: apiService.verifyCredentials
   }