diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/conversation/conversation.js | 48 | ||||
| -rw-r--r-- | src/components/conversation/conversation.vue | 12 | ||||
| -rw-r--r-- | src/components/hello/Hello.css | 0 | ||||
| -rw-r--r-- | src/components/hello/Hello.html | 0 | ||||
| -rw-r--r-- | src/components/hello/Hello.js | 8 | ||||
| -rw-r--r-- | src/components/hello/Hello.vue | 44 | ||||
| -rw-r--r-- | src/components/status/status.vue | 6 | ||||
| -rw-r--r-- | src/components/timeline/timeline.js | 3 | ||||
| -rw-r--r-- | src/main.js | 9 | ||||
| -rw-r--r-- | src/modules/statuses.js | 32 | ||||
| -rw-r--r-- | src/services/api/api.service.js | 22 |
11 files changed, 111 insertions, 73 deletions
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js new file mode 100644 index 00000000..ea26d958 --- /dev/null +++ b/src/components/conversation/conversation.js @@ -0,0 +1,48 @@ +import { find, filter, sortBy, toInteger } from 'lodash' +import Status from '../status/status.vue' +import apiService from '../../services/api/api.service.js' + +const conversation = { + computed: { + status () { + const id = toInteger(this.$route.params.id) + const statuses = this.$store.state.statuses.allStatuses + const status = find(statuses, {id}) + + return status + }, + conversation () { + if (!this.status) { + return false + } + + const conversationId = this.status.statusnet_conversation_id + const statuses = this.$store.state.statuses.allStatuses + const conversation = filter(statuses, { statusnet_conversation_id: conversationId }) + return sortBy(conversation, 'id') + } + }, + components: { + Status + }, + created () { + this.fetchConversation() + }, + methods: { + fetchConversation () { + if (this.status) { + const conversationId = this.status.statusnet_conversation_id + apiService.fetchConversation({id: conversationId}) + .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses })) + .then(() => this.$store.commit('updateTimestamps')) + } else { + const id = this.$route.params.id + apiService.fetchStatus({id}) + .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] })) + .then(() => this.fetchConversation()) + } + } + } +} + +export default conversation diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue new file mode 100644 index 00000000..60b3f044 --- /dev/null +++ b/src/components/conversation/conversation.vue @@ -0,0 +1,12 @@ +<template> + <div class="timeline panel panel-default"> + <div class="panel-heading">Status</div> + <div class="panel-body"> + <div class="timeline"> + <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status> + </div> + </div> + </div> +</template> + +<script src="./conversation.js"></script> diff --git a/src/components/hello/Hello.css b/src/components/hello/Hello.css deleted file mode 100644 index e69de29b..00000000 --- a/src/components/hello/Hello.css +++ /dev/null diff --git a/src/components/hello/Hello.html b/src/components/hello/Hello.html deleted file mode 100644 index e69de29b..00000000 --- a/src/components/hello/Hello.html +++ /dev/null diff --git a/src/components/hello/Hello.js b/src/components/hello/Hello.js deleted file mode 100644 index c701c560..00000000 --- a/src/components/hello/Hello.js +++ /dev/null @@ -1,8 +0,0 @@ -export default { - name: 'hello', - data () { - return { - msg: 'Welcome to Your Vue.js app' - } - } -} diff --git a/src/components/hello/Hello.vue b/src/components/hello/Hello.vue deleted file mode 100644 index 828136a8..00000000 --- a/src/components/hello/Hello.vue +++ /dev/null @@ -1,44 +0,0 @@ -<template> - <div class="hello"> - <h1>{{ msg }}</h1> - <h2>Essential Links</h2> - <ul> - <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> - <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> - <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li> - <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> - <br> - <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This template</a></li> - </ul> - <h2>Ecosystem</h2> - <ul> - <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> - <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> - <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> - <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> - </ul> - </div> -</template> - -<script src='./Hello.js'></script> - -<!-- Add "scoped" attribute to limit CSS to this component only --> -<style scoped> -h1, h2 { - font-weight: normal; -} - -ul { - list-style-type: none; - padding: 0; -} - -li { - display: inline-block; - margin: 0 10px; -} - -a { - color: #42b983; -} -</style> diff --git a/src/components/status/status.vue b/src/components/status/status.vue index d4bcc279..a84917e6 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -20,7 +20,11 @@ <small><a :href="status.user.statusnet_profile_url">{{status.user.screen_name}}</a></small> <small v-if="status.in_reply_to_screen_name"> > <a :href="status.in_reply_to_profileurl">{{status.in_reply_to_screen_name}}</a></small> - - <small>{{status.created_at_parsed}}</small> + <small> + <router-link :to="{ name: 'conversation', params: { id: status.id } }"> + {{status.created_at_parsed}} + </router-link> + </small> </h4> <div class="status-content" v-html="status.statusnet_html"></div> diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 4ebc383f..8799e69c 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -12,12 +12,13 @@ const Timeline = { created () { const store = this.$store const credentials = store.state.users.currentUser.credentials + const showImmediately = this.timeline.visibleStatuses.length === 0 timelineFetcher.fetchAndUpdate({ store, credentials, timeline: this.timelineName, - showImmediately: true + showImmediately }) }, methods: { diff --git a/src/main.js b/src/main.js index de3b2af1..3d3ef1b4 100644 --- a/src/main.js +++ b/src/main.js @@ -5,6 +5,7 @@ import App from './App.vue' 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 statusesModule from './modules/statuses.js' import usersModule from './modules/users.js' @@ -23,12 +24,16 @@ const routes = [ { path: '/', redirect: '/main/all' }, { path: '/main/all', component: PublicAndExternalTimeline }, { path: '/main/public', component: PublicTimeline }, - { path: '/main/friends', component: FriendsTimeline } + { path: '/main/friends', component: FriendsTimeline }, + { name: 'conversation', path: '/notice/:id', component: Conversation } ] const router = new VueRouter({ mode: 'history', - routes + routes, + scrollBehavior: (to, from, savedPosition) => { + return savedPosition || { x: 0, y: 0 } + } }) /* eslint-disable no-new */ diff --git a/src/modules/statuses.js b/src/modules/statuses.js index a3031b31..734ffc8a 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -1,4 +1,4 @@ -import { remove, map, slice, sortBy, toInteger, each, find, flatten, maxBy, last, merge, max } from 'lodash' +import { remove, map, slice, sortBy, toInteger, each, find, flatten, maxBy, last, merge, max, isArray } from 'lodash' import moment from 'moment' import apiService from '../services/api/api.service.js' // import parse from '../services/status_parser/status_parser.js' @@ -100,11 +100,17 @@ const mergeOrAdd = (arr, item) => { } const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {} }) => { + // Sanity check + if (!isArray(statuses)) { + return false + } + const allStatuses = state.allStatuses const timelineObject = state.timelines[timeline] // Set the maxId to the new id if it's larger. const updateMaxId = ({id}) => { + if (!timeline) { return false } timelineObject.maxId = max([id, timelineObject.maxId]) } @@ -117,15 +123,15 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us } // Some statuses should only be added to the global status repository. - if (addToTimeline) { + if (timeline && addToTimeline) { mergeOrAdd(timelineObject.statuses, status) } - if (showImmediately) { + if (timeline && showImmediately) { // Add it directly to the visibleStatuses, don't change // newStatusCount mergeOrAdd(timelineObject.visibleStatuses, status) - } else if (addToTimeline && result.new) { + } else if (timeline && addToTimeline && result.new) { // Just change newStatuscount timelineObject.newStatusCount += 1 } @@ -159,7 +165,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us let retweet // If the retweeted status is already there, don't add the retweet // to the timeline. - if (find(timelineObject.visibleStatuses, {id: retweetedStatus.id})) { + if (timeline && find(timelineObject.visibleStatuses, {id: retweetedStatus.id})) { // Already have it visible, don't add to timeline, don't show. retweet = addStatus(status, false, false) } else { @@ -177,8 +183,10 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us updateMaxId(deletion) remove(allStatuses, { uri }) - remove(timelineObject.statuses, { uri }) - remove(timelineObject.visibleStatuses, { uri }) + if (timeline) { + remove(timelineObject.statuses, { uri }) + remove(timelineObject.visibleStatuses, { uri }) + } }, 'default': (unknown) => { console.log(unknown) @@ -192,9 +200,11 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us }) // Keep the visible statuses sorted - timelineObject.visibleStatuses = sortBy(timelineObject.visibleStatuses, ({id}) => -id) - timelineObject.statuses = sortBy(timelineObject.statuses, ({id}) => -id) - timelineObject.minVisibleId = (last(timelineObject.statuses) || {}).id + if (timeline) { + timelineObject.visibleStatuses = sortBy(timelineObject.visibleStatuses, ({id}) => -id) + timelineObject.statuses = sortBy(timelineObject.statuses, ({id}) => -id) + timelineObject.minVisibleId = (last(timelineObject.statuses) || {}).id + } } export const mutations = { @@ -228,7 +238,7 @@ export const mutations = { const statuses = { state: defaultState, actions: { - addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline }) { + addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false }) { commit('addNewStatuses', { statuses, showImmediately, timeline, user: rootState.users.currentUser }) }, favorite ({ rootState, commit }, status) { diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index d828aff0..87102376 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -7,18 +7,16 @@ const FAVORITE_URL = '/api/favorites/create' const UNFAVORITE_URL = '/api/favorites/destroy' const RETWEET_URL = '/api/statuses/retweet' 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 CONVERSATION_URL = '/api/statusnet/conversation' -// const FORM_CONTENT_TYPE = {'Content-Type': 'application/x-www-form-urlencoded'}; - -// import { param, ajax } from 'jquery'; -// import { merge } from 'lodash'; +const oldfetch = window.fetch let fetch = (url, options) => { const baseUrl = '' const fullUrl = baseUrl + url - return window.fetch(fullUrl, options) + return oldfetch(fullUrl, options) } const authHeaders = (user) => { @@ -29,6 +27,16 @@ const authHeaders = (user) => { } } +const fetchConversation = ({id}) => { + let url = `${CONVERSATION_URL}/${id}.json?count=100` + return fetch(url).then((data) => data.json()) +} + +const fetchStatus = ({id}) => { + let url = `${STATUS_URL}/${id}.json` + return fetch(url).then((data) => data.json()) +} + const fetchTimeline = ({timeline, credentials, since = false, until = false}) => { const timelineUrls = { public: PUBLIC_TIMELINE_URL, @@ -108,6 +116,8 @@ const uploadMedia = ({formData, credentials}) => { const apiService = { verifyCredentials, fetchTimeline, + fetchConversation, + fetchStatus, favorite, unfavorite, retweet, |
