commit: 0822940594100422c5a813db1b96a491f78770f2
parent 1602d35f97ee4a163086c7eab76bd314512c8179
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Wed, 26 Feb 2025 18:32:55 +0000
Merge branch 'migrate/bookmark-folders-store-pinia' into 'develop'
Migrate bookmark folders state to pinia store
See merge request pleroma/pleroma-fe!2055
Diffstat:
12 files changed, 77 insertions(+), 84 deletions(-)
diff --git a/changelog.d/migrate-bookmark-folders-store-pinia.skip b/changelog.d/migrate-bookmark-folders-store-pinia.skip
diff --git a/src/components/bookmark_folder_edit/bookmark_folder_edit.js b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
@@ -1,5 +1,7 @@
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' })
}
}
diff --git a/src/components/bookmark_folders/bookmark_folders.js b/src/components/bookmark_folders/bookmark_folders.js
@@ -1,4 +1,5 @@
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: {
diff --git a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
@@ -1,6 +1,7 @@
-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
})
}
diff --git a/src/components/navigation/filter.js b/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,
diff --git a/src/components/navigation/navigation_pins.js b/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,
diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
@@ -1,6 +1,7 @@
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
diff --git a/src/components/timeline_menu/timeline_menu.js b/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
diff --git a/src/main.js b/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: {
diff --git a/src/modules/bookmark_folders.js b/src/modules/bookmark_folders.js
@@ -1,66 +0,0 @@
-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
diff --git a/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js b/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js
@@ -1,10 +1,11 @@
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(() => {})
}
diff --git a/src/stores/bookmark_folders.js b/src/stores/bookmark_folders.js
@@ -0,0 +1,51 @@
+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)
+ }
+ }
+})
