refactor: use 'config' Pinia store - drop the usage of 'config' Vuex …

…module (#4) * refactor: clean code * refactor: create a 'config' pinia store and a 'config' interface in Typescript * refactor: remove the usage of 'config' Vuex module and instead use 'config' Pinia store * refactor: adapt other components to now use 'config' Pinia store * refactor: minor * refactor: refine 'Config' interface in Typescript to adhere to 'custom' config * refactor: changes in 'Config' interface * refactor: use 'config' Pinia Store in different components, remove 'config' Vuex Module --------- Co-authored-by: malkja <[email protected]>
subugoe · May 31, 2024 · 44f535f · 44f535f
1 parent 269e814
commit 44f535f
Show file tree

Hide file tree

Showing 35 changed files with 799 additions and 739 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "http-server": "^14.1.1",
     "ncp": "^2.0.0",
     "openseadragon": "^3.1.0",
+    "pinia": "^2.1.7",
     "primevue": "^3.49.1",
     "sass": "^1.71.1",
     "standard-version": "^9.5.0",

diff --git a/src/App.vue b/src/App.vue
@@ -26,17 +26,19 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'TIDO',
 };
 </script>
 
-<script setup>
+<script setup lang="ts">
 import {
   computed, inject, onMounted, ref,
 } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '@/stores/config';
+
 import { useI18n } from 'vue-i18n';
 import GlobalHeader from '@/components/header/GlobalHeader.vue';
 import { delay } from '@/utils';
@@ -47,6 +49,7 @@ import BaseIcon from '@/components/base/BaseIcon.vue';
 import { initUseDark } from '@/utils/is-dark';
 
 const store = useStore();
+const configStore = useConfigStore()
 const { t, locale: i18nLocale } = useI18n();
 
 const errorTitle = ref('');
@@ -55,7 +58,6 @@ const isLoading = ref(true);
 
 const ready = computed(() => {
   const { collection: collectionUrl, manifest: manifestUrl } = config.value;
-
   if (!item.value) {
     return false;
   }
@@ -74,12 +76,12 @@ const ready = computed(() => {
 
   return true;
 });
-const annotations = computed(() => store.getters['annotations/annotations']);
-const config = computed(() => store.getters['config/config']);
-const collection = computed(() => store.getters['contents/collection']);
-const item = computed(() => store.getters['contents/item']);
-const manifest = computed(() => store.getters['contents/manifest']);
-const manifests = computed(() => store.getters['contents/manifests']);
+const annotations = computed<Annotation[]>(() => store.getters['annotations/annotations']);
+const config = computed(() => configStore.config);
+const collection = computed<Collection>(() => store.getters['contents/collection']);
+const item = computed<Item>(() => store.getters['contents/item']);
+const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
+const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
 initUseDark(config.value.container);
 
 onMounted(async () => {
@@ -103,22 +105,22 @@ onMounted(async () => {
   await init();
 });
 
-async function getCollection(url) {
+async function getCollection(url: string) {
   await store.dispatch('contents/initCollection', url);
 }
 async function loadConfig() {
   try {
     const config = inject('config');
-    await store.dispatch('config/load', config);
+    await configStore.load(config)
   } catch ({ title, message }) {
     errorTitle.value = t('config_error');
     errorMessage.value = t(message);
   }
 }
-async function getManifest(url) {
+async function getManifest(url: string) {
   await store.dispatch('contents/initManifest', url);
 }
-async function getItem(url) {
+async function getItem(url: string) {
   await store.dispatch('contents/initItem', url);
 }
 async function init() {
@@ -129,7 +131,6 @@ async function init() {
     // If a collection is given we ignore the manifest setting
     // and try to figure out the correct manifest by searching for the above item.
     // Otherwise, no collection is given but a single manifest instead, so we load that manifest.
-
     if (collection) {
       await getCollection(collection);
     } else if (manifest) {
@@ -146,4 +147,4 @@ async function init() {
     isLoading.value = false;
   }
 }
-</script>
+</script>
diff --git a/src/components/ContentView.vue b/src/components/ContentView.vue
@@ -22,6 +22,7 @@ import {
   computed, readonly, ref, watch,
 } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '@/stores/config';
 import Notification from '@/components/Notification.vue';
 import { request } from '@/utils/http';
 import { domParser, delay } from '@/utils';
@@ -34,12 +35,13 @@ const props = defineProps({
 const emit = defineEmits(['loading']);
 
 const store = useStore();
+const configStore = useConfigStore()
 
 const content = ref('');
 const errorTextMessage = ref(null);
 const notificationMessage = readonly(errorTextMessage);
 
-const config = computed(() => store.getters['config/config']);
+const config = computed(() => configStore.config);   
 const contentStyle = computed(() => ({
   fontSize: `${props.fontSize}px`,
 }));
@@ -118,4 +120,4 @@ function isValidTextContent(text) {
 .rtl {
   direction: rtl;
 }
-</style>
+</style>