From 2d914c331eea5f5b9036e10ef3d937628891b9e1 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 2 Sep 2020 20:40:47 +0300 Subject: replace setInterval for timelne, notifications and follow requests --- src/services/fetcher/fetcher.js | 23 ++++++++++++++++++++++ .../follow_request_fetcher.service.js | 4 ++-- .../notifications_fetcher.service.js | 7 ++++--- .../timeline_fetcher/timeline_fetcher.service.js | 7 ++++--- 4 files changed, 33 insertions(+), 8 deletions(-) create mode 100644 src/services/fetcher/fetcher.js (limited to 'src/services') diff --git a/src/services/fetcher/fetcher.js b/src/services/fetcher/fetcher.js new file mode 100644 index 00000000..1d9239cc --- /dev/null +++ b/src/services/fetcher/fetcher.js @@ -0,0 +1,23 @@ + +export const makeFetcher = (call, interval) => { + let stopped = false + let timeout = null + let func = () => {} + + func = () => { + call().finally(() => { + console.log('callbacks') + if (stopped) return + timeout = window.setTimeout(func, interval) + }) + } + + const stopFetcher = () => { + stopped = true + window.cancelTimeout(timeout) + } + + func() + + return stopFetcher +} diff --git a/src/services/follow_request_fetcher/follow_request_fetcher.service.js b/src/services/follow_request_fetcher/follow_request_fetcher.service.js index 93fac9bc..8d1aba7b 100644 --- a/src/services/follow_request_fetcher/follow_request_fetcher.service.js +++ b/src/services/follow_request_fetcher/follow_request_fetcher.service.js @@ -1,4 +1,5 @@ import apiService from '../api/api.service.js' +import { makeFetcher } from '../fetcher/fetcher.js' const fetchAndUpdate = ({ store, credentials }) => { return apiService.fetchFollowRequests({ credentials }) @@ -10,9 +11,8 @@ const fetchAndUpdate = ({ store, credentials }) => { } const startFetching = ({ credentials, store }) => { - fetchAndUpdate({ credentials, store }) const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store }) - return setInterval(boundFetchAndUpdate, 10000) + return makeFetcher(boundFetchAndUpdate, 10000) } const followRequestFetcher = { diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js index 80be02ca..2a3a17be 100644 --- a/src/services/notifications_fetcher/notifications_fetcher.service.js +++ b/src/services/notifications_fetcher/notifications_fetcher.service.js @@ -1,4 +1,5 @@ import apiService from '../api/api.service.js' +import makeFetcher from '../fetcher/fetcher.js' const update = ({ store, notifications, older }) => { store.dispatch('setNotificationsError', { value: false }) @@ -39,6 +40,7 @@ const fetchAndUpdate = ({ store, credentials, older = false }) => { args['since'] = Math.max(...readNotifsIds) fetchNotifications({ store, args, older }) } + return result } } @@ -53,13 +55,12 @@ const fetchNotifications = ({ store, args, older }) => { } const startFetching = ({ credentials, store }) => { - fetchAndUpdate({ credentials, store }) - const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store }) // Initially there's set flag to silence all desktop notifications so // that there won't spam of them when user just opened up the FE we // reset that flag after a while to show new notifications once again. setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000) - return setInterval(boundFetchAndUpdate, 10000) + const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store, refetch: true }) + return makeFetcher(boundFetchAndUpdate, 10000) } const notificationsFetcher = { diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js index d0cddf84..8bbec2c7 100644 --- a/src/services/timeline_fetcher/timeline_fetcher.service.js +++ b/src/services/timeline_fetcher/timeline_fetcher.service.js @@ -1,6 +1,7 @@ import { camelCase } from 'lodash' import apiService from '../api/api.service.js' +import { makeFetcher } from '../fetcher/fetcher.js' const update = ({ store, statuses, timeline, showImmediately, userId, pagination }) => { const ccTimeline = camelCase(timeline) @@ -70,9 +71,9 @@ const startFetching = ({ timeline = 'friends', credentials, store, userId = fals const timelineData = rootState.statuses.timelines[camelCase(timeline)] const showImmediately = timelineData.visibleStatuses.length === 0 timelineData.userId = userId - fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag }) - const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag }) - return setInterval(boundFetchAndUpdate, 10000) + const boundFetchAndUpdate = () => + fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag }) + return makeFetcher(boundFetchAndUpdate, 10000) } const timelineFetcher = { fetchAndUpdate, -- cgit v1.2.3-70-g09d2 From 1b6eee049700f6fbb0c2e43877ead3ef4cf3041b Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 2 Sep 2020 21:01:31 +0300 Subject: change chats to use custom makeFetcher --- src/components/chat/chat.js | 5 +++-- src/modules/chats.js | 11 +++++------ src/services/fetcher/fetcher.js | 3 +-- .../notifications_fetcher/notifications_fetcher.service.js | 2 +- 4 files changed, 10 insertions(+), 11 deletions(-) (limited to 'src/services') diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index 9c4e5b05..2062643d 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -5,6 +5,7 @@ import ChatMessage from '../chat_message/chat_message.vue' import PostStatusForm from '../post_status_form/post_status_form.vue' import ChatTitle from '../chat_title/chat_title.vue' import chatService from '../../services/chat_service/chat_service.js' +import { makeFetcher } from '../../services/fetcher/fetcher.js' import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js' const BOTTOMED_OUT_OFFSET = 10 @@ -246,7 +247,7 @@ const Chat = { const fetchOlderMessages = !!maxId const sinceId = fetchLatest && chatMessageService.lastMessage && chatMessageService.lastMessage.id - this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId }) + return this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId }) .then((messages) => { // Clear the current chat in case we're recovering from a ws connection loss. if (isFirstFetch) { @@ -287,7 +288,7 @@ const Chat = { }, doStartFetching () { this.$store.dispatch('startFetchingCurrentChat', { - fetcher: () => setInterval(() => this.fetchChat({ fetchLatest: true }), 5000) + fetcher: () => makeFetcher(() => this.fetchChat({ fetchLatest: true }), 5000) }) this.fetchChat({ isFirstFetch: true }) }, diff --git a/src/modules/chats.js b/src/modules/chats.js index c7609018..45e4bdcc 100644 --- a/src/modules/chats.js +++ b/src/modules/chats.js @@ -3,6 +3,7 @@ import { find, omitBy, orderBy, sumBy } from 'lodash' import chatService from '../services/chat_service/chat_service.js' import { parseChat, parseChatMessage } from '../services/entity_normalizer/entity_normalizer.service.js' import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js' +import { makeFetcher } from '../services/fetcher/fetcher.js' const emptyChatList = () => ({ data: [], @@ -42,12 +43,10 @@ const chats = { actions: { // Chat list startFetchingChats ({ dispatch, commit }) { - const fetcher = () => { - dispatch('fetchChats', { latest: true }) - } + const fetcher = () => dispatch('fetchChats', { latest: true }) fetcher() commit('setChatListFetcher', { - fetcher: () => setInterval(() => { fetcher() }, 5000) + fetcher: () => makeFetcher(fetcher, 5000) }) }, stopFetchingChats ({ commit }) { @@ -113,14 +112,14 @@ const chats = { setChatListFetcher (state, { commit, fetcher }) { const prevFetcher = state.chatListFetcher if (prevFetcher) { - clearInterval(prevFetcher) + prevFetcher() } state.chatListFetcher = fetcher && fetcher() }, setCurrentChatFetcher (state, { fetcher }) { const prevFetcher = state.fetcher if (prevFetcher) { - clearInterval(prevFetcher) + prevFetcher() } state.fetcher = fetcher && fetcher() }, diff --git a/src/services/fetcher/fetcher.js b/src/services/fetcher/fetcher.js index 1d9239cc..95b8c9d3 100644 --- a/src/services/fetcher/fetcher.js +++ b/src/services/fetcher/fetcher.js @@ -6,7 +6,6 @@ export const makeFetcher = (call, interval) => { func = () => { call().finally(() => { - console.log('callbacks') if (stopped) return timeout = window.setTimeout(func, interval) }) @@ -14,7 +13,7 @@ export const makeFetcher = (call, interval) => { const stopFetcher = () => { stopped = true - window.cancelTimeout(timeout) + window.clearTimeout(timeout) } func() diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js index 2a3a17be..c69d5b17 100644 --- a/src/services/notifications_fetcher/notifications_fetcher.service.js +++ b/src/services/notifications_fetcher/notifications_fetcher.service.js @@ -1,5 +1,5 @@ import apiService from '../api/api.service.js' -import makeFetcher from '../fetcher/fetcher.js' +import { makeFetcher } from '../fetcher/fetcher.js' const update = ({ store, notifications, older }) => { store.dispatch('setNotificationsError', { value: false }) -- cgit v1.2.3-70-g09d2 From d939f2ffbcb632361a0362f0f2049f99160dee64 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 2 Sep 2020 21:08:06 +0300 Subject: document makeFetcher a bit --- src/services/fetcher/fetcher.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'src/services') diff --git a/src/services/fetcher/fetcher.js b/src/services/fetcher/fetcher.js index 95b8c9d3..5a6ed4b8 100644 --- a/src/services/fetcher/fetcher.js +++ b/src/services/fetcher/fetcher.js @@ -1,11 +1,17 @@ -export const makeFetcher = (call, interval) => { +// makeFetcher - replacement for setInterval for fetching, starts counting +// the interval only after a request is done instead of immediately. +// promiseCall is a function that returns a promise, it's called when created +// and after every interval. +// interval is the interval delay in ms. + +export const makeFetcher = (promiseCall, interval) => { let stopped = false let timeout = null let func = () => {} func = () => { - call().finally(() => { + promiseCall().finally(() => { if (stopped) return timeout = window.setTimeout(func, interval) }) -- cgit v1.2.3-70-g09d2 From 5b403ba7d13eaf851ae43e814c583ceb018e2d20 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 2 Sep 2020 22:12:50 +0300 Subject: fix timeline showimmediately being set wrongly --- src/services/fetcher/fetcher.js | 8 ++++---- .../follow_request_fetcher/follow_request_fetcher.service.js | 1 + .../notifications_fetcher/notifications_fetcher.service.js | 3 ++- src/services/timeline_fetcher/timeline_fetcher.service.js | 3 ++- 4 files changed, 9 insertions(+), 6 deletions(-) (limited to 'src/services') diff --git a/src/services/fetcher/fetcher.js b/src/services/fetcher/fetcher.js index 5a6ed4b8..aae1c2cc 100644 --- a/src/services/fetcher/fetcher.js +++ b/src/services/fetcher/fetcher.js @@ -1,9 +1,9 @@ // makeFetcher - replacement for setInterval for fetching, starts counting // the interval only after a request is done instead of immediately. -// promiseCall is a function that returns a promise, it's called when created -// and after every interval. -// interval is the interval delay in ms. +// - promiseCall is a function that returns a promise, it's called the first +// time after the first interval. +// - interval is the interval delay in ms. export const makeFetcher = (promiseCall, interval) => { let stopped = false @@ -22,7 +22,7 @@ export const makeFetcher = (promiseCall, interval) => { window.clearTimeout(timeout) } - func() + timeout = window.setTimeout(func, interval) return stopFetcher } diff --git a/src/services/follow_request_fetcher/follow_request_fetcher.service.js b/src/services/follow_request_fetcher/follow_request_fetcher.service.js index 8d1aba7b..bec434aa 100644 --- a/src/services/follow_request_fetcher/follow_request_fetcher.service.js +++ b/src/services/follow_request_fetcher/follow_request_fetcher.service.js @@ -12,6 +12,7 @@ const fetchAndUpdate = ({ store, credentials }) => { const startFetching = ({ credentials, store }) => { const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store }) + boundFetchAndUpdate() return makeFetcher(boundFetchAndUpdate, 10000) } diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js index c69d5b17..90988fc4 100644 --- a/src/services/notifications_fetcher/notifications_fetcher.service.js +++ b/src/services/notifications_fetcher/notifications_fetcher.service.js @@ -59,7 +59,8 @@ const startFetching = ({ credentials, store }) => { // that there won't spam of them when user just opened up the FE we // reset that flag after a while to show new notifications once again. setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000) - const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store, refetch: true }) + const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store }) + boundFetchAndUpdate() return makeFetcher(boundFetchAndUpdate, 10000) } diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js index 8bbec2c7..9f585f68 100644 --- a/src/services/timeline_fetcher/timeline_fetcher.service.js +++ b/src/services/timeline_fetcher/timeline_fetcher.service.js @@ -71,8 +71,9 @@ const startFetching = ({ timeline = 'friends', credentials, store, userId = fals const timelineData = rootState.statuses.timelines[camelCase(timeline)] const showImmediately = timelineData.visibleStatuses.length === 0 timelineData.userId = userId + fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag }) const boundFetchAndUpdate = () => - fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag }) + fetchAndUpdate({ timeline, credentials, store, userId, tag }) return makeFetcher(boundFetchAndUpdate, 10000) } const timelineFetcher = { -- cgit v1.2.3-70-g09d2 From 3fb35e8123d3a8cd151571b315b7ec4d7e0875c7 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Fri, 4 Sep 2020 11:19:53 +0300 Subject: rename to promiseInterval --- src/components/chat/chat.js | 4 ++-- src/modules/api.js | 2 +- src/modules/chats.js | 4 ++-- src/services/fetcher/fetcher.js | 28 ---------------------- .../follow_request_fetcher.service.js | 4 ++-- .../notifications_fetcher.service.js | 4 ++-- src/services/promise_interval/promise_interval.js | 28 ++++++++++++++++++++++ .../timeline_fetcher/timeline_fetcher.service.js | 4 ++-- 8 files changed, 39 insertions(+), 39 deletions(-) delete mode 100644 src/services/fetcher/fetcher.js create mode 100644 src/services/promise_interval/promise_interval.js (limited to 'src/services') diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index 2062643d..15123885 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -5,7 +5,7 @@ import ChatMessage from '../chat_message/chat_message.vue' import PostStatusForm from '../post_status_form/post_status_form.vue' import ChatTitle from '../chat_title/chat_title.vue' import chatService from '../../services/chat_service/chat_service.js' -import { makeFetcher } from '../../services/fetcher/fetcher.js' +import { promiseInterval } from '../../services/promise_interval/promise_interval.js' import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js' const BOTTOMED_OUT_OFFSET = 10 @@ -288,7 +288,7 @@ const Chat = { }, doStartFetching () { this.$store.dispatch('startFetchingCurrentChat', { - fetcher: () => makeFetcher(() => this.fetchChat({ fetchLatest: true }), 5000) + fetcher: () => promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000) }) this.fetchChat({ isFirstFetch: true }) }, diff --git a/src/modules/api.js b/src/modules/api.js index 7ddd8dde..73511442 100644 --- a/src/modules/api.js +++ b/src/modules/api.js @@ -20,7 +20,7 @@ const api = { state.fetchers[fetcherName] = fetcher }, removeFetcher (state, { fetcherName, fetcher }) { - state.fetchers[fetcherName]() + state.fetchers[fetcherName].stop() delete state.fetchers[fetcherName] }, setWsToken (state, token) { diff --git a/src/modules/chats.js b/src/modules/chats.js index 45e4bdcc..60273a44 100644 --- a/src/modules/chats.js +++ b/src/modules/chats.js @@ -3,7 +3,7 @@ import { find, omitBy, orderBy, sumBy } from 'lodash' import chatService from '../services/chat_service/chat_service.js' import { parseChat, parseChatMessage } from '../services/entity_normalizer/entity_normalizer.service.js' import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js' -import { makeFetcher } from '../services/fetcher/fetcher.js' +import { promiseInterval } from '../services/promise_interval/promise_interval.js' const emptyChatList = () => ({ data: [], @@ -46,7 +46,7 @@ const chats = { const fetcher = () => dispatch('fetchChats', { latest: true }) fetcher() commit('setChatListFetcher', { - fetcher: () => makeFetcher(fetcher, 5000) + fetcher: () => promiseInterval(fetcher, 5000) }) }, stopFetchingChats ({ commit }) { diff --git a/src/services/fetcher/fetcher.js b/src/services/fetcher/fetcher.js deleted file mode 100644 index aae1c2cc..00000000 --- a/src/services/fetcher/fetcher.js +++ /dev/null @@ -1,28 +0,0 @@ - -// makeFetcher - replacement for setInterval for fetching, starts counting -// the interval only after a request is done instead of immediately. -// - promiseCall is a function that returns a promise, it's called the first -// time after the first interval. -// - interval is the interval delay in ms. - -export const makeFetcher = (promiseCall, interval) => { - let stopped = false - let timeout = null - let func = () => {} - - func = () => { - promiseCall().finally(() => { - if (stopped) return - timeout = window.setTimeout(func, interval) - }) - } - - const stopFetcher = () => { - stopped = true - window.clearTimeout(timeout) - } - - timeout = window.setTimeout(func, interval) - - return stopFetcher -} diff --git a/src/services/follow_request_fetcher/follow_request_fetcher.service.js b/src/services/follow_request_fetcher/follow_request_fetcher.service.js index bec434aa..74af4081 100644 --- a/src/services/follow_request_fetcher/follow_request_fetcher.service.js +++ b/src/services/follow_request_fetcher/follow_request_fetcher.service.js @@ -1,5 +1,5 @@ import apiService from '../api/api.service.js' -import { makeFetcher } from '../fetcher/fetcher.js' +import { promiseInterval } from '../promise_interval/promise_interval.js' const fetchAndUpdate = ({ store, credentials }) => { return apiService.fetchFollowRequests({ credentials }) @@ -13,7 +13,7 @@ const fetchAndUpdate = ({ store, credentials }) => { const startFetching = ({ credentials, store }) => { const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store }) boundFetchAndUpdate() - return makeFetcher(boundFetchAndUpdate, 10000) + return promiseInterval(boundFetchAndUpdate, 10000) } const followRequestFetcher = { diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js index 90988fc4..c908b644 100644 --- a/src/services/notifications_fetcher/notifications_fetcher.service.js +++ b/src/services/notifications_fetcher/notifications_fetcher.service.js @@ -1,5 +1,5 @@ import apiService from '../api/api.service.js' -import { makeFetcher } from '../fetcher/fetcher.js' +import { promiseInterval } from '../promise_interval/promise_interval.js' const update = ({ store, notifications, older }) => { store.dispatch('setNotificationsError', { value: false }) @@ -61,7 +61,7 @@ const startFetching = ({ credentials, store }) => { setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000) const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store }) boundFetchAndUpdate() - return makeFetcher(boundFetchAndUpdate, 10000) + return promiseInterval(boundFetchAndUpdate, 10000) } const notificationsFetcher = { diff --git a/src/services/promise_interval/promise_interval.js b/src/services/promise_interval/promise_interval.js new file mode 100644 index 00000000..ee46a236 --- /dev/null +++ b/src/services/promise_interval/promise_interval.js @@ -0,0 +1,28 @@ + +// promiseInterval - replacement for setInterval for promises, starts counting +// the interval only after a promise is done instead of immediately. +// - promiseCall is a function that returns a promise, it's called the first +// time after the first interval. +// - interval is the interval delay in ms. + +export const promiseInterval = (promiseCall, interval) => { + let stopped = false + let timeout = null + let func = () => {} + + func = () => { + promiseCall().finally(() => { + if (stopped) return + timeout = window.setTimeout(func, interval) + }) + } + + const stopFetcher = () => { + stopped = true + window.clearTimeout(timeout) + } + + timeout = window.setTimeout(func, interval) + + return { stop: stopFetcher } +} diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js index 9f585f68..72ea4890 100644 --- a/src/services/timeline_fetcher/timeline_fetcher.service.js +++ b/src/services/timeline_fetcher/timeline_fetcher.service.js @@ -1,7 +1,7 @@ import { camelCase } from 'lodash' import apiService from '../api/api.service.js' -import { makeFetcher } from '../fetcher/fetcher.js' +import { promiseInterval } from '../promise_interval/promise_interval.js' const update = ({ store, statuses, timeline, showImmediately, userId, pagination }) => { const ccTimeline = camelCase(timeline) @@ -74,7 +74,7 @@ const startFetching = ({ timeline = 'friends', credentials, store, userId = fals fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag }) const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag }) - return makeFetcher(boundFetchAndUpdate, 10000) + return promiseInterval(boundFetchAndUpdate, 10000) } const timelineFetcher = { fetchAndUpdate, -- cgit v1.2.3-70-g09d2 From c89ac79140e059f89d4da88ce49c9bb24db4cc20 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Fri, 4 Sep 2020 11:22:14 +0300 Subject: fix chat fetcher stops, change fetcher code --- src/modules/chats.js | 4 ++-- src/services/promise_interval/promise_interval.js | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) (limited to 'src/services') diff --git a/src/modules/chats.js b/src/modules/chats.js index 60273a44..8e2fabb6 100644 --- a/src/modules/chats.js +++ b/src/modules/chats.js @@ -112,14 +112,14 @@ const chats = { setChatListFetcher (state, { commit, fetcher }) { const prevFetcher = state.chatListFetcher if (prevFetcher) { - prevFetcher() + prevFetcher.stop() } state.chatListFetcher = fetcher && fetcher() }, setCurrentChatFetcher (state, { fetcher }) { const prevFetcher = state.fetcher if (prevFetcher) { - prevFetcher() + prevFetcher.stop() } state.fetcher = fetcher && fetcher() }, diff --git a/src/services/promise_interval/promise_interval.js b/src/services/promise_interval/promise_interval.js index ee46a236..cf17970d 100644 --- a/src/services/promise_interval/promise_interval.js +++ b/src/services/promise_interval/promise_interval.js @@ -8,9 +8,8 @@ export const promiseInterval = (promiseCall, interval) => { let stopped = false let timeout = null - let func = () => {} - func = () => { + const func = () => { promiseCall().finally(() => { if (stopped) return timeout = window.setTimeout(func, interval) -- cgit v1.2.3-70-g09d2 From 947d7cd6f285c7c683b92f79d9d2c08dd2131f5d Mon Sep 17 00:00:00 2001 From: Maksim Pechnikov Date: Mon, 7 Sep 2020 14:27:37 +0300 Subject: added import/export mutes --- local.json | 4 ---- .../settings_modal/tabs/data_import_export_tab.js | 28 ++++++++++++++++------ .../settings_modal/tabs/data_import_export_tab.vue | 17 +++++++++++++ src/i18n/en.json | 6 +++++ src/services/api/api.service.js | 13 ++++++++++ 5 files changed, 57 insertions(+), 11 deletions(-) delete mode 100644 local.json (limited to 'src/services') diff --git a/local.json b/local.json deleted file mode 100644 index e9f4df0b..00000000 --- a/local.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "target": "https://aqueous-sea-10253.herokuapp.com/", - "staticConfigPreference": false -} diff --git a/src/components/settings_modal/tabs/data_import_export_tab.js b/src/components/settings_modal/tabs/data_import_export_tab.js index 168f89e1..f4b736d2 100644 --- a/src/components/settings_modal/tabs/data_import_export_tab.js +++ b/src/components/settings_modal/tabs/data_import_export_tab.js @@ -1,6 +1,7 @@ import Importer from 'src/components/importer/importer.vue' import Exporter from 'src/components/exporter/exporter.vue' import Checkbox from 'src/components/checkbox/checkbox.vue' +import { mapState } from 'vuex' const DataImportExportTab = { data () { @@ -18,21 +19,26 @@ const DataImportExportTab = { Checkbox }, computed: { - user () { - return this.$store.state.users.currentUser - } + ...mapState({ + backendInteractor: (state) => state.api.backendInteractor, + user: (state) => state.users.currentUser + }) }, methods: { getFollowsContent () { - return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id }) + return this.backendInteractor.exportFriends({ id: this.user.id }) .then(this.generateExportableUsersContent) }, getBlocksContent () { - return this.$store.state.api.backendInteractor.fetchBlocks() + return this.backendInteractor.fetchBlocks() + .then(this.generateExportableUsersContent) + }, + getMutesContent () { + return this.backendInteractor.fetchMutes() .then(this.generateExportableUsersContent) }, importFollows (file) { - return this.$store.state.api.backendInteractor.importFollows({ file }) + return this.backendInteractor.importFollows({ file }) .then((status) => { if (!status) { throw new Error('failed') @@ -40,7 +46,15 @@ const DataImportExportTab = { }) }, importBlocks (file) { - return this.$store.state.api.backendInteractor.importBlocks({ file }) + return this.backendInteractor.importBlocks({ file }) + .then((status) => { + if (!status) { + throw new Error('failed') + } + }) + }, + importMutes (file) { + return this.backendInteractor.importMutes({ file }) .then((status) => { if (!status) { throw new Error('failed') diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue index b5d0f5ed..a406077d 100644 --- a/src/components/settings_modal/tabs/data_import_export_tab.vue +++ b/src/components/settings_modal/tabs/data_import_export_tab.vue @@ -36,6 +36,23 @@ :export-button-label="$t('settings.block_export_button')" /> +
+

{{ $t('settings.mute_import') }}

+

{{ $t('settings.import_mutes_from_a_csv_file') }}

+ +
+
+

{{ $t('settings.mute_export') }}

+ +
diff --git a/src/i18n/en.json b/src/i18n/en.json index 8540f551..cf0a7e7c 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -276,6 +276,12 @@ "block_import": "Block import", "block_import_error": "Error importing blocks", "blocks_imported": "Blocks imported! Processing them will take a while.", + "mute_export": "Mute export", + "mute_export_button": "Export your mutes to a csv file", + "mute_import": "Mute import", + "mute_import_error": "Error importing mutes", + "mutes_imported": "Mutes imported! Processing them will take a while.", + "import_mutes_from_a_csv_file": "Import mutes from a csv file", "blocks_tab": "Blocks", "bot": "This is a bot account", "btnRadius": "Buttons", diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index da519001..34f86f93 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -3,6 +3,7 @@ import { parseStatus, parseUser, parseNotification, parseAttachment, parseChat, import { RegistrationError, StatusCodeError } from '../errors/errors' /* eslint-env browser */ +const MUTES_IMPORT_URL = '/api/pleroma/mutes_import' const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import' const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import' const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account' @@ -710,6 +711,17 @@ const setMediaDescription = ({ id, description, credentials }) => { }).then((data) => parseAttachment(data)) } +const importMutes = ({ file, credentials }) => { + const formData = new FormData() + formData.append('list', file) + return fetch(MUTES_IMPORT_URL, { + body: formData, + method: 'POST', + headers: authHeaders(credentials) + }) + .then((response) => response.ok) +} + const importBlocks = ({ file, credentials }) => { const formData = new FormData() formData.append('list', file) @@ -1280,6 +1292,7 @@ const apiService = { getCaptcha, updateProfileImages, updateProfile, + importMutes, importBlocks, importFollows, deleteAccount, -- cgit v1.2.3-70-g09d2 From f174f289a93e6bef1182a2face00bb809da49d18 Mon Sep 17 00:00:00 2001 From: Shpuld Shpludson Date: Tue, 29 Sep 2020 10:18:37 +0000 Subject: Timeline virtual scrolling --- CHANGELOG.md | 3 + src/components/attachment/attachment.vue | 4 ++ src/components/conversation/conversation.js | 20 ++++++- src/components/conversation/conversation.vue | 11 +++- src/components/react_button/react_button.js | 5 +- src/components/retweet_button/retweet_button.js | 5 +- src/components/settings_modal/tabs/general_tab.vue | 5 ++ src/components/status/status.js | 31 ++++++++--- src/components/status/status.scss | 5 ++ src/components/status/status.vue | 7 ++- src/components/status_content/status_content.vue | 2 + src/components/still-image/still-image.js | 10 ++-- src/components/timeline/timeline.js | 64 +++++++++++++++++++++- src/components/timeline/timeline.vue | 6 +- .../video_attachment/video_attachment.js | 47 +++++++++++----- .../video_attachment/video_attachment.vue | 3 +- src/i18n/en.json | 1 + src/modules/config.js | 3 +- src/modules/instance.js | 1 + src/modules/statuses.js | 6 ++ src/services/api/api.service.js | 2 + 21 files changed, 203 insertions(+), 38 deletions(-) (limited to 'src/services') diff --git a/CHANGELOG.md b/CHANGELOG.md index 18dafa8e..eebc7115 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [Unreleased] +### Added +- New option to optimize timeline rendering to make the site more responsive (enabled by default) + ## [Unreleased patch] ### Changed diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 63e0ceba..7fabc963 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -80,6 +80,8 @@ class="video" :attachment="attachment" :controls="allowPlay" + @play="$emit('play')" + @pause="$emit('pause')" />
@@ -18,6 +20,7 @@
+
@@ -53,8 +60,8 @@ .conversation-status { border-color: $fallback--border; border-color: var(--border, $fallback--border); - border-left: 4px solid $fallback--cRed; - border-left: 4px solid var(--cRed, $fallback--cRed); + border-left-color: $fallback--cRed; + border-left-color: var(--cRed, $fallback--cRed); } .conversation-status:last-child { diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index abcf0455..11627e9c 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -1,5 +1,4 @@ import Popover from '../popover/popover.vue' -import { mapGetters } from 'vuex' const ReactButton = { props: ['status'], @@ -35,7 +34,9 @@ const ReactButton = { } return this.$store.state.instance.emoji || [] }, - ...mapGetters(['mergedConfig']) + mergedConfig () { + return this.$store.getters.mergedConfig + } } } diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js index d9a0f92e..5a41f22d 100644 --- a/src/components/retweet_button/retweet_button.js +++ b/src/components/retweet_button/retweet_button.js @@ -1,4 +1,3 @@ -import { mapGetters } from 'vuex' const RetweetButton = { props: ['status', 'loggedIn', 'visibility'], @@ -28,7 +27,9 @@ const RetweetButton = { 'animate-spin': this.animated } }, - ...mapGetters(['mergedConfig']) + mergedConfig () { + return this.$store.getters.mergedConfig + } } } diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 7f06d0bd..13482de7 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -58,6 +58,11 @@ {{ $t('settings.emoji_reactions_on_timeline') }} +
  • + + {{ $t('settings.virtual_scrolling') }} + +
    • diff --git a/src/components/status/status.js b/src/components/status/status.js index d263da68..cd6e2f72 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -15,7 +15,6 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { muteWordHits } from '../../services/status_parser/status_parser.js' import { unescape, uniqBy } from 'lodash' -import { mapGetters, mapState } from 'vuex' const Status = { name: 'Status', @@ -54,6 +53,8 @@ const Status = { replying: false, unmuted: false, userExpanded: false, + mediaPlaying: [], + suspendable: true, error: null } }, @@ -157,7 +158,7 @@ const Status = { return this.mergedConfig.hideFilteredStatuses }, hideStatus () { - return this.deleted || (this.muted && this.hideFilteredStatuses) + return this.deleted || (this.muted && this.hideFilteredStatuses) || this.virtualHidden }, isFocused () { // retweet or root of an expanded conversation @@ -207,11 +208,18 @@ const Status = { hidePostStats () { return this.mergedConfig.hidePostStats }, - ...mapGetters(['mergedConfig']), - ...mapState({ - betterShadow: state => state.interface.browserSupport.cssFilter, - currentUser: state => state.users.currentUser - }) + currentUser () { + return this.$store.state.users.currentUser + }, + betterShadow () { + return this.$store.state.interface.browserSupport.cssFilter + }, + mergedConfig () { + return this.$store.getters.mergedConfig + }, + isSuspendable () { + return !this.replying && this.mediaPlaying.length === 0 + } }, methods: { visibilityIcon (visibility) { @@ -251,6 +259,12 @@ const Status = { }, generateUserProfileLink (id, name) { return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames) + }, + addMediaPlaying (id) { + this.mediaPlaying.push(id) + }, + removeMediaPlaying (id) { + this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id) } }, watch: { @@ -280,6 +294,9 @@ const Status = { if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) { this.$store.dispatch('fetchFavs', this.status.id) } + }, + 'isSuspendable': function (val) { + this.suspendable = val } }, filters: { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 8d292d3f..c92d870b 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -25,6 +25,11 @@ $status-margin: 0.75em; --icon: var(--selectedPostIcon, $fallback--icon); } + &.-conversation { + border-left-width: 4px; + border-left-style: solid; + } + .status-container { display: flex; padding: $status-margin; diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 282ad37d..aa67e433 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -16,7 +16,7 @@ />
    diff --git a/src/i18n/en.json b/src/i18n/en.json index 8540f551..8d831e3d 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -430,6 +430,7 @@ "false": "no", "true": "yes" }, + "virtual_scrolling": "Optimize timeline rendering", "fun": "Fun", "greentext": "Meme arrows", "notifications": "Notifications", diff --git a/src/modules/config.js b/src/modules/config.js index 409d77a4..444b8ec7 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -65,7 +65,8 @@ export const defaultState = { useContainFit: false, greentext: undefined, // instance default hidePostStats: undefined, // instance default - hideUserStats: undefined // instance default + hideUserStats: undefined, // instance default + virtualScrolling: undefined // instance default } // caching the instance default properties diff --git a/src/modules/instance.js b/src/modules/instance.js index 3fe3bbf3..b3cbffc6 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -41,6 +41,7 @@ const defaultState = { sidebarRight: false, subjectLineBehavior: 'email', theme: 'pleroma-dark', + virtualScrolling: true, // Nasty stuff customEmoji: [], diff --git a/src/modules/statuses.js b/src/modules/statuses.js index e108b2a7..155cc4b9 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -568,6 +568,9 @@ export const mutations = { updateStatusWithPoll (state, { id, poll }) { const status = state.allStatusesObject[id] status.poll = poll + }, + setVirtualHeight (state, { statusId, height }) { + state.allStatusesObject[statusId].virtualHeight = height } } @@ -753,6 +756,9 @@ const statuses = { store.commit('addNewStatuses', { statuses: data.statuses }) return data }) + }, + setVirtualHeight ({ commit }, { statusId, height }) { + commit('setVirtualHeight', { statusId, height }) } }, mutations diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index da519001..d1842e17 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -539,8 +539,10 @@ const fetchTimeline = ({ const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&') url += `?${queryString}` + let status = '' let statusText = '' + let pagination = {} return fetch(url, { headers: authHeaders(credentials) }) .then((data) => { -- cgit v1.2.3-70-g09d2 From 2c441c79225e1f4412eee4300820f57c4ef5f4fc Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 27 Oct 2020 10:03:04 +0200 Subject: fix back button size, fix missing chat notifications being marked as read too eagerly, fix promiseinterval erroring when not getting a promise --- src/components/chat/chat.js | 14 ++++++++++---- src/components/chat/chat.scss | 11 ++++++----- src/services/chat_utils/chat_utils.js | 2 +- src/services/promise_interval/promise_interval.js | 9 ++++++++- 4 files changed, 25 insertions(+), 11 deletions(-) (limited to 'src/services') diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index 34e723d0..681ba08f 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -11,6 +11,7 @@ import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContaine const BOTTOMED_OUT_OFFSET = 10 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150 const SAFE_RESIZE_TIME_OFFSET = 100 +const MARK_AS_READ_DELAY = 1500 const Chat = { components: { @@ -94,7 +95,7 @@ const Chat = { const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET) this.$nextTick(() => { if (bottomedOutBeforeUpdate) { - this.scrollDown({ forceRead: !document.hidden }) + this.scrollDown() } }) }, @@ -200,7 +201,7 @@ const Chat = { this.$nextTick(() => { scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior }) }) - if (forceRead || this.newMessageCount > 0) { + if (forceRead) { this.readChat() } }, @@ -225,12 +226,17 @@ const Chat = { } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) { this.jumpToBottomButtonVisible = false if (this.newMessageCount > 0) { - this.readChat() + // Use a delay before marking as read to prevent situation where new messages + // arrive just as you're leaving the view and messages that you didn't actually + // get to see get marked as read. + window.setTimeout(() => { + if (this.$el) this.readChat() + }, MARK_AS_READ_DELAY) } } else { this.jumpToBottomButtonVisible = true } - }, 100), + }, 200), handleScrollUp (positionBeforeLoading) { const positionAfterLoading = getScrollPosition(this.$refs.scrollable) this.$refs.scrollable.scrollTo({ diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index 012a1b1d..f91de618 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -25,7 +25,7 @@ min-height: 100%; margin: 0 0 0 0; border-radius: 10px 10px 0 0; - border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ; + border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0; &::after { border-radius: 0; @@ -58,11 +58,12 @@ .go-back-button { cursor: pointer; - margin-right: 1.4em; + padding: 0.6em; + margin: -0.6em 0.8em -0.6em -0.6em; + height: 100%; i { - display: flex; - align-items: center; + vertical-align: middle; } } @@ -78,7 +79,7 @@ display: flex; justify-content: center; align-items: center; - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3); z-index: 10; transition: 0.35s all; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); diff --git a/src/services/chat_utils/chat_utils.js b/src/services/chat_utils/chat_utils.js index 583438f7..86fe1af9 100644 --- a/src/services/chat_utils/chat_utils.js +++ b/src/services/chat_utils/chat_utils.js @@ -3,7 +3,7 @@ import { showDesktopNotification } from '../desktop_notification_utils/desktop_n export const maybeShowChatNotification = (store, chat) => { if (!chat.lastMessage) return if (store.rootState.chats.currentChatId === chat.id && !document.hidden) return - if (store.rootState.users.currentUser.id === chat.lastMessage.account.id) return + if (store.rootState.users.currentUser.id === chat.lastMessage.account_id) return const opts = { tag: chat.lastMessage.id, diff --git a/src/services/promise_interval/promise_interval.js b/src/services/promise_interval/promise_interval.js index cf17970d..0c0a66a0 100644 --- a/src/services/promise_interval/promise_interval.js +++ b/src/services/promise_interval/promise_interval.js @@ -10,7 +10,14 @@ export const promiseInterval = (promiseCall, interval) => { let timeout = null const func = () => { - promiseCall().finally(() => { + const promise = promiseCall() + // something unexpected happened and promiseCall did not + // return a promise, abort the loop. + if (!(promise && promise.finally)) { + console.warn('promiseInterval: promise call did not return a promise, stopping interval.') + return + } + promise.finally(() => { if (stopped) return timeout = window.setTimeout(func, interval) }) -- cgit v1.2.3-70-g09d2 From e798e9a4177f025dda2b40d109fa40c2ebfd814e Mon Sep 17 00:00:00 2001 From: eugenijm Date: Thu, 29 Oct 2020 13:33:06 +0300 Subject: Optimistic message sending for chat --- src/components/chat/chat.js | 76 ++++++++++++++++------ src/components/chat/chat.vue | 1 + src/components/chat_message/chat_message.scss | 13 ++++ src/components/chat_message/chat_message.vue | 2 +- .../post_status_form/post_status_form.js | 7 +- .../post_status_form/post_status_form.vue | 4 +- src/modules/api.js | 18 +++-- src/modules/chats.js | 22 +++++-- src/services/api/api.service.js | 17 ++++- src/services/chat_service/chat_service.js | 63 ++++++++++++++++-- src/services/chat_utils/chat_utils.js | 21 ++++++ .../entity_normalizer/entity_normalizer.service.js | 3 + .../services/chat_service/chat_service.spec.js | 3 + 13 files changed, 206 insertions(+), 44 deletions(-) (limited to 'src/services') diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index c0c9ad6c..2887afb5 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -12,6 +12,7 @@ import { faChevronDown, faChevronLeft } from '@fortawesome/free-solid-svg-icons' +import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js' library.add( faChevronDown, @@ -22,6 +23,7 @@ const BOTTOMED_OUT_OFFSET = 10 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150 const SAFE_RESIZE_TIME_OFFSET = 100 const MARK_AS_READ_DELAY = 1500 +const MAX_RETRIES = 10 const Chat = { components: { @@ -35,7 +37,8 @@ const Chat = { hoveredMessageChainId: undefined, lastScrollPosition: {}, scrollableContainerHeight: '100%', - errorLoadingChat: false + errorLoadingChat: false, + messageRetriers: {} } }, created () { @@ -219,7 +222,10 @@ const Chat = { if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return } if (document.hidden) { return } const lastReadId = this.currentChatMessageService.maxId - this.$store.dispatch('readChat', { id: this.currentChat.id, lastReadId }) + this.$store.dispatch('readChat', { + id: this.currentChat.id, + lastReadId + }) }, bottomedOut (offset) { return isBottomedOut(this.$refs.scrollable, offset) @@ -309,42 +315,74 @@ const Chat = { }) this.fetchChat({ isFirstFetch: true }) }, - sendMessage ({ status, media }) { + handleAttachmentPosting () { + this.$nextTick(() => { + this.handleResize() + // When the posting form size changes because of a media attachment, we need an extra resize + // to account for the potential delay in the DOM update. + setTimeout(() => { + this.updateScrollableContainerHeight() + }, SAFE_RESIZE_TIME_OFFSET) + this.scrollDown({ forceRead: true }) + }) + }, + sendMessage ({ status, media, idempotencyKey }) { const params = { id: this.currentChat.id, - content: status + content: status, + idempotencyKey } if (media[0]) { params.mediaId = media[0].id } - return this.backendInteractor.sendChatMessage(params) + const fakeMessage = buildFakeMessage({ + attachments: media, + chatId: this.currentChat.id, + content: status, + userId: this.currentUser.id, + idempotencyKey + }) + + this.$store.dispatch('addChatMessages', { + chatId: this.currentChat.id, + messages: [fakeMessage] + }).then(() => { + this.handleAttachmentPosting() + }) + + return this.doSendMessage({ params, fakeMessage, retriesLeft: MAX_RETRIES }) + }, + doSendMessage ({ params, fakeMessage, retriesLeft = MAX_RETRIES }) { + if (retriesLeft <= 0) return + + this.backendInteractor.sendChatMessage(params) .then(data => { this.$store.dispatch('addChatMessages', { chatId: this.currentChat.id, - messages: [data], - updateMaxId: false - }).then(() => { - this.$nextTick(() => { - this.handleResize() - // When the posting form size changes because of a media attachment, we need an extra resize - // to account for the potential delay in the DOM update. - setTimeout(() => { - this.updateScrollableContainerHeight() - }, SAFE_RESIZE_TIME_OFFSET) - this.scrollDown({ forceRead: true }) - }) + updateMaxId: false, + messages: [{ ...data, fakeId: fakeMessage.id }] }) return data }) .catch(error => { console.error('Error sending message', error) - return { - error: this.$t('chats.error_sending_message') + this.$store.dispatch('handleMessageError', { + chatId: this.currentChat.id, + fakeId: fakeMessage.id, + isRetry: retriesLeft !== MAX_RETRIES + }) + if ((error.statusCode >= 500 && error.statusCode < 600) || error.message === 'Failed to fetch') { + this.messageRetriers[fakeMessage.id] = setTimeout(() => { + this.doSendMessage({ params, fakeMessage, retriesLeft: retriesLeft - 1 }) + }, 1000 * (2 ** (MAX_RETRIES - retriesLeft))) } + return {} }) + + return Promise.resolve(fakeMessage) }, goBack () { this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } }) diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index 5f58b9a6..94a0097c 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -80,6 +80,7 @@ :disable-sensitivity-checkbox="true" :disable-submit="errorLoadingChat || !currentChat" :disable-preview="true" + :optimistic-posting="true" :post-handler="sendMessage" :submit-on-enter="!mobileLayout" :preserve-focus="!mobileLayout" diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index 53ca7cce..5af744a3 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -101,6 +101,19 @@ } } + .pending { + .status-content.media-body, .created-at { + color: var(--faint); + } + } + + .error { + .status-content.media-body, .created-at { + color: $fallback--cRed; + color: var(--badgeNotification, $fallback--cRed); + } + } + .incoming { a { color: var(--chatMessageIncomingLink, $fallback--link); diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue index d5b8bb9e..3849ab6e 100644 --- a/src/components/chat_message/chat_message.vue +++ b/src/components/chat_message/chat_message.vue @@ -32,7 +32,7 @@ >
    @@ -150,7 +150,7 @@ :placeholder="placeholder || $t('post_status.default')" rows="1" cols="1" - :disabled="posting" + :disabled="posting && !optimisticPosting" class="form-post-body" :class="{ 'scrollable-form': !!maxHeight }" @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)" diff --git a/src/modules/api.js b/src/modules/api.js index 0a354c3f..08485a30 100644 --- a/src/modules/api.js +++ b/src/modules/api.js @@ -75,12 +75,18 @@ const api = { } else if (message.event === 'delete') { dispatch('deleteStatusById', message.id) } else if (message.event === 'pleroma:chat_update') { - dispatch('addChatMessages', { - chatId: message.chatUpdate.id, - messages: [message.chatUpdate.lastMessage] - }) - dispatch('updateChat', { chat: message.chatUpdate }) - maybeShowChatNotification(store, message.chatUpdate) + // The setTimeout wrapper is a temporary band-aid to avoid duplicates for the user's own messages when doing optimistic sending. + // The cause of the duplicates is the WS event arriving earlier than the HTTP response. + // This setTimeout wrapper can be removed once the commit `8e41baff` is in the stable Pleroma release. + // (`8e41baff` adds the idempotency key to the chat message entity, which PleromaFE uses when it's available, and it makes this artificial delay unnecessary). + setTimeout(() => { + dispatch('addChatMessages', { + chatId: message.chatUpdate.id, + messages: [message.chatUpdate.lastMessage] + }) + dispatch('updateChat', { chat: message.chatUpdate }) + maybeShowChatNotification(store, message.chatUpdate) + }, 100) } } ) diff --git a/src/modules/chats.js b/src/modules/chats.js index 21e30933..0a373d88 100644 --- a/src/modules/chats.js +++ b/src/modules/chats.js @@ -16,7 +16,8 @@ const defaultState = { openedChats: {}, openedChatMessageServices: {}, fetcher: undefined, - currentChatId: null + currentChatId: null, + lastReadMessageId: null } const getChatById = (state, id) => { @@ -92,9 +93,14 @@ const chats = { commit('setCurrentChatFetcher', { fetcher: undefined }) }, readChat ({ rootState, commit, dispatch }, { id, lastReadId }) { + const isNewMessage = rootState.chats.lastReadMessageId !== lastReadId + dispatch('resetChatNewMessageCount') - commit('readChat', { id }) - rootState.api.backendInteractor.readChat({ id, lastReadId }) + commit('readChat', { id, lastReadId }) + + if (isNewMessage) { + rootState.api.backendInteractor.readChat({ id, lastReadId }) + } }, deleteChatMessage ({ rootState, commit }, value) { rootState.api.backendInteractor.deleteChatMessage(value) @@ -106,6 +112,9 @@ const chats = { }, clearOpenedChats ({ rootState, commit, dispatch, rootGetters }) { commit('clearOpenedChats', { commit }) + }, + handleMessageError ({ commit }, value) { + commit('handleMessageError', { commit, ...value }) } }, mutations: { @@ -208,11 +217,16 @@ const chats = { } } }, - readChat (state, { id }) { + readChat (state, { id, lastReadId }) { + state.lastReadMessageId = lastReadId const chat = getChatById(state, id) if (chat) { chat.unread = 0 } + }, + handleMessageError (state, { chatId, fakeId, isRetry }) { + const chatMessageService = state.openedChatMessageServices[chatId] + chatService.handleMessageError(chatMessageService, fakeId, isRetry) } } } diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 1a3495d4..22b5e8ba 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -129,7 +129,11 @@ const promisedRequest = ({ method, url, params, payload, credentials, headers = return reject(new StatusCodeError(response.status, json, { url, options }, response)) } return resolve(json) - })) + }) + .catch((error) => { + return reject(new StatusCodeError(response.status, error, { url, options }, response)) + }) + ) }) } @@ -1210,7 +1214,7 @@ const chatMessages = ({ id, credentials, maxId, sinceId, limit = 20 }) => { }) } -const sendChatMessage = ({ id, content, mediaId = null, credentials }) => { +const sendChatMessage = ({ id, content, mediaId = null, idempotencyKey, credentials }) => { const payload = { 'content': content } @@ -1219,11 +1223,18 @@ const sendChatMessage = ({ id, content, mediaId = null, credentials }) => { payload['media_id'] = mediaId } + const headers = {} + + if (idempotencyKey) { + headers['idempotency-key'] = idempotencyKey + } + return promisedRequest({ url: PLEROMA_CHAT_MESSAGES_URL(id), method: 'POST', payload: payload, - credentials + credentials, + headers }) } diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js index 95c69482..815af82e 100644 --- a/src/services/chat_service/chat_service.js +++ b/src/services/chat_service/chat_service.js @@ -3,6 +3,7 @@ import _ from 'lodash' const empty = (chatId) => { return { idIndex: {}, + idempotencyKeyIndex: {}, messages: [], newMessageCount: 0, lastSeenTimestamp: 0, @@ -13,8 +14,18 @@ const empty = (chatId) => { } const clear = (storage) => { - storage.idIndex = {} - storage.messages.splice(0, storage.messages.length) + const failedMessageIds = [] + + for (const message of storage.messages) { + if (message.error) { + failedMessageIds.push(message.id) + } else { + delete storage.idIndex[message.id] + delete storage.idempotencyKeyIndex[message.id] + } + } + + storage.messages = storage.messages.filter(m => failedMessageIds.includes(m.id)) storage.newMessageCount = 0 storage.lastSeenTimestamp = 0 storage.minId = undefined @@ -37,6 +48,25 @@ const deleteMessage = (storage, messageId) => { } } +const handleMessageError = (storage, fakeId, isRetry) => { + if (!storage) { return } + const fakeMessage = storage.idIndex[fakeId] + if (fakeMessage) { + fakeMessage.error = true + fakeMessage.pending = false + if (!isRetry) { + // Ensure the failed message doesn't stay at the bottom of the list. + const lastPersistedMessage = _.orderBy(storage.messages, ['pending', 'id'], ['asc', 'desc'])[0] + if (lastPersistedMessage) { + const oldId = fakeMessage.id + fakeMessage.id = `${lastPersistedMessage.id}-${new Date().getTime()}` + storage.idIndex[fakeMessage.id] = fakeMessage + delete storage.idIndex[oldId] + } + } + } +} + const add = (storage, { messages: newMessages, updateMaxId = true }) => { if (!storage) { return } for (let i = 0; i < newMessages.length; i++) { @@ -45,7 +75,19 @@ const add = (storage, { messages: newMessages, updateMaxId = true }) => { // sanity check if (message.chat_id !== storage.chatId) { return } - if (!storage.minId || message.id < storage.minId) { + if (message.fakeId) { + const fakeMessage = storage.idIndex[message.fakeId] + if (fakeMessage) { + Object.assign(fakeMessage, message, { error: false }) + delete fakeMessage['fakeId'] + storage.idIndex[fakeMessage.id] = fakeMessage + delete storage.idIndex[message.fakeId] + + return + } + } + + if (!storage.minId || (!message.pending && message.id < storage.minId)) { storage.minId = message.id } @@ -55,16 +97,22 @@ const add = (storage, { messages: newMessages, updateMaxId = true }) => { } } - if (!storage.idIndex[message.id]) { + if (!storage.idIndex[message.id] && !isConfirmation(storage, message)) { if (storage.lastSeenTimestamp < message.created_at) { storage.newMessageCount++ } - storage.messages.push(message) storage.idIndex[message.id] = message + storage.messages.push(storage.idIndex[message.id]) + storage.idempotencyKeyIndex[message.idempotency_key] = true } } } +const isConfirmation = (storage, message) => { + if (!message.idempotency_key) return + return storage.idempotencyKeyIndex[message.idempotency_key] +} + const resetNewMessageCount = (storage) => { if (!storage) { return } storage.newMessageCount = 0 @@ -76,7 +124,7 @@ const getView = (storage) => { if (!storage) { return [] } const result = [] - const messages = _.sortBy(storage.messages, ['id', 'desc']) + const messages = _.orderBy(storage.messages, ['pending', 'id'], ['asc', 'asc']) const firstMessage = messages[0] let previousMessage = messages[messages.length - 1] let currentMessageChainId @@ -148,7 +196,8 @@ const ChatService = { getView, deleteMessage, resetNewMessageCount, - clear + clear, + handleMessageError } export default ChatService diff --git a/src/services/chat_utils/chat_utils.js b/src/services/chat_utils/chat_utils.js index 86fe1af9..de6e0625 100644 --- a/src/services/chat_utils/chat_utils.js +++ b/src/services/chat_utils/chat_utils.js @@ -18,3 +18,24 @@ export const maybeShowChatNotification = (store, chat) => { showDesktopNotification(store.rootState, opts) } + +export const buildFakeMessage = ({ content, chatId, attachments, userId, idempotencyKey }) => { + const fakeMessage = { + content, + chat_id: chatId, + created_at: new Date(), + id: `${new Date().getTime()}`, + attachments: attachments, + account_id: userId, + idempotency_key: idempotencyKey, + emojis: [], + pending: true, + isNormalized: true + } + + if (attachments[0]) { + fakeMessage.attachment = attachments[0] + } + + return fakeMessage +} diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index 1884478a..9d09b8d0 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -429,6 +429,9 @@ export const parseChatMessage = (message) => { } else { output.attachments = [] } + output.pending = !!message.pending + output.error = false + output.idempotency_key = message.idempotency_key output.isNormalized = true return output } diff --git a/test/unit/specs/services/chat_service/chat_service.spec.js b/test/unit/specs/services/chat_service/chat_service.spec.js index 2eb89a2d..15e64bb5 100644 --- a/test/unit/specs/services/chat_service/chat_service.spec.js +++ b/test/unit/specs/services/chat_service/chat_service.spec.js @@ -2,17 +2,20 @@ import chatService from '../../../../../src/services/chat_service/chat_service.j const message1 = { id: '9wLkdcmQXD21Oy8lEX', + idempotency_key: '1', created_at: (new Date('2020-06-22T18:45:53.000Z')) } const message2 = { id: '9wLkdp6ihaOVdNj8Wu', + idempotency_key: '2', account_id: '9vmRb29zLQReckr5ay', created_at: (new Date('2020-06-22T18:45:56.000Z')) } const message3 = { id: '9wLke9zL4Dy4OZR2RM', + idempotency_key: '3', account_id: '9vmRb29zLQReckr5ay', created_at: (new Date('2020-07-22T18:45:59.000Z')) } -- cgit v1.2.3-70-g09d2 From 78e5a639228ba846e38ae722590aec1310275c79 Mon Sep 17 00:00:00 2001 From: Eugenij Date: Sun, 1 Nov 2020 14:25:02 +0000 Subject: Apply 1 suggestion(s) to 1 file(s) --- src/services/chat_service/chat_service.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src/services') diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js index 815af82e..b0905dc1 100644 --- a/src/services/chat_service/chat_service.js +++ b/src/services/chat_service/chat_service.js @@ -78,6 +78,12 @@ const add = (storage, { messages: newMessages, updateMaxId = true }) => { if (message.fakeId) { const fakeMessage = storage.idIndex[message.fakeId] if (fakeMessage) { + // In case the same id exists (chat update before POST response) + // make sure to remove the older duplicate message. + if (storage.idIndex[message.id]) { + delete storage.idIndex[message.id] + storage.messages = storage.messages.filter(msg => msg.id !== message.id) + } Object.assign(fakeMessage, message, { error: false }) delete fakeMessage['fakeId'] storage.idIndex[fakeMessage.id] = fakeMessage -- cgit v1.2.3-70-g09d2 From 5e8db7ed938021854cec8864462879f29d159eea Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 2 Nov 2020 09:15:13 +0200 Subject: move from using timestamps to ids when tracking last seen in chats --- src/services/chat_service/chat_service.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/services') diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js index b0905dc1..1fc4e390 100644 --- a/src/services/chat_service/chat_service.js +++ b/src/services/chat_service/chat_service.js @@ -6,7 +6,7 @@ const empty = (chatId) => { idempotencyKeyIndex: {}, messages: [], newMessageCount: 0, - lastSeenTimestamp: 0, + lastSeenMessageId: '0', chatId: chatId, minId: undefined, maxId: undefined @@ -27,7 +27,7 @@ const clear = (storage) => { storage.messages = storage.messages.filter(m => failedMessageIds.includes(m.id)) storage.newMessageCount = 0 - storage.lastSeenTimestamp = 0 + storage.lastSeenMessageId = '0' storage.minId = undefined storage.maxId = undefined } @@ -104,7 +104,7 @@ const add = (storage, { messages: newMessages, updateMaxId = true }) => { } if (!storage.idIndex[message.id] && !isConfirmation(storage, message)) { - if (storage.lastSeenTimestamp < message.created_at) { + if (storage.lastSeenMessageId < message.id) { storage.newMessageCount++ } storage.idIndex[message.id] = message @@ -122,7 +122,7 @@ const isConfirmation = (storage, message) => { const resetNewMessageCount = (storage) => { if (!storage) { return } storage.newMessageCount = 0 - storage.lastSeenTimestamp = new Date() + storage.lastSeenMessageId = storage.maxId } // Inserts date separators and marks the head and tail if it's the chain of messages made by the same user -- cgit v1.2.3-70-g09d2