Merge branch 'feature/performance' into 'develop'

Feature/performance

See merge request !50

src/components/conversation/conversation.js

@@ -49,7 +49,7 @@ const conversation = {
       }
     },
     focused: function (id) {
-      if (!!this.statusoid.retweeted_status) {
+      if (this.statusoid.retweeted_status) {
         return (id === this.statusoid.retweeted_status.id)
       } else {
         return (id === this.statusoid.id)

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)
         )

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 }) {

src/modules/users.js

@@ -1,11 +1,11 @@
 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
-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,13 +13,14 @@ export const mergeOrAdd = (arr, item) => {
   } else {
     // This is a new item, prepare it
     arr.push(item)
+    obj[item.id] = item
     return {item, new: true}
   }
 }
 
 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) {
@@ -32,17 +33,18 @@ 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)
+    status.user = state.usersObject[status.user.id]
   }
 }
 
 export const defaultState = {
   currentUser: false,
   loggingIn: false,
-  users: []
+  users: [],
+  usersObject: {}
 }
 
 const users = {

test/unit/specs/modules/statuses.spec.js

@@ -1,6 +1,7 @@
 import { cloneDeep } from 'lodash'
 import { defaultState, mutations, findMaxId, prepareStatus, statusType } from '../../../../src/modules/statuses.js'
 
+// eslint-disable-next-line camelcase
 const makeMockStatus = ({id, text, is_post_verb = true}) => {
   return {
     id,