From cc00eb898fe05a023979fe30cbc4c2490994bbfd Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 28 Nov 2016 17:37:47 +0100 Subject: [PATCH] Switch from moment.js to vue-timeago. Much smaller filesize for vendor.js, although we'll have to see if all the intervals are ok. --- package.json | 2 +- src/components/conversation/conversation.js | 1 - src/components/mentions/mentions.js | 4 ++-- src/components/status/status.vue | 2 +- src/main.js | 8 ++++++++ src/modules/statuses.js | 19 +------------------ .../timeline_fetcher.service.js | 2 -- yarn.lock | 8 ++++---- 8 files changed, 17 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 2388ade8..b5163e82 100644 --- a/package.json +++ b/package.json @@ -15,12 +15,12 @@ "dependencies": { "diff": "^3.0.1", "karma-mocha-reporter": "^2.2.1", - "moment": "^2.15.2", "node-sass": "^3.10.1", "sanitize-html": "^1.13.0", "sass-loader": "^4.0.2", "vue": "^2.0.1", "vue-router": "^2.0.1", + "vue-timeago": "^3.1.2", "vuex": "^2.0.0" }, "devDependencies": { diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 3b9cdbf7..ab804ce6 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -36,7 +36,6 @@ const conversation = { const conversationId = this.status.statusnet_conversation_id this.$store.state.api.backendInteractor.fetchConversation({id: conversationId}) .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses })) - .then(() => this.$store.commit('updateTimestamps')) } else { const id = this.$route.params.id this.$store.state.api.backendInteractor.fetchStatus({id}) diff --git a/src/components/mentions/mentions.js b/src/components/mentions/mentions.js index 3563101b..e84d1912 100644 --- a/src/components/mentions/mentions.js +++ b/src/components/mentions/mentions.js @@ -1,6 +1,6 @@ import Status from '../status/status.vue' // Temporary -import { prepareStatus, updateTimestampsInStatuses } from '../../modules/statuses.js' +import { prepareStatus } from '../../modules/statuses.js' import { map } from 'lodash' const Mentions = { @@ -20,7 +20,7 @@ const Mentions = { created () { this.$store.state.api.backendInteractor.fetchMentions({username: this.username}) .then((mentions) => { - this.mentions = updateTimestampsInStatuses(map(mentions, prepareStatus)) + this.mentions = map(mentions, prepareStatus) }) } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 8907937d..bcaa5df0 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -23,7 +23,7 @@ - - {{status.created_at_parsed}} + diff --git a/src/main.js b/src/main.js index 9196c5f6..4c743703 100644 --- a/src/main.js +++ b/src/main.js @@ -12,8 +12,16 @@ import statusesModule from './modules/statuses.js' import usersModule from './modules/users.js' import apiModule from './modules/api.js' +import VueTimeago from 'vue-timeago' + Vue.use(Vuex) Vue.use(VueRouter) +Vue.use(VueTimeago, { + locale: 'en-US', + locales: { + 'en-US': require('vue-timeago/locales/en-US.json') + } +}) const store = new Vuex.Store({ modules: { diff --git a/src/modules/statuses.js b/src/modules/statuses.js index 569569f8..5d604f0d 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -1,5 +1,4 @@ -import { remove, map, slice, sortBy, toInteger, each, find, flatten, maxBy, last, merge, max, isArray } from 'lodash' -import moment from 'moment' +import { remove, slice, sortBy, toInteger, each, find, flatten, maxBy, last, merge, max, isArray } from 'lodash' import apiService from '../services/api/api.service.js' // import parse from '../services/status_parser/status_parser.js' @@ -46,22 +45,9 @@ export const prepareStatus = (status) => { status.nsfw = !!status.text.match(nsfwRegex) } - // Set created_at_parsed to initial value - status.created_at_parsed = status.created_at - return status } -export const updateTimestampsInStatuses = (statuses) => { - return map(statuses, (statusoid) => { - const status = statusoid.retweeted_status || statusoid - - // Parse date - status.created_at_parsed = moment(status.created_at).fromNow() - return status - }) -} - export const statusType = (status) => { if (status.is_post_verb) { return 'status' @@ -236,9 +222,6 @@ export const mutations = { oldTimeline.newStatusCount = 0 oldTimeline.visibleStatuses = slice(oldTimeline.statuses, 0, 50) }, - updateTimestamps (state) { - updateTimestampsInStatuses(state.allStatuses) - }, setFavorited (state, { status, value }) { const newStatus = find(state.allStatuses, status) newStatus.favorited = value diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js index 5e64d0db..0d4ffcad 100644 --- a/src/services/timeline_fetcher/timeline_fetcher.service.js +++ b/src/services/timeline_fetcher/timeline_fetcher.service.js @@ -10,8 +10,6 @@ const update = ({store, statuses, timeline, showImmediately}) => { statuses, showImmediately }) - - store.commit('updateTimestamps') } const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => { diff --git a/yarn.lock b/yarn.lock index dad4e220..d7fc2fec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3769,10 +3769,6 @@ mocha@^3.1.0: mkdirp "0.5.1" supports-color "3.1.2" -moment: - version "2.15.2" - resolved "https://registry.yarnpkg.com/moment/-/moment-2.15.2.tgz#1bfdedf6a6e345f322fe956d5df5bd08a8ce84dc" - ms@0.7.1: version "0.7.1" resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098" @@ -5718,6 +5714,10 @@ vue-template-es2015-compiler@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.0.0.tgz#89add11c41224059c839ef0b9484e97a7f98abc5" +vue-timeago: + version "3.1.2" + resolved "https://registry.yarnpkg.com/vue-timeago/-/vue-timeago-3.1.2.tgz#bdd79613c0cf5192128b8921c3f332bbc3a513f1" + vue@^2.0.1: version "2.0.3" resolved "https://registry.yarnpkg.com/vue/-/vue-2.0.3.tgz#3f7698f83d6ad1f0e35955447901672876c63fde"