From 086dd832d3d2c8103e7d6f99d72d27bea97ce7b0 Mon Sep 17 00:00:00 2001 From: wakarimasen Date: Tue, 7 Mar 2017 17:27:12 +0100 Subject: Visual feedback on failure to fetch new statuses --- src/modules/statuses.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) (limited to 'src/modules') diff --git a/src/modules/statuses.js b/src/modules/statuses.js index 491d0024..b19109b2 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -15,7 +15,8 @@ export const defaultState = { newStatusCount: 0, maxId: 0, minVisibleId: 0, - loading: false + loading: false, + error: false }, public: { statuses: [], @@ -24,7 +25,8 @@ export const defaultState = { newStatusCount: 0, maxId: 0, minVisibleId: 0, - loading: false + loading: false, + error: false }, publicAndExternal: { statuses: [], @@ -33,7 +35,8 @@ export const defaultState = { newStatusCount: 0, maxId: 0, minVisibleId: 0, - loading: false + loading: false, + error: false }, friends: { statuses: [], @@ -42,7 +45,8 @@ export const defaultState = { newStatusCount: 0, maxId: 0, minVisibleId: 0, - loading: false + loading: false, + error: false } } } @@ -280,6 +284,9 @@ export const mutations = { const newStatus = find(state.allStatuses, { id }) newStatus.nsfw = nsfw }, + setError (state, { timeline, value }) { + state.timelines[timeline].error = value + }, markNotificationsAsSeen (state, notifications) { each(notifications, (notification) => { notification.seen = true @@ -293,6 +300,9 @@ const statuses = { addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false }) { commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser }) }, + setError ({ rootState, commit }, { timeline, value }) { + commit('setError', { timeline, value }) + }, deleteStatus ({ rootState, commit }, status) { commit('setDeleted', { status }) apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials }) -- cgit v1.2.3-70-g09d2 From 480a1ba253d49d4df36fbc64192e1260fc51a181 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Wed, 8 Mar 2017 17:59:12 +0100 Subject: Use cache to quickly access users. --- src/lib/persisted_state.js | 9 ++++++++- src/modules/users.js | 10 ++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) (limited to 'src/modules') diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js index a518cb51..a47ad7d5 100644 --- a/src/lib/persisted_state.js +++ b/src/lib/persisted_state.js @@ -1,7 +1,7 @@ import merge from 'lodash.merge' import objectPath from 'object-path' import localforage from 'localforage' -import { throttle } from 'lodash' +import { throttle, each } from 'lodash' const defaultReducer = (state, paths) => ( paths.length === 0 ? state : paths.reduce((substate, path) => { @@ -33,6 +33,13 @@ export default function createPersistedState ({ return store => { getState(key, storage).then((savedState) => { if (typeof savedState === 'object') { + // build user cache + const usersState = savedState.users || {} + usersState.usersObject = {} + const users = usersState.users || [] + each(users, (user) => { usersState.usersObject[user.id] = user }) + savedState.users = usersState + store.replaceState( merge({}, store.state, savedState) ) diff --git a/src/modules/users.js b/src/modules/users.js index 31731880..dc910c91 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -3,9 +3,9 @@ import { compact, map, each, find, merge } from 'lodash' import { set } from 'vue' // TODO: Unify with mergeOrAdd in statuses.js -export const mergeOrAdd = (arr, item) => { +export const mergeOrAdd = (arr, obj, item) => { if (!item) { return false } - const oldItem = find(arr, {id: item.id}) + const oldItem = obj[item.id] if (oldItem) { // We already have this, so only merge the new info. merge(oldItem, item) @@ -13,6 +13,7 @@ export const mergeOrAdd = (arr, item) => { } else { // This is a new item, prepare it arr.push(item) + obj[item.id] = item return {item, new: true} } } @@ -32,7 +33,7 @@ export const mutations = { state.loggingIn = false }, addNewUsers (state, users) { - each(users, (user) => mergeOrAdd(state.users, user)) + each(users, (user) => mergeOrAdd(state.users, state.usersObject, user)) }, setUserForStatus (state, status) { status.user = find(state.users, status.user) @@ -42,7 +43,8 @@ export const mutations = { export const defaultState = { currentUser: false, loggingIn: false, - users: [] + users: [], + usersObject: {} } const users = { -- cgit v1.2.3-70-g09d2 From 5699872bb5e05b5dc576c75cac2c79b7ece3f2ac Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Wed, 8 Mar 2017 18:04:21 +0100 Subject: Use user cache in users module. --- src/modules/users.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/modules') diff --git a/src/modules/users.js b/src/modules/users.js index dc910c91..9367ec68 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -1,5 +1,5 @@ import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' -import { compact, map, each, find, merge } from 'lodash' +import { compact, map, each, merge } from 'lodash' import { set } from 'vue' // TODO: Unify with mergeOrAdd in statuses.js @@ -20,7 +20,7 @@ export const mergeOrAdd = (arr, obj, item) => { export const mutations = { setMuted (state, { user: {id}, muted }) { - const user = find(state.users, {id}) + const user = state.usersObject[id] set(user, 'muted', muted) }, setCurrentUser (state, user) { @@ -36,7 +36,7 @@ export const mutations = { each(users, (user) => mergeOrAdd(state.users, state.usersObject, user)) }, setUserForStatus (state, status) { - status.user = find(state.users, status.user) + status.user = state.usersObject[status.user.id] } } -- cgit v1.2.3-70-g09d2 From a6b6fe95c0fe2aa60ebbfca87fde47e629035c49 Mon Sep 17 00:00:00 2001 From: wakarimasen Date: Wed, 8 Mar 2017 18:28:41 +0100 Subject: Show visual feedback on login error, redirect on success --- src/components/login_form/login_form.js | 8 +++- src/components/login_form/login_form.vue | 9 +++++ src/modules/users.js | 68 ++++++++++++++++++-------------- 3 files changed, 53 insertions(+), 32 deletions(-) (limited to 'src/modules') diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js index 827c704c..2ad5b0b5 100644 --- a/src/components/login_form/login_form.js +++ b/src/components/login_form/login_form.js @@ -1,13 +1,17 @@ const LoginForm = { data: () => ({ - user: {} + user: {}, + authError: false }), computed: { loggingIn () { return this.$store.state.users.loggingIn } }, methods: { submit () { - this.$store.dispatch('loginUser', this.user) + this.$store.dispatch('loginUser', this.user).then( + () => { this.$router.push('/main/friends')}, + () => { this.authError = true } + ) } } } diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index c0273bae..279469ee 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -17,6 +17,9 @@
+
+ +
@@ -39,6 +42,12 @@ margin-top: 1.0em; min-height: 28px; } + + .error { + margin-top: 0em; + margin-bottom: 0em; + background-color: rgba(255, 48, 16, 0.65); + } } diff --git a/src/modules/users.js b/src/modules/users.js index 31731880..a5274480 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -65,40 +65,48 @@ const users = { }) }, loginUser (store, userCredentials) { - const commit = store.commit - commit('beginLogin') - store.rootState.api.backendInteractor.verifyCredentials(userCredentials) - .then((response) => { - if (response.ok) { - response.json() - .then((user) => { - user.credentials = userCredentials - commit('setCurrentUser', user) - commit('addNewUsers', [user]) + return new Promise((resolve, reject) => { + const commit = store.commit + commit('beginLogin') + store.rootState.api.backendInteractor.verifyCredentials(userCredentials) + .then((response) => { + if (response.ok) { + response.json() + .then((user) => { + user.credentials = userCredentials + commit('setCurrentUser', user) + commit('addNewUsers', [user]) - // Set our new backend interactor - commit('setBackendInteractor', backendInteractorService(userCredentials)) + // Set our new backend interactor + commit('setBackendInteractor', backendInteractorService(userCredentials)) - // Start getting fresh tweets. - store.dispatch('startFetching', 'friends') + // Start getting fresh tweets. + store.dispatch('startFetching', 'friends') - // Get user mutes and follower info - store.rootState.api.backendInteractor.fetchMutes().then((mutedUsers) => { - each(mutedUsers, (user) => { user.muted = true }) - store.commit('addNewUsers', mutedUsers) - }) + // Get user mutes and follower info + store.rootState.api.backendInteractor.fetchMutes().then((mutedUsers) => { + each(mutedUsers, (user) => { user.muted = true }) + store.commit('addNewUsers', mutedUsers) + }) - // Fetch our friends - store.rootState.api.backendInteractor.fetchFriends() - .then((friends) => commit('addNewUsers', friends)) - }) - } - commit('endLogin') - }) - .catch((error) => { - console.log(error) - commit('endLogin') - }) + // Fetch our friends + store.rootState.api.backendInteractor.fetchFriends() + .then((friends) => commit('addNewUsers', friends)) + }) + } else { + // Authentication failed + commit('endLogin') + reject() + } + commit('endLogin') + resolve() + }) + .catch((error) => { + console.log(error) + commit('endLogin') + reject() + }) + }) } } } -- cgit v1.2.3-70-g09d2 From ccc460bb5ed1c8b7338f8a26bdb3029c74b26024 Mon Sep 17 00:00:00 2001 From: wakarimasen Date: Wed, 8 Mar 2017 19:22:56 +0100 Subject: Give more specific reason for failed login --- src/components/login_form/login_form.js | 4 ++-- src/components/login_form/login_form.vue | 2 +- src/modules/users.js | 8 ++++++-- 3 files changed, 9 insertions(+), 5 deletions(-) (limited to 'src/modules') diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js index e489f381..bc801397 100644 --- a/src/components/login_form/login_form.js +++ b/src/components/login_form/login_form.js @@ -10,8 +10,8 @@ const LoginForm = { submit () { this.$store.dispatch('loginUser', this.user).then( () => { this.$router.push('/main/friends')}, - () => { - this.authError = true + (error) => { + this.authError = error this.user.username = '' this.user.password = '' } diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index 279469ee..8a32e064 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -18,7 +18,7 @@
- +
diff --git a/src/modules/users.js b/src/modules/users.js index a5274480..482c3b14 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -96,7 +96,11 @@ const users = { } else { // Authentication failed commit('endLogin') - reject() + if (response.status === 401) { + reject('Wrong username or password') + } else { + reject('An error occured, please try again') + } } commit('endLogin') resolve() @@ -104,7 +108,7 @@ const users = { .catch((error) => { console.log(error) commit('endLogin') - reject() + reject('Failed to connect to server, try again') }) }) } -- cgit v1.2.3-70-g09d2 From 0810b2d51a6f0fbbfe1604f6d1954cde8ed08290 Mon Sep 17 00:00:00 2001 From: wakarimasen Date: Wed, 8 Mar 2017 19:31:39 +0100 Subject: Fix typo --- src/modules/users.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/modules') diff --git a/src/modules/users.js b/src/modules/users.js index 482c3b14..51643bd1 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -99,7 +99,7 @@ const users = { if (response.status === 401) { reject('Wrong username or password') } else { - reject('An error occured, please try again') + reject('An error occurred, please try again') } } commit('endLogin') -- cgit v1.2.3-70-g09d2 From 0d39ed809b17dc7a3304f9a659c3d5e99d960f26 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Wed, 8 Mar 2017 21:04:48 +0100 Subject: Add caching system to statuses. --- src/modules/statuses.js | 34 ++++++++++++++++++++++++---------- 1 file changed, 24 insertions(+), 10 deletions(-) (limited to 'src/modules') diff --git a/src/modules/statuses.js b/src/modules/statuses.js index b19109b2..e4528520 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -4,14 +4,17 @@ import apiService from '../services/api/api.service.js' export const defaultState = { allStatuses: [], + allStatusesObject: {}, maxId: 0, notifications: [], favorites: new Set(), timelines: { mentions: { statuses: [], + statusesObject: {}, faves: [], visibleStatuses: [], + visibleStatusesObject: {}, newStatusCount: 0, maxId: 0, minVisibleId: 0, @@ -20,8 +23,10 @@ export const defaultState = { }, public: { statuses: [], + statusesObject: {}, faves: [], visibleStatuses: [], + visibleStatusesObject: {}, newStatusCount: 0, maxId: 0, minVisibleId: 0, @@ -30,8 +35,10 @@ export const defaultState = { }, publicAndExternal: { statuses: [], + statusesObject: {}, faves: [], visibleStatuses: [], + visibleStatusesObject: {}, newStatusCount: 0, maxId: 0, minVisibleId: 0, @@ -40,8 +47,10 @@ export const defaultState = { }, friends: { statuses: [], + statusesObject: {}, faves: [], visibleStatuses: [], + visibleStatusesObject: {}, newStatusCount: 0, maxId: 0, minVisibleId: 0, @@ -91,8 +100,9 @@ export const findMaxId = (...args) => { return (maxBy(flatten(args), 'id') || {}).id } -const mergeOrAdd = (arr, item) => { - const oldItem = find(arr, {id: item.id}) +const mergeOrAdd = (arr, obj, item) => { + const oldItem = obj[item.id] + if (oldItem) { // We already have this, so only merge the new info. merge(oldItem, item) @@ -103,6 +113,7 @@ const mergeOrAdd = (arr, item) => { // This is a new item, prepare it prepareStatus(item) arr.push(item) + obj[item.id] = item return {item, new: true} } } @@ -122,6 +133,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us } const allStatuses = state.allStatuses + const allStatusesObject = state.allStatusesObject const timelineObject = state.timelines[timeline] // Set the maxId to the new id if it's larger. @@ -131,7 +143,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us } const addStatus = (status, showImmediately, addToTimeline = true) => { - const result = mergeOrAdd(allStatuses, status) + const result = mergeOrAdd(allStatuses, allStatusesObject, status) status = result.item if (result.new) { @@ -147,7 +159,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us // Add the mention to the mentions timeline if (timelineObject !== mentions) { - mergeOrAdd(mentions.statuses, status) + mergeOrAdd(mentions.statuses, mentions.statusesObject, status) mentions.newStatusCount += 1 sortTimeline(mentions) @@ -161,13 +173,13 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us let resultForCurrentTimeline // Some statuses should only be added to the global status repository. if (timeline && addToTimeline) { - resultForCurrentTimeline = mergeOrAdd(timelineObject.statuses, status) + resultForCurrentTimeline = mergeOrAdd(timelineObject.statuses, timelineObject.statusesObject, status) } if (timeline && showImmediately) { // Add it directly to the visibleStatuses, don't change // newStatusCount - mergeOrAdd(timelineObject.visibleStatuses, status) + mergeOrAdd(timelineObject.visibleStatuses, timelineObject.visibleStatusesObject, status) } else if (timeline && addToTimeline && resultForCurrentTimeline.new) { // Just change newStatuscount timelineObject.newStatusCount += 1 @@ -264,24 +276,26 @@ export const mutations = { oldTimeline.newStatusCount = 0 oldTimeline.visibleStatuses = slice(oldTimeline.statuses, 0, 50) + oldTimeline.visibleStatusesObject = {} + each(oldTimeline.visibleStatuses, (status) => { oldTimeline.visibleStatusesObject[status.id] = status }) }, setFavorited (state, { status, value }) { - const newStatus = find(state.allStatuses, status) + const newStatus = state.allStatusesObject[status.id] newStatus.favorited = value }, setRetweeted (state, { status, value }) { - const newStatus = find(state.allStatuses, status) + const newStatus = state.allStatusesObject[status.id] newStatus.repeated = value }, setDeleted (state, { status }) { - const newStatus = find(state.allStatuses, status) + const newStatus = state.allStatusesObject[status.id] newStatus.deleted = true }, setLoading (state, { timeline, value }) { state.timelines[timeline].loading = value }, setNsfw (state, { id, nsfw }) { - const newStatus = find(state.allStatuses, { id }) + const newStatus = state.allStatusesObject[id] newStatus.nsfw = nsfw }, setError (state, { timeline, value }) { -- cgit v1.2.3-70-g09d2