logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe
commit: d770bab1b0e5d543547c59d86aef533f77ceafe2
parent cd784396e72dafc8442ac48635ea23f8365d83bd
Author: Shpuld Shpludson <shp@cock.li>
Date:   Wed, 18 Nov 2020 11:49:54 +0000

Merge branch 'fix/timeline-error-handling-fixes' into 'develop'

Various timeline fixes

See merge request pleroma/pleroma-fe!1283

Diffstat:

MCHANGELOG.md4++++
Msrc/components/notifications/notifications.vue7-------
Msrc/components/timeline/timeline.js12+++---------
Msrc/components/timeline/timeline.vue24++----------------------
Msrc/components/timeline_menu/timeline_menu.js5++---
Msrc/i18n/en.json3++-
Msrc/modules/statuses.js23+----------------------
Msrc/services/api/api.service.js2+-
Msrc/services/notifications_fetcher/notifications_fetcher.service.js18++++++++++++++----
Msrc/services/timeline_fetcher/timeline_fetcher.service.js18+++++++++++-------
Mtest/unit/specs/components/user_profile.spec.js3+--
11 files changed, 41 insertions(+), 78 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md @@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [Unreleased] ### Fixed - Fixed the occasional bug where screen would scroll 1px when typing into a reply form +- Fixed timeline errors locking timelines + +### Changed +- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers - Fixed custom emoji not working in profile field names - Fixed pinned statuses not appearing in user profiles diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue @@ -15,13 +15,6 @@ class="badge badge-notification unseen-count" >{{ unseenCount }}</span> </div> - <div - v-if="error" - class="loadmore-error alert error" - @click.prevent - > - {{ $t('timeline.error_fetching') }} - </div> <button v-if="unseenCount" class="read-button" diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js @@ -50,17 +50,10 @@ const Timeline = { TimelineMenu }, computed: { - timelineError () { - return this.$store.state.statuses.error - }, - errorData () { - return this.$store.state.statuses.errorData - }, newStatusCount () { return this.timeline.newStatusCount }, showLoadButton () { - if (this.timelineError || this.errorData) return false return this.timeline.newStatusCount > 0 || this.timeline.flushMarker !== 0 }, loadButtonString () { @@ -171,11 +164,12 @@ const Timeline = { userId: this.userId, tag: this.tag }).then(({ statuses }) => { - store.commit('setLoading', { timeline: this.timelineName, value: false }) if (statuses && statuses.length === 0) { this.bottomedOut = true } - }) + }).finally(() => + store.commit('setLoading', { timeline: this.timelineName, value: false }) + ) }, 1000, this), determineVisibleStatuses () { if (!this.$refs.timeline) return diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue @@ -2,22 +2,8 @@ <div :class="[classes.root, 'Timeline']"> <div :class="classes.header"> <TimelineMenu v-if="!embedded" /> - <div - v-if="timelineError" - class="loadmore-error alert error" - @click.prevent - > - {{ $t('timeline.error_fetching') }} - </div> - <div - v-else-if="errorData" - class="loadmore-error alert error" - @click.prevent - > - {{ errorData.statusText }} - </div> <button - v-else-if="showLoadButton" + v-if="showLoadButton" class="loadmore-button" @click.prevent="showNewStatuses" > @@ -76,18 +62,12 @@ {{ $t('timeline.no_more_statuses') }} </div> <a - v-else-if="!timeline.loading && !errorData" + v-else-if="!timeline.loading" href="#" @click.prevent="fetchOlderStatuses()" > <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div> </a> - <a - v-else-if="errorData" - href="#" - > - <div class="new-status-notification text-center panel-footer">{{ errorData.error }}</div> - </a> <div v-else class="new-status-notification text-center panel-footer" diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js @@ -19,7 +19,7 @@ library.add( faChevronDown ) -// Route -> i18n key mapping, exported andnot in the computed +// Route -> i18n key mapping, exported and not in the computed // because nav panel benefits from the same information. export const timelineNames = () => { return { @@ -27,8 +27,7 @@ export const timelineNames = () => { 'bookmarks': 'nav.bookmarks', 'dms': 'nav.dms', 'public-timeline': 'nav.public_tl', - 'public-external-timeline': 'nav.twkn', - 'tag-timeline': 'tag' + 'public-external-timeline': 'nav.twkn' } } diff --git a/src/i18n/en.json b/src/i18n/en.json @@ -130,6 +130,7 @@ }, "notifications": { "broken_favorite": "Unknown status, searching for it…", + "error": "Error fetching notifications: {0}", "favorited_you": "favorited your status", "followed_you": "followed you", "follow_request": "wants to follow you", @@ -634,7 +635,7 @@ "timeline": { "collapse": "Collapse", "conversation": "Conversation", - "error_fetching": "Error fetching updates", + "error": "Error fetching timeline: {0}", "load_older": "Load older statuses", "no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated", "repeated": "repeated", diff --git a/src/modules/statuses.js b/src/modules/statuses.js @@ -39,8 +39,7 @@ const emptyNotifications = () => ({ minId: Number.POSITIVE_INFINITY, data: [], idStore: {}, - loading: false, - error: false + loading: false }) export const defaultState = () => ({ @@ -50,8 +49,6 @@ export const defaultState = () => ({ maxId: 0, notifications: emptyNotifications(), favorites: new Set(), - error: false, - errorData: null, timelines: { mentions: emptyTl(), public: emptyTl(), @@ -462,18 +459,9 @@ export const mutations = { const newStatus = state.allStatusesObject[id] newStatus.nsfw = nsfw }, - setError (state, { value }) { - state.error = value - }, - setErrorData (state, { value }) { - state.errorData = value - }, setNotificationsLoading (state, { value }) { state.notifications.loading = value }, - setNotificationsError (state, { value }) { - state.notifications.error = value - }, setNotificationsSilence (state, { value }) { state.notifications.desktopNotificationSilence = value }, @@ -588,18 +576,9 @@ const statuses = { } commit('addNewNotifications', { dispatch, notifications, older, rootGetters, newNotificationSideEffects }) }, - setError ({ rootState, commit }, { value }) { - commit('setError', { value }) - }, - setErrorData ({ rootState, commit }, { value }) { - commit('setErrorData', { value }) - }, setNotificationsLoading ({ rootState, commit }, { value }) { commit('setNotificationsLoading', { value }) }, - setNotificationsError ({ rootState, commit }, { value }) { - commit('setNotificationsError', { value }) - }, setNotificationsSilence ({ rootState, commit }, { value }) { commit('setNotificationsSilence', { value }) }, diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js @@ -560,7 +560,7 @@ const fetchTimeline = ({ }) .then((data) => data.json()) .then((data) => { - if (!data.error) { + if (!data.errors) { return { data: data.map(isNotifications ? parseNotification : parseStatus), pagination } } else { data.status = status diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js @@ -2,7 +2,6 @@ import apiService from '../api/api.service.js' import { promiseInterval } from '../promise_interval/promise_interval.js' const update = ({ store, notifications, older }) => { - store.dispatch('setNotificationsError', { value: false }) store.dispatch('addNewNotifications', { notifications, older }) } @@ -47,11 +46,22 @@ const fetchAndUpdate = ({ store, credentials, older = false }) => { const fetchNotifications = ({ store, args, older }) => { return apiService.fetchTimeline(args) - .then(({ data: notifications }) => { + .then((response) => { + if (response.errors) { + throw new Error(`${response.status} ${response.statusText}`) + } + const notifications = response.data update({ store, notifications, older }) return notifications - }, () => store.dispatch('setNotificationsError', { value: true })) - .catch(() => store.dispatch('setNotificationsError', { value: true })) + }) + .catch((error) => { + store.dispatch('pushGlobalNotice', { + level: 'error', + messageKey: 'notifications.error', + messageArgs: [error.message], + timeout: 5000 + }) + }) } const startFetching = ({ credentials, store }) => { diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js @@ -6,9 +6,6 @@ import { promiseInterval } from '../promise_interval/promise_interval.js' const update = ({ store, statuses, timeline, showImmediately, userId, pagination }) => { const ccTimeline = camelCase(timeline) - store.dispatch('setError', { value: false }) - store.dispatch('setErrorData', { value: null }) - store.dispatch('addNewStatuses', { timeline: ccTimeline, userId, @@ -52,9 +49,8 @@ const fetchAndUpdate = ({ return apiService.fetchTimeline(args) .then(response => { - if (response.error) { - store.dispatch('setErrorData', { value: response }) - return + if (response.errors) { + throw new Error(`${response.status} ${response.statusText}`) } const { data: statuses, pagination } = response @@ -63,7 +59,15 @@ const fetchAndUpdate = ({ } update({ store, statuses, timeline, showImmediately, userId, pagination }) return { statuses, pagination } - }, () => store.dispatch('setError', { value: true })) + }) + .catch((error) => { + store.dispatch('pushGlobalNotice', { + level: 'error', + messageKey: 'timeline.error', + messageArgs: [error.message], + timeout: 5000 + }) + }) } const startFetching = ({ timeline = 'friends', credentials, store, userId = false, tag = false }) => { diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js @@ -8,8 +8,7 @@ const localVue = createLocalVue() localVue.use(Vuex) const mutations = { - clearTimeline: () => {}, - setError: () => {} + clearTimeline: () => {} } const actions = {