fix(front): fix tag loading

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

src/components/Event/TagInput.story.vue

@@ -1,7 +1,7 @@
 <template>
   <Story>
     <Variant title="new">
-      <TagInput v-model="tags" :fetch-tags="fetchTags" />
+      <TagInput v-model="tags" />
     </Variant>
     <!-- <Variant title="small">
       <TagInput v-model="tags" />
@@ -15,9 +15,4 @@ import { reactive } from "vue";
 import TagInput from "./TagInput.vue";
 
 const tags = reactive<ITag[]>([{ title: "Hello", slug: "hello" }]);
-
-const fetchTags = async () =>
-  new Promise<ITag[]>((resolve) => {
-    resolve([{ title: "Welcome", slug: "welcome" }]);
-  });
 </script>

src/components/Event/TagInput.vue

@@ -34,10 +34,11 @@ import { ITag } from "../../types/tag.model";
 import debounce from "lodash/debounce";
 import { computed, onBeforeMount, ref } from "vue";
 import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue";
+import { useFetchTags } from "@/composition/apollo/tags";
+import { FILTER_TAGS } from "@/graphql/tags";
 
 const props = defineProps<{
   modelValue: ITag[];
-  fetchTags: (text: string) => Promise<ITag[]>;
 }>();
 
 const emit = defineEmits(["update:modelValue"]);
@@ -56,9 +57,14 @@ const id = computed((): string => {
   return `tag-input-${componentId}`;
 });
 
+const { load: fetchTags } = useFetchTags();
+
 const getFilteredTags = async (newText: string): Promise<void> => {
   text.value = newText;
-  tags.value = await props.fetchTags(newText);
+  const res = await fetchTags(FILTER_TAGS, { filter: newText });
+  if (res) {
+    tags.value = res.tags;
+  }
 };
 
 const debouncedGetFilteredTags = debounce(getFilteredTags, 200);

src/composition/apollo/tags.ts

@@ -1,24 +1,7 @@
 import { FILTER_TAGS } from "@/graphql/tags";
 import { ITag } from "@/types/tag.model";
-import { apolloClient } from "@/vue-apollo";
+import { useLazyQuery } from "@vue/apollo-composable";
-import { provideApolloClient, useLazyQuery } from "@vue/apollo-composable";
 
-export async function fetchTags(text: string): Promise<ITag[]> {
+export function useFetchTags() {
-  try {
+  return useLazyQuery<{ tags: ITag[] }, { filter: string }>(FILTER_TAGS);
-    const { load: loadFetchTagsQuery } = useLazyQuery<
-      { tags: ITag[] },
-      { filter: string }
-    >(FILTER_TAGS);
-
-    const res = await provideApolloClient(apolloClient)(() =>
-      loadFetchTagsQuery(FILTER_TAGS, {
-        filter: text,
-      })
-    );
-    if (!res) return [];
-    return res.tags;
-  } catch (e) {
-    console.error(e);
-    return [];
-  }
 }

src/views/Event/EditView.vue

@@ -56,11 +56,7 @@
             </option>
           </o-select>
         </o-field>
-        <tag-input
+        <tag-input v-model="event.tags" class="flex-1" />
-          v-model="event.tags"
-          class="flex-1"
-          :fetch-tags="fetchTags"
-        />
       </div>
 
       <o-field
@@ -626,7 +622,6 @@ import {
   useTimezones,
 } from "@/composition/apollo/config";
 import { useMutation } from "@vue/apollo-composable";
-import { fetchTags } from "@/composition/apollo/tags";
 import { Dialog } from "@/plugins/dialog";
 import { Notifier } from "@/plugins/notifier";
 import { useHead } from "@unhead/vue";

src/views/Posts/EditView.vue

@@ -32,7 +32,7 @@
           />
         </o-field>
 
-        <tag-input v-model="editablePost.tags" :fetch-tags="fetchTags" />
+        <tag-input v-model="editablePost.tags" />
 
         <o-field :label="t('Post')">
           <p v-if="errors.body" class="help is-danger">{{ errors.body }}</p>
@@ -158,7 +158,6 @@ import { useI18n } from "vue-i18n";
 import { computed, inject, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useMutation, useQuery } from "@vue/apollo-composable";
-import { fetchTags } from "@/composition/apollo/tags";
 import { Dialog } from "@/plugins/dialog";
 
 const props = withDefaults(