Migrate bookmark folders state to pinia store

src/components/bookmark_folder_edit/bookmark_folder_edit.js

 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import apiService from '../../services/api/api.service'
+import { useInterfaceStore } from 'src/stores/interface'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 const BookmarkFolderEdit = {
   data () {
@@ -52,18 +54,18 @@ const BookmarkFolderEdit = {
       this.emojiPickerExpanded = false
     },
     updateFolder () {
-      this.$store.dispatch('setBookmarkFolder', { folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
+      useBookmarkFoldersStore().updateBookmarkFolder({ folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
         .then(() => {
           this.$router.push({ name: 'bookmark-folders' })
         })
     },
     createFolder () {
-      this.$store.dispatch('createBookmarkFolder', { name: this.nameDraft, emoji: this.emojiDraft })
+      useBookmarkFoldersStore().createBookmarkFolder({ name: this.nameDraft, emoji: this.emojiDraft })
         .then(() => {
           this.$router.push({ name: 'bookmark-folders' })
         })
         .catch((e) => {
-          this.$store.useInterfaceStore().pushGlobalNotice({
+          useInterfaceStore().pushGlobalNotice({
             messageKey: 'bookmark_folders.error',
             messageArgs: [e.message],
             level: 'error'
@@ -71,7 +73,7 @@ const BookmarkFolderEdit = {
         })
     },
     deleteFolder () {
-      this.$store.dispatch('deleteBookmarkFolder', { folderId: this.id })
+      useBookmarkFoldersStore().deleteBookmarkFolder({ folderId: this.id })
       this.$router.push({ name: 'bookmark-folders' })
     }
   }

src/components/bookmark_folders/bookmark_folders.js

 import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 const BookmarkFolders = {
   data () {
@@ -11,7 +12,7 @@ const BookmarkFolders = {
   },
   computed: {
     bookmarkFolders () {
-      return this.$store.state.bookmarkFolders.allFolders
+      return useBookmarkFoldersStore().allFolders
     }
   },
   methods: {

src/components/bookmark_folders_menu/bookmark_folders_menu_content.js

-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import { getBookmarkFolderEntries } from 'src/components/navigation/filter.js'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 export const BookmarkFoldersMenuContent = {
   props: [
@@ -10,7 +11,7 @@ export const BookmarkFoldersMenuContent = {
     NavigationEntry
   },
   computed: {
-    ...mapState({
+    ...mapState(useBookmarkFoldersStore, {
       folders: getBookmarkFolderEntries
     })
   }

src/components/navigation/filter.js

@@ -19,7 +19,7 @@ export const getListEntries = store => store.allLists.map(list => ({
   iconLetter: list.title[0]
 }))
 
-export const getBookmarkFolderEntries = state => state.bookmarkFolders.allFolders.map(folder => ({
+export const getBookmarkFolderEntries = store => store.allFolders.map(folder => ({
   name: 'bookmark-folder-' + folder.id,
   routeObject: { name: 'bookmark-folder', params: { id: folder.id } },
   labelRaw: folder.name,

src/components/navigation/navigation_pins.js

@@ -19,6 +19,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { useListsStore } from 'src/stores/lists'
 import { useAnnouncementsStore } from 'src/stores/announcements'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 library.add(
   faUsers,
@@ -52,8 +53,10 @@ const NavPanel = {
     ...mapPiniaState(useAnnouncementsStore, {
       supportsAnnouncements: store => store.supportsAnnouncements
     }),
+    ...mapPiniaState(useBookmarkFoldersStore, {
+      bookmarks: getBookmarkFolderEntries
+    }),
     ...mapState({
-      bookmarks: getBookmarkFolderEntries,
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,
       privateMode: state => state.instance.private,

src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js

 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronRight, faFolder } from '@fortawesome/free-solid-svg-icons'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 import Popover from 'src/components/popover/popover.vue'
 import StillImage from 'src/components/still-image/still-image.vue'
@@ -20,8 +21,8 @@ const StatusBookmarkFolderMenu = {
     StillImage
   },
   computed: {
-    ...mapState({
-      folders: state => state.bookmarkFolders.allFolders
+    ...mapState(useBookmarkFoldersStore, {
+      folders: store => store.allFolders
     }),
     folderId () {
       return this.status.bookmark_folder_id

src/components/timeline_menu/timeline_menu.js

@@ -11,6 +11,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { useInterfaceStore } from 'src/stores/interface'
 import { useListsStore } from 'src/stores/lists'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 library.add(faChevronDown)
 
@@ -100,7 +101,7 @@ const TimelineMenu = {
         return useListsStore().findListTitle(this.$route.params.id)
       }
       if (route === 'bookmark-folder') {
-        return this.$store.getters.findBookmarkFolderName(this.$route.params.id)
+        return useBookmarkFoldersStore().findBookmarkFolderName(this.$route.params.id)
       }
       const i18nkey = timelineNames(this.bookmarkFolders)[this.$route.name]
       return i18nkey ? this.$t(i18nkey) : route

src/main.js

@@ -19,7 +19,6 @@ import authFlowModule from './modules/auth_flow.js'
 import oauthTokensModule from './modules/oauth_tokens.js'
 import draftsModule from './modules/drafts.js'
 import chatsModule from './modules/chats.js'
-import bookmarkFoldersModule from './modules/bookmark_folders.js'
 
 import { createI18n } from 'vue-i18n'
 
@@ -105,8 +104,7 @@ const persistedStateOptions = {
         authFlow: authFlowModule,
         oauthTokens: oauthTokensModule,
         drafts: draftsModule,
-        chats: chatsModule,
-        bookmarkFolders: bookmarkFoldersModule
+        chats: chatsModule
       },
       plugins,
       options: {

src/modules/bookmark_folders.js

-import { remove, find } from 'lodash'
-
-export const defaultState = {
-  allFolders: []
-}
-
-export const mutations = {
-  setBookmarkFolders (state, value) {
-    state.allFolders = value
-  },
-  setBookmarkFolder (state, { id, name, emoji, emoji_url: emojiUrl }) {
-    const entry = find(state.allFolders, { id })
-    if (!entry) {
-      state.allFolders.push({ id, name, emoji, emoji_url: emojiUrl })
-    } else {
-      entry.name = name
-      entry.emoji = emoji
-      entry.emoji_url = emojiUrl
-    }
-  },
-  deleteBookmarkFolder (state, { folderId }) {
-    remove(state.allFolders, folder => folder.id === folderId)
-  }
-}
-
-const actions = {
-  setBookmarkFolders ({ commit }, value) {
-    commit('setBookmarkFolders', value)
-  },
-  createBookmarkFolder ({ rootState, commit }, { name, emoji }) {
-    return rootState.api.backendInteractor.createBookmarkFolder({ name, emoji })
-      .then((folder) => {
-        commit('setBookmarkFolder', folder)
-        return folder
-      })
-  },
-  setBookmarkFolder ({ rootState, commit }, { folderId, name, emoji }) {
-    return rootState.api.backendInteractor.updateBookmarkFolder({ folderId, name, emoji })
-      .then((folder) => {
-        commit('setBookmarkFolder', folder)
-        return folder
-      })
-  },
-  deleteBookmarkFolder ({ rootState, commit }, { folderId }) {
-    rootState.api.backendInteractor.deleteBookmarkFolder({ folderId })
-    commit('deleteBookmarkFolder', { folderId })
-  }
-}
-
-export const getters = {
-  findBookmarkFolderName: state => id => {
-    const folder = state.allFolders.find(folder => folder.id === id)
-
-    if (!folder) return
-    return folder.name
-  }
-}
-
-const bookmarkFolders = {
-  state: defaultState,
-  mutations,
-  actions,
-  getters
-}
-
-export default bookmarkFolders

src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js

 import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
 
-const fetchAndUpdate = ({ store, credentials }) => {
+const fetchAndUpdate = ({ credentials }) => {
   return apiService.fetchBookmarkFolders({ credentials })
     .then(bookmarkFolders => {
-      store.commit('setBookmarkFolders', bookmarkFolders)
+      useBookmarkFoldersStore().setBookmarkFolders(bookmarkFolders)
     }, () => {})
     .catch(() => {})
 }

src/stores/bookmark_folders.js

+import { remove, find } from 'lodash'
+import { defineStore } from 'pinia'
+
+export const useBookmarkFoldersStore = defineStore('bookmarkFolders', {
+  state: () => ({
+    allFolders: []
+  }),
+  getters: {
+    findBookmarkFolderName () {
+      return (id) => {
+        const folder = this.allFolders.find(folder => folder.id === id)
+  
+        if (!folder) return
+        return folder.name
+      }
+    }
+  },
+  actions: {
+    setBookmarkFolders (value) {
+      this.allFolders = value
+    },
+    setBookmarkFolder ({ id, name, emoji, emoji_url: emojiUrl }) {
+      const entry = find(this.allFolders, { id })
+      if (!entry) {
+        this.allFolders.push({ id, name, emoji, emoji_url: emojiUrl })
+      } else {
+        entry.name = name
+        entry.emoji = emoji
+        entry.emoji_url = emojiUrl
+      }
+    },
+    createBookmarkFolder ({ name, emoji }) {
+      return window.vuex.state.api.backendInteractor.createBookmarkFolder({ name, emoji })
+        .then((folder) => {
+          this.setBookmarkFolder(folder)
+          return folder
+        })
+    },
+    updateBookmarkFolder ({ folderId, name, emoji }) {
+      return window.vuex.state.api.backendInteractor.updateBookmarkFolder({ folderId, name, emoji })
+        .then((folder) => {
+          this.setBookmarkFolder(folder)
+          return folder
+        })
+    },
+    deleteBookmarkFolder ({ folderId }) {
+      window.vuex.state.api.backendInteractor.deleteBookmarkFolder({ folderId })
+      remove(this.allFolders, folder => folder.id === folderId)
+    }
+  }
+})