Basic mention support.

I still have to think about how to integrate them in the state system...
This commit is contained in:
Roger Braun 2016-11-26 21:09:41 +01:00
parent 8cd1c690ca
commit 6c2941dba0
8 changed files with 64 additions and 4 deletions

View file

@ -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

View file

@ -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>

View file

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

View file

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

View file

@ -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 PublicAndExternalTimeline from './components/public_and_external_timeline/public_and_external_timeline.vue'
import FriendsTimeline from './components/friends_timeline/friends_timeline.vue' import FriendsTimeline from './components/friends_timeline/friends_timeline.vue'
import Conversation from './components/conversation/conversation.vue' import Conversation from './components/conversation/conversation.vue'
import Mentions from './components/mentions/mentions.vue'
import statusesModule from './modules/statuses.js' import statusesModule from './modules/statuses.js'
import usersModule from './modules/users.js' import usersModule from './modules/users.js'
@ -27,7 +28,8 @@ const routes = [
{ path: '/main/all', component: PublicAndExternalTimeline }, { path: '/main/all', component: PublicAndExternalTimeline },
{ path: '/main/public', component: PublicTimeline }, { path: '/main/public', component: PublicTimeline },
{ path: '/main/friends', component: FriendsTimeline }, { 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({ const router = new VueRouter({

View file

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

View file

@ -10,6 +10,7 @@ const STATUS_UPDATE_URL = '/api/statuses/update.json'
const STATUS_URL = '/api/statuses/show' const STATUS_URL = '/api/statuses/show'
const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload' const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
const CONVERSATION_URL = '/api/statusnet/conversation' const CONVERSATION_URL = '/api/statusnet/conversation'
const MENTIONS_URL = '/api/statuses/mentions.json'
const oldfetch = window.fetch 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}) => { const fetchConversation = ({id, credentials}) => {
let url = `${CONVERSATION_URL}/${id}.json?count=100` let url = `${CONVERSATION_URL}/${id}.json?count=100`
return fetch(url, { headers: authHeaders(credentials) }) return fetch(url, { headers: authHeaders(credentials) })
@ -120,6 +127,7 @@ const apiService = {
fetchTimeline, fetchTimeline,
fetchConversation, fetchConversation,
fetchStatus, fetchStatus,
fetchMentions,
favorite, favorite,
unfavorite, unfavorite,
retweet, retweet,

View file

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