Profiles: Refactor profiles module

src/renderer/store/modules/profiles.js

@@ -18,29 +18,47 @@ const getters = {
 
   getActiveProfile: () => {
     return state.activeProfile
+  },
+
+  profileById: (state) => (id) => {
+    const profile = state.profileList.find(p => p._id === id)
+    return profile
   }
 }
 
+function profileSort(a, b) {
+  if (a._id === 'allChannels') return -1
+  if (b._id === 'allChannels') return 1
+  if (a.name < b.name) return -1
+  if (a.name > b.name) return 1
+  return 0
+}
+
 const actions = {
   async grabAllProfiles({ rootState, dispatch, commit }, defaultName = null) {
-    let profiles = await profilesDb.find({})
+    let profiles = await profilesDb.find({}).catch(console.error)
+    if (!Array.isArray(profiles)) return
+
     if (profiles.length === 0) {
-      dispatch('createDefaultProfile', defaultName)
+      // Create a default profile and persist it
+      const randomColor = await dispatch('getRandomColor')
+      const textColor = await dispatch('calculateColorLuminance', randomColor)
+      const defaultProfile = {
+        _id: 'allChannels',
+        name: defaultName,
+        bgColor: randomColor,
+        textColor: textColor,
+        subscriptions: []
+      }
+
+      await profilesDb.insert(defaultProfile).catch(console.error)
+      commit('setProfileList', [defaultProfile])
       return
     }
+
     // We want the primary profile to always be first
     // So sort with that then sort alphabetically by profile name
-    profiles = profiles.sort((a, b) => {
-      if (a._id === 'allChannels') {
-        return -1
-      }
-
-      if (b._id === 'allChannels') {
-        return 1
-      }
-
-      return b.name - a.name
-    })
+    profiles = profiles.sort(profileSort)
 
     if (state.profileList.length < profiles.length) {
       const profileIndex = profiles.findIndex((profile) => {
@@ -55,47 +73,18 @@ const actions = {
     commit('setProfileList', profiles)
   },
 
-  async grabProfileInfo(_, profileId) {
-    console.log(profileId)
-    return await profilesDb.findOne({ _id: profileId })
-  },
-
-  async createDefaultProfile({ dispatch }, defaultName) {
-    const randomColor = await dispatch('getRandomColor')
-    const textColor = await dispatch('calculateColorLuminance', randomColor)
-    const defaultProfile = {
-      _id: 'allChannels',
-      name: defaultName,
-      bgColor: randomColor,
-      textColor: textColor,
-      subscriptions: []
-    }
-
-    await profilesDb.update(
-      { _id: 'allChannels' },
-      defaultProfile,
-      { upsert: true }
-    )
-    dispatch('grabAllProfiles')
-  },
-
-  async updateProfile({ dispatch }, profile) {
-    await profilesDb.update(
+  updateProfile({ commit }, profile) {
+    profilesDb.update(
       { _id: profile._id },
       profile,
       { upsert: true }
-    )
-    dispatch('grabAllProfiles')
+    ).catch(console.error)
+    commit('upsertProfileToList', profile)
   },
 
-  async insertProfile({ dispatch }, profile) {
-    await profilesDb.insert(profile)
-    dispatch('grabAllProfiles')
-  },
-
-  async removeProfile({ dispatch }, profileId) {
-    await profilesDb.remove({ _id: profileId })
-    dispatch('grabAllProfiles')
+  removeProfile({ commit }, profileId) {
+    profilesDb.remove({ _id: profileId }).catch(console.error)
+    commit('removeProfileFromList', profileId)
   },
 
   compactProfiles(_) {
@@ -111,8 +100,29 @@ const mutations = {
   setProfileList(state, profileList) {
     state.profileList = profileList
   },
+
   setActiveProfile(state, activeProfile) {
     state.activeProfile = activeProfile
+  },
+
+  upsertProfileToList(state, updatedProfile) {
+    const i = state.profileList.findIndex((p) => {
+      return p._id === updatedProfile._id
+    })
+
+    if (i === -1) {
+      state.profileList.push(updatedProfile)
+    } else {
+      state.profileList.splice(i, 1, updatedProfile)
+    }
+  },
+
+  removeProfileFromList(state, profileId) {
+    const i = state.profileList.findIndex((profile) => {
+      return profile._id === profileId
+    })
+
+    state.profileList.splice(i, 1)
   }
 }
 

src/renderer/views/ProfileEdit/ProfileEdit.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtProfileEdit from '../../components/ft-profile-edit/ft-profile-edit.vue'
 import FtProfileChannelList from '../../components/ft-profile-channel-list/ft-profile-channel-list.vue'
@@ -15,16 +15,21 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      isLoading: false,
+      isLoading: true,
       isNew: false,
       profileId: '',
       profile: {}
     }
   },
   computed: {
+    ...mapGetters([
+      'profileById'
+    ]),
+
     profileList: function () {
       return this.$store.getters.getProfileList
     },
+
     isMainProfile: function () {
       return this.profileId === 'allChannels'
     }
@@ -32,23 +37,21 @@ export default Vue.extend({
   watch: {
     profileList: {
       handler: function () {
-        this.grabProfileInfo(this.profileId).then((profile) => {
-          if (profile === null) {
-            this.showToast({
-              message: this.$t('Profile.Profile could not be found')
-            })
-            this.$router.push({
-              path: '/settings/profile/'
-            })
-          }
-          this.profile = profile
-        })
+        const profile = this.profileById(this.profileId)
+        if (!profile) {
+          this.showToast({
+            message: this.$t('Profile.Profile could not be found')
+          })
+          this.$router.push({
+            path: '/settings/profile/'
+          })
+        }
+        this.profile = profile
       },
       deep: true
     }
   },
   mounted: async function () {
-    this.isLoading = true
     const profileType = this.$route.name
 
     this.deletePromptLabel = `${this.$t('Profile.Are you sure you want to delete this profile?')} ${this.$t('Profile["All subscriptions will also be deleted."]')}`
@@ -63,29 +66,27 @@ export default Vue.extend({
         textColor: textColor,
         subscriptions: []
       }
-      this.isLoading = false
     } else {
       this.isNew = false
       this.profileId = this.$route.params.id
 
-      this.grabProfileInfo(this.profileId).then((profile) => {
-        if (profile === null) {
-          this.showToast({
-            message: this.$t('Profile.Profile could not be found')
-          })
-          this.$router.push({
-            path: '/settings/profile/'
-          })
-        }
-        this.profile = profile
-        this.isLoading = false
-      })
+      const profile = this.profileById(this.profileId)
+      if (!profile) {
+        this.showToast({
+          message: this.$t('Profile.Profile could not be found')
+        })
+        this.$router.push({
+          path: '/settings/profile/'
+        })
+      }
+      this.profile = profile
     }
+
+    this.isLoading = false
   },
   methods: {
     ...mapActions([
       'showToast',
-      'grabProfileInfo',
       'getRandomColor',
       'calculateColorLuminance'
     ])