fix issue with articles

components/content/ArticleDoi.vue

 <script setup lang="ts">
 import { useDisplay } from "vuetify";
 import type { WikiArticle } from '@/types/articles';
+import { useFetchArticle } from "../../composables/useFetchArticle";
 
 export interface Props {
   index?: number;
@@ -19,16 +20,15 @@ const props = withDefaults(defineProps<Props>(), {
   isRelevant: false,
 });
 
-const article = ref<WikiArticle | undefined>(undefined)
+// const article = ref<WikiArticle | undefined>(undefined)
 const { mobile } = useDisplay();
 const show = ref(false);
 
 
 
-onMounted(() => {
-  const { article: articleOnMounted } = useFetchArticle(props.doi);
-  article.value = articleOnMounted.value
-})
+
+const { article } = useFetchArticle(props.doi);
+
 
 const articleTitle = computed(() => {
   return props?.title ?? article?.value?.title ?? props.doi;
@@ -38,8 +38,8 @@ const articleAbstract = computed(() => {
 });
 </script>
 <template>
-  <v-list-item :href="article?.href" :id="`ref-${props.doi}`" :target="article?.target" density="compact"
-    color="transparent" class="px-1">
+  <v-list-item v-if="article?.DOI" :href="article?.href" :id="`ref-${props.doi}`" :target="article?.target"
+    density="compact" color="transparent" class="px-1">
     <template v-if="!mobile" #prepend>
       <v-icon icon="md:star" :color="props.isRelevant ? 'info' : 'transparent'"></v-icon>
     </template>

composables/useFetchArticle.ts

@@ -6,6 +6,7 @@ import type { SearchParams } from 'meilisearch'
 export function useFetchArticle(doi: string = "") {
     const doiBaseUrl = ref(new URL("https://doi.org/"));
     const article = useSessionStorage<WikiArticle | undefined>(doi, null, { serializer: StorageSerializers.object })
+    // const article = ref<WikiArticle | undefined>(null)
     const client = useMeiliSearchRef()
     const index = ref("article")
     const params = ref<SearchParams>({
@@ -24,6 +25,7 @@ export function useFetchArticle(doi: string = "") {
             .join(", ");
     }
     function zoteroArticleToArticle(zoteroArticle: CslJson): WikiArticle | undefined {
+        console.log(zoteroArticle)
         if (zoteroArticle != undefined) {
             const {
                 DOI,
@@ -50,10 +52,13 @@ export function useFetchArticle(doi: string = "") {
     }
 
     if (!article.value) {
-        client.index(toValue(index)).search<CslJson>("", toValue(params)).then((response) => {
-            const sanitizedData = zoteroArticleToArticle(response.hits[0])
-            article.value = sanitizedData
+        client.index(toValue(index)).search<CslJson>("", toValue(params)).then((data) => {
+            if (data !== undefined && data?.hits.length >= 1) {
+                const sanitizedData = zoteroArticleToArticle(data.hits[0])
+                article.value = sanitizedData
+            }
         }).catch((error) => {
+            console.log(error)
             article.value = { DOI: doi }
         })
     }

pages/[...slug].vue

@@ -6,7 +6,6 @@ function resetError(error) {
 <template>
   <v-card-text>
     <NuxtErrorBoundary>
-      <!-- ... -->
       <template #error="{ error }">
         <ErrorAlert :error="error" @clear-error="resetError(error)"></ErrorAlert>
       </template>