Merge branch 'feature/issue-155-pinia-migration'

The4thLaw · Mar 11, 2024 · 32cff86 · 32cff86
2 parents 686a80e + 69737f6
commit 32cff86
Show file tree

Hide file tree

Showing 41 changed files with 448 additions and 401 deletions.
diff --git a/source/demyo-vue-frontend/package-lock.json b/source/demyo-vue-frontend/package-lock.json
diff --git a/source/demyo-vue-frontend/package.json b/source/demyo-vue-frontend/package.json
@@ -25,6 +25,7 @@
     "filepond-plugin-file-validate-type": "^1.2.6",
     "filepond-plugin-image-preview": "^4.6.11",
     "lodash": "^4.17.20",
+    "pinia": "^2.1.7",
     "portal-vue": "^2.1.7",
     "roboto-fontface": "^0.10.0",
     "tiny-async-pool": "^1.3.0",
@@ -35,8 +36,7 @@
     "vue-i18n": "^8.28.2",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.6.5",
-    "vuetify": "~2.6.14",
-    "vuex": "^3.6.2"
+    "vuetify": "~2.6.14"
   },
   "devDependencies": {
     "@types/jest": "^26.0.24",

diff --git a/source/demyo-vue-frontend/src/components/AlbumCard.vue b/source/demyo-vue-frontend/src/components/AlbumCard.vue
@@ -130,14 +130,15 @@
 </template>
 
 <script>
-import { sortedIndexOf } from 'lodash'
-import { mapState } from 'vuex'
 import FavouriteButton from '@/components/FavouriteButton'
 import FieldValue from '@/components/FieldValue'
 import ModelLink from '@/components/ModelLink'
 import TagLink from '@/components/TagLink'
 import { getBaseImageUrl } from '@/helpers/images'
 import readerService from '@/services/reader-service'
+import { useReaderStore } from '@/stores/reader'
+import { sortedIndexOf } from 'lodash'
+import { mapState } from 'pinia'
 
 export default {
 	name: 'AlbumCard',
@@ -187,8 +188,8 @@ export default {
 			return !(navigator.connection && navigator.connection.saveData)
 		},
 
-		...mapState({
-			readingList: state => state.reader.readingList
+		...mapState(useReaderStore, {
+			readingList: store => store.readingList
 		}),
 
 		isInReadingList() {

diff --git a/source/demyo-vue-frontend/src/components/CardTextIndex.vue b/source/demyo-vue-frontend/src/components/CardTextIndex.vue
@@ -39,9 +39,10 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import { focusElement } from '@/helpers/dom'
 import paginatedTextMixin from '@/mixins/paginated-text'
+import { useReaderStore } from '@/stores/reader'
+import { mapState } from 'pinia'
 
 /**
  * This component is a text-based index that allows the caller to provide cards for the items.
@@ -63,8 +64,8 @@ export default {
 	},
 
 	computed: {
-		...mapState({
-			itemsPerPage: state => state.reader.currentReader.configuration.pageSizeForCards
+		...mapState(useReaderStore, {
+			itemsPerPage: store => store.currentReader.configuration.pageSizeForCards
 		})
 	},
 

diff --git a/source/demyo-vue-frontend/src/components/CurrencyField.vue b/source/demyo-vue-frontend/src/components/CurrencyField.vue
@@ -7,8 +7,9 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import { isCurrencyPrefix, getCurrencySymbol } from '@/helpers/i18n'
+import { getCurrencySymbol, isCurrencyPrefix } from '@/helpers/i18n'
+import { useReaderStore } from '@/stores/reader'
+import { mapState } from 'pinia'
 
 export default {
 	name: 'CurrencyField',
@@ -41,9 +42,9 @@ export default {
 			return isCurrencyPrefix() ? null : getCurrencySymbol(this.currency)
 		},
 
-		...mapState({
-			currency: function (state) {
-				return state.reader.currentReader?.configuration?.currency
+		...mapState(useReaderStore, {
+			currency: function (store) {
+				return store.currentReader?.configuration?.currency
 			}
 		})
 	},

diff --git a/source/demyo-vue-frontend/src/components/FavouriteButton.vue b/source/demyo-vue-frontend/src/components/FavouriteButton.vue
@@ -13,9 +13,10 @@
 </template>
 
 <script>
-import { sortedIndexOf } from 'lodash'
-import { mapState } from 'vuex'
 import readerService from '@/services/reader-service'
+import { useReaderStore } from '@/stores/reader'
+import { sortedIndexOf } from 'lodash'
+import { mapState } from 'pinia'
 
 export default {
 	name: 'FavouriteButton',
@@ -40,12 +41,12 @@ export default {
 	},
 
 	computed: {
-		...mapState({
-			favourites: function (state) {
+		...mapState(useReaderStore, {
+			favourites: function (store) {
 				if (this.type === 'Album') {
-					return state.reader.favouriteAlbums
+					return store.favouriteAlbums
 				} else if (this.type === 'Series') {
-					return state.reader.favouriteSeries
+					return store.favouriteSeries
 				}
 				console.error('Invalid favourite type', this.type)
 				return []

diff --git a/source/demyo-vue-frontend/src/components/GalleryIndex.vue b/source/demyo-vue-frontend/src/components/GalleryIndex.vue
@@ -40,10 +40,13 @@
 </template>
 
 <script>
-import { get } from 'lodash'
-import { mapState } from 'vuex'
+// Easier for a dynamic access to the properties
+// eslint-disable-next-line you-dont-need-lodash-underscore/get
 import { focusElement } from '@/helpers/dom'
 import { getBaseImageUrl } from '@/helpers/images'
+import { useReaderStore } from '@/stores/reader'
+import { get } from 'lodash'
+import { mapState } from 'pinia'
 
 export default {
 	name: 'GalleryIndex',
@@ -78,8 +81,8 @@ export default {
 	},
 
 	computed: {
-		...mapState({
-			itemsPerPage: state => state.reader.currentReader.configuration.pageSizeForImages
+		...mapState(useReaderStore, {
+			itemsPerPage: store => store.currentReader.configuration.pageSizeForImages
 		}),
 
 		hasDefaultSlot() {

diff --git a/source/demyo-vue-frontend/src/components/MetaSeriesCard.vue b/source/demyo-vue-frontend/src/components/MetaSeriesCard.vue
@@ -55,9 +55,10 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import ItemCardPagination from '@/components/ItemCardPagination'
 import paginatedTextMixin from '@/mixins/paginated-text'
+import { useReaderStore } from '@/stores/reader'
+import { mapState } from 'pinia'
 
 export default {
 	name: 'MetaSeriesCard',
@@ -81,8 +82,8 @@ export default {
 			return this.meta.albums || []
 		},
 
-		...mapState({
-			itemsPerPage: state => state.reader.currentReader.configuration.subItemsInCardIndex
+		...mapState(useReaderStore, {
+			itemsPerPage: store => store.currentReader.configuration.subItemsInCardIndex
 		}),
 
 		cardLink() {

diff --git a/source/demyo-vue-frontend/src/components/PublisherCard.vue b/source/demyo-vue-frontend/src/components/PublisherCard.vue
@@ -39,9 +39,10 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import ItemCardPagination from '@/components/ItemCardPagination'
 import paginatedTextMixin from '@/mixins/paginated-text'
+import { useReaderStore } from '@/stores/reader'
+import { mapState } from 'pinia'
 
 export default {
 	name: 'PublisherCard',
@@ -65,8 +66,8 @@ export default {
 			return this.publisher.collections || []
 		},
 
-		...mapState({
-			itemsPerPage: state => state.reader.currentReader.configuration.subItemsInCardIndex
+		...mapState(useReaderStore, {
+			itemsPerPage: store => store.currentReader.configuration.subItemsInCardIndex
 		}),
 
 		hasCollections() {

diff --git a/source/demyo-vue-frontend/src/helpers/actions.js b/source/demyo-vue-frontend/src/helpers/actions.js
@@ -1,6 +1,6 @@
 import i18n from '@/i18n'
 import router from '@/router'
-import store from '@/store'
+import { useUiStore } from '@/stores/ui'
 
 /**
  * Stub for a save action in an edit component.
@@ -12,11 +12,12 @@ export async function saveStub(component, handler, routeName) {
 	if (!component.$refs.form.validate()) {
 		return
 	}
-	store.dispatch('ui/enableGlobalOverlay')
+	const uiStore = useUiStore()
+	uiStore.enableGlobalOverlay()
 	const id = await handler()
-	store.dispatch('ui/disableGlobalOverlay')
+	uiStore.disableGlobalOverlay()
 	if (id <= 0) {
-		store.dispatch('ui/showSnackbar', i18n.t('core.exception.api.title'))
+		uiStore.showSnackbar(i18n.t('core.exception.api.title'))
 	} else {
 		router.push({ name: routeName, params: { id: id } })
 	}
@@ -33,7 +34,8 @@ export async function deleteStub(component, handler, confirmationLabel, routeNam
 	component.appTasksMenu = false
 	const deleted = await handler()
 	if (deleted) {
-		store.dispatch('ui/showSnackbar', i18n.t(confirmationLabel))
+		const uiStore = useUiStore()
+		uiStore.showSnackbar(i18n.t(confirmationLabel))
 		router.push({ name: routeName })
 	}
 }