refactor: now use 'annotations Pinia store' and remove the 'Vuex anno… (

#10)

* refactor: now use 'annotations Pinia store' and remove the 'Vuex annotations module'

* refactor: add type checking (Typescript) for the function addActiveAnnotation()

* refactor: use 'typescript' for the function `setFilteredAnnotations()`

---------

Co-authored-by: malkja <[email protected]>

src/App.vue

@@ -38,6 +38,7 @@ import {
 } from 'vue';
 import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useAnnotationsStore } from './stores/annotations';
 
 import { useI18n } from 'vue-i18n';
 import GlobalHeader from '@/components/header/GlobalHeader.vue';
@@ -50,6 +51,7 @@ import { initUseDark } from '@/utils/is-dark';
 
 const store = useStore();
 const configStore = useConfigStore()
+const annotationStore = useAnnotationsStore()
 const { t, locale: i18nLocale } = useI18n();
 
 const errorTitle = ref('');
@@ -76,7 +78,7 @@ const ready = computed(() => {
 
   return true;
 });
-const annotations = computed<Annotation[]>(() => store.getters['annotations/annotations']);
+const annotations = computed<Annotation[]>(() => annotationStore.annotations);
 const config = computed(() => configStore.config);
 const collection = computed<Collection>(() => store.getters['contents/collection']);
 const item = computed<Item>(() => store.getters['contents/item']);
@@ -150,4 +152,5 @@ function setColorMode(configValue: string) {
     document.querySelector(config.value.container).setAttribute('color-scheme', configValue);
   }
 }
-</script>
+
+</script>

src/components/ContentView.vue

@@ -23,6 +23,7 @@ import {
 } from 'vue';
 import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useAnnotationsStore } from '@/stores/annotations';
 import Notification from '@/components/Notification.vue';
 import { request } from '@/utils/http';
 import { domParser, delay } from '@/utils';
@@ -52,6 +53,7 @@ watch(
   { immediate: true },
 );
 async function loadContent(url) {
+  const annotationStore = useAnnotationsStore()
   content.value = '';
   try {
     if (!url) {
@@ -70,8 +72,8 @@ async function loadContent(url) {
       emit('loading', false);
 
       const root = document.getElementById('text-content');
-      store.dispatch('annotations/addHighlightAttributesToText', root);
-      await store.dispatch('annotations/addHighlightClickListeners');
+      annotationStore.addHighlightAttributesToText(root)
+      await annotationStore.addHighlightClickListeners()
 
       // TODO: Enable Hover + Tooltip feature when reqs are clarified
       // await store.dispatch('annotations/addHighlightHoverListeners');

src/components/annotations/AnnotationsView.vue

@@ -29,8 +29,10 @@ import Notification from '@/components/Notification.vue';
 import * as AnnotationUtils from '@/utils/annotations';
 
 import { useConfigStore } from '@/stores/config';
+import { useAnnotationsStore } from '@/stores/annotations';
 
 const configStore = useConfigStore()
+const annotationStore = useAnnotationsStore()
 
 const props = defineProps({
   url: String,
@@ -41,9 +43,9 @@ const store = useStore();
 const message = ref('no_annotations_in_view');
 
 const config = computed(() => configStore.config);
-const annotations = computed<Annotation[]>(() => store.getters['annotations/annotations']);
-const activeAnnotations = computed<ActiveAnnotation>(() => store.getters['annotations/activeAnnotations']);
-const filteredAnnotations = computed<Annotation[]>(() => store.getters['annotations/filteredAnnotations']);
+const annotations = computed<Annotation[]>(() => annotationStore.annotations);
+const activeAnnotations = computed<ActiveAnnotation>(() => annotationStore.activeAnnotations);
+const filteredAnnotations = computed<Annotation[]>(() =>  annotationStore.filteredAnnotations);
 const activeContentUrl = computed<string>(() => store.getters['contents/activeContentUrl']);
 const updateTextHighlighting = computed(() =>
   // We need to make sure that annotations are loaded (this.annotations),
@@ -56,19 +58,19 @@ watch(
   (contentData) => {
     const [hasAnnotations, activeContentUrl] = contentData.split('|');
     if (hasAnnotations !== 'true' || activeContentUrl === 'null') return;
-    store.dispatch('annotations/resetAnnotations');
-    store.dispatch('annotations/setFilteredAnnotations', props.types);
+    annotationStore.resetAnnotations()
+    annotationStore.selectFilteredAnnotations(props.types)
     highlightTargetsLevel0();
   },
   { immediate: true },
 );
 
 function addAnnotation(id: string) {
-  store.dispatch('annotations/addActiveAnnotation', id);
+  annotationStore.addActiveAnnotation(id);
 }
 
 function removeAnnotation(id: string) {
-  store.dispatch('annotations/removeActiveAnnotation', id);
+  annotationStore.removeActiveAnnotation(id);
 }
 
 function toggle({ id }) {

src/components/panels/Panel.vue

@@ -96,6 +96,7 @@ import {
 } from 'vue';
 import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useAnnotationsStore } from '@/stores/annotations';
 import { useI18n } from 'vue-i18n';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
@@ -227,6 +228,7 @@ export default {
     }
 
     function createAnnotationsView(view, i) {
+      const annotationStore = useAnnotationsStore()
       const { connector, label } = view;
       const { component } = findComponent(connector.id);
 
@@ -238,26 +240,32 @@ export default {
       const events = {
         update: (value) => {
           if (value === null) return;
-          store.dispatch(value ? 'annotations/selectAll' : 'annotations/selectNone');
+          if (value) annotationStore.selectAll()
+          else annotationStore.selectNone()
         },
       };
 
-      unsubscribe.value = store.subscribeAction(async ({ type, payload }) => {
+      unsubscribe.value = annotationStore.$onAction(({name, store, args, after, onError }) => { 
+        
         if (tabs.value.length
-          && tabs.value[0]?.actions?.length
-          && type === 'annotations/setActiveAnnotations'
-        ) {
-          const activeAmount = Object.keys(payload).length;
-          const filteredAmount = store.getters['annotations/filteredAnnotations'].length;
-
+          && tabs.value[0]?.actions?.length &&
+          (name === 'setActiveAnnotations'))
+          {
+          const activeAnnotations = args[0];  
+          const activeAmount = Object.keys(activeAnnotations).length;
+          const filteredAmount = annotationStore.filteredAnnotations.length;
           let newSelected = activeAmount > 0 && activeAmount === filteredAmount;
-          if (!newSelected && Object.keys(payload).length > 0) newSelected = null;
+
+          if (!newSelected && activeAmount > 0) newSelected = null;
+          
+
           if (tabs.value[i].actions[0].props.selected !== newSelected) {
             tabs.value[i].actions[0].props.selected = newSelected;
-          }
-        }
+            }
+        }  
       });
 
+
       const actions = [{
         component: 'PanelToggleAction',
         props: {
@@ -341,4 +349,4 @@ export default {
     };
   },
 };
-</script>
+</script>