Use nuxtopenfetch

website/app/app.vue

@@ -6,14 +6,14 @@
                 <NuxtLink to="https://github.com/C9Glax/tranga-website"
                     ><Icon name="i-lucide-github" />Website</NuxtLink
                 >
-                <NuxtLink :to="`${$config.public.apiParty.endpoints.api?.url}swagger`"
+                <NuxtLink :to="`${$config.public.openFetch.api.baseURL}swagger`"
                     ><Icon name="i-lucide-book-open" />Swagger</NuxtLink
                 >
             </template>
             <template #default>
                 <NuxtLink to="/">
                     <div class="h-full flex gap-2 items-center">
-                        <img src="/blahaj.png" class="h-lh cursor-grab" />
+                        <img src="/blahaj.png" class="h-lh cursor-grab" >
                         <p
                             style="
                                 background: linear-gradient(110deg, var(--color-pink), var(--color-blue));

website/app/components/AddLibraryModal.vue

@@ -15,20 +15,22 @@
 </template>
 
 <script setup lang="ts">
-import type { ApiModel } from '#nuxt-api-party';
+import type { components } from '#open-fetch-schemas/api';
+type CreateLibraryRecord = components['schemas']['CreateLibraryRecord'];
 
 const name = ref('');
 const path = ref('');
 
-const model = computed((): ApiModel<'CreateLibraryRecord'> => {
+const model: ComputedRef = computed((): CreateLibraryRecord => {
     return { basePath: path.value, libraryName: name.value };
 });
 
 const busy = ref(false);
 const onAddClick = async () => {
+    if (!model.value) return;
     busy.value = true;
-    await $api('/v2/FileLibrary', { method: 'PUT', body: model.value })
-        .then(() => refreshNuxtData(Keys.FileLibraries))
+    await useApi('/v2/FileLibrary', { method: 'PUT', body: model.value })
+        .then(() => refreshNuxtData(FetchKeys.FileLibraries))
         .finally(() => (busy.value = false));
 };
 </script>

website/app/components/ChaptersList.vue

@@ -36,7 +36,7 @@ export interface ChaptersListProps {
 }
 const props = defineProps<ChaptersListProps>();
 
-const { data: chapters } = await useApiData('/v2/Manga/{MangaId}/Chapters', {
+const { data: chapters } = await useApi('/v2/Manga/{MangaId}/Chapters', {
     path: { MangaId: props.mangaId },
     key: FetchKeys.Chapters.All,
 });

website/app/components/FileLibraries.vue

@@ -13,14 +13,14 @@
 </template>
 
 <script setup lang="ts">
-import type { ApiModel } from '#nuxt-api-party';
-type FileLibrary = ApiModel<'FileLibrary'>;
-const { data: fileLibraries } = await useApiData('/v2/FileLibrary', { key: FetchKeys.FileLibraries });
+import type { components } from '#open-fetch-schemas/api';
+type FileLibrary = components['schemas']['FileLibrary'];
+const { data: fileLibraries } = await useApi('/v2/FileLibrary', { key: FetchKeys.FileLibraries });
 
 const busy = ref(false);
-const deleteLibrary = async (l: FileLibrary) => {
+const deleteLibrary = async (library: FileLibrary) => {
     busy.value = true;
-    await $api('/v2/FileLibrary/{FileLibraryId}', { path: { FileLibraryId: l.key }, method: 'DELETE' })
+    await useApi('/v2/FileLibrary/{FileLibraryId}', { path: { FileLibraryId: library.key }, method: 'DELETE' })
         .then(() => refreshNuxtData(FetchKeys.FileLibraries))
         .finally(() => (busy.value = false));
 };

website/app/components/MangaCard.vue

@@ -33,10 +33,10 @@
 </template>
 
 <script setup lang="ts">
-import type { ApiModel } from '#nuxt-api-party';
+import type { components } from '#open-fetch-schemas/api';
 import type { PageCardProps } from '#ui/components/PageCard.vue';
-type Manga = ApiModel<'Manga'>;
-type MinimalManga = ApiModel<'MinimalManga'>;
+type Manga = components['schemas']['Manga'];
+type MinimalManga = components['schemas']['MinimalManga'];
 
 defineProps<MangaCardProps>();
 defineEmits(['click']);

website/app/components/MangaCover.vue

@@ -12,14 +12,15 @@
             <p class="p-3 text-xl font-semibold max-h-full overflow-clip">{{ manga?.name }}</p>
         </div>
         <LazyNuxtImg
-            :src="`${$config.public.apiParty.endpoints.Api!.url}v2/Manga/${manga.key}/Cover/Medium`"
+            :src="`${$config.public.openFetch.api.baseURL}v2/Manga/${manga.key}/Cover/Medium`"
             class="w-full h-full object-cover" />
     </div>
 </template>
 
 <script setup lang="ts">
-import type { ApiModel } from '#nuxt-api-party';
-type MinimalManga = ApiModel<'MinimalManga'>;
-type Manga = ApiModel<'Manga'>;
+import type { components } from '#open-fetch-schemas/api';
+type Manga = components['schemas']['Manga'];
+type MinimalManga = components['schemas']['MinimalManga'];
+
 defineProps<{ manga: Manga | MinimalManga; blur?: boolean }>();
 </script>

website/app/components/MangaDetailPage.vue

@@ -40,8 +40,8 @@
 </template>
 
 <script setup lang="ts">
-import type { ApiModel } from '#nuxt-api-party';
-type Manga = ApiModel<'Manga'>;
+import type { components } from '#open-fetch-schemas/api';
+type Manga = components['schemas']['Manga'];
 
 export interface MangaDetailPageProps {
     manga?: Manga;

website/app/components/MangaconnectorIcon.vue

@@ -14,12 +14,12 @@
 </template>
 
 <script setup lang="ts">
-import type { ApiModel } from '#nuxt-api-party';
-type MangaConnectorId = /* @vue-ignore */ ApiModel<'MangaConnectorId'>;
+import type { components } from '#open-fetch-schemas/api';
+type MangaConnectorId = components['schemas']['MangaConnectorId'];
 
 const props = defineProps<MangaConnectorId>();
 
-const { data: mangaConnector } = await useApiData('/v2/MangaConnector/{MangaConnectorName}', {
+const { data: mangaConnector } = await useApi('/v2/MangaConnector/{MangaConnectorName}', {
     path: { MangaConnectorName: props.mangaConnectorName },
     key: FetchKeys.MangaConnector.Id(props.mangaConnectorName),
 });

website/app/pages/download/[mangaId].vue

@@ -8,7 +8,7 @@ import MangaDetailPage from '~/components/MangaDetailPage.vue';
 const route = useRoute();
 const mangaId = route.params.MangaId as string;
 
-const { data: manga } = await useApiData('/v2/Manga/{MangaId}', {
+const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     path: { MangaId: mangaId },
     key: FetchKeys.Manga.Id(mangaId),
 });

website/app/pages/index.vue

@@ -13,8 +13,6 @@
 </template>
 
 <script setup lang="ts">
-const { data: manga } = await useApiData('/v2/Manga', { key: FetchKeys.Manga.All });
+const { data: manga } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All });
 const expanded = ref(-1);
 </script>
-
-<style scoped></style>

website/app/pages/manga/[mangaId]/index.vue

@@ -11,9 +11,9 @@
 import MangaDetailPage from '~/components/MangaDetailPage.vue';
 
 const route = useRoute();
-const mangaId = route.params.MangaId as string;
+const mangaId = route.params.mangaId as string;
 
-const { data: manga } = await useApiData('/v2/Manga/{MangaId}', {
+const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     path: { MangaId: mangaId },
     key: FetchKeys.Manga.Id(mangaId),
 });

website/app/pages/manga/[mangaId]/merge/[targetId].vue

@@ -24,11 +24,11 @@ const route = useRoute();
 const targetId = route.params.targetId as string;
 const mangaId = route.params.mangaId as string;
 
-const { data: target } = await useApiData('/v2/Manga/{MangaId}', {
+const { data: target } = await useApi('/v2/Manga/{MangaId}', {
     path: { MangaId: targetId },
     key: FetchKeys.Manga.Id(targetId),
 });
-const { data: manga } = await useApiData('/v2/Manga/{MangaId}', {
+const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     path: { MangaId: mangaId },
     key: FetchKeys.Manga.Id(mangaId),
 });

website/app/pages/manga/[mangaId]/merge/index.vue

@@ -12,10 +12,11 @@
 
 <script setup lang="ts">
 const route = useRoute();
+const mangaId = route.params.mangaId as string;
 
-const { data: manga } = await useApiData('/v2/Manga/{MangaId}', {
-    path: { MangaId: route.params.mangaId as string },
+const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
+    path: { MangaId: mangaId },
     key: FetchKeys.Manga.Id(mangaId),
 });
-const { data: mangas } = await useApiData('/v2/Manga', { key: FetchKeys.Manga.All });
+const { data: mangas } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All });
 </script>

website/app/pages/search.vue

@@ -46,12 +46,13 @@
 </template>
 
 <script setup lang="ts">
-import { $api, type ApiModel } from '#nuxt-api-party';
+import type { components } from '#open-fetch-schemas/api';
 import type { StepperItem } from '@nuxt/ui';
-type MangaConnector = ApiModel<'MangaConnector'>;
-type MinimalManga = ApiModel<'MinimalManga'>;
+import type { AsyncData, FetchResult } from '#app';
+type MangaConnector = components['schemas']['MangaConnector'];
+type MinimalManga = components['schemas']['MinimalManga'];
 
-const { data: connectors } = await useApiData('/v2/MangaConnector', { FetchKeys: FetchKeys.MangaConnector.All });
+const { data: connectors } = await useApi('/v2/MangaConnector', { key: FetchKeys.MangaConnector.All });
 
 const query = ref<string>();
 const connector = useState<MangaConnector>();
@@ -91,21 +92,19 @@ const performSearch = () => {
         .finally(() => (busy.value = false));
 };
 
-const config = useRuntimeConfig();
-
 const search = async (query: string): Promise<MinimalManga[]> => {
     if (isUrl(query)) {
-        return await $api<'/v2/Search/Url', MinimalManga>('/v2/Search/Url', {
-            body: JSON.stringify(query),
-            method: 'POST',
-        }).then((x) => [x]);
-    } else if (connector.value) {
-        return await $api('/v2/Search/{MangaConnectorName}/{Query}', {
-            path: { MangaConnectorName: connector.value.name, query: query },
-            method: 'POST',
+        const { data } = await useApi('/v2/Search/Url', { body: JSON.stringify(query), method: 'POST' });
+        if (data.value) return [data.value];
+        else return Promise.reject();
+    } else if (connector.value.name) {
+        const { data } = await useApi('/v2/Search/{MangaConnectorName}/{Query}', {
+            path: { MangaConnectorName: connector.value.name, Query: query },
+            method: 'GET',
         });
-    }
-    return Promise.reject();
+        if (data.value) return data.value;
+        else return Promise.reject();
+    } else return Promise.reject();
 };
 
 const items = ref<StepperItem[]>([

website/app/pages/settings.vue

@@ -2,7 +2,7 @@
     <UPageSection title="Settings" />
     <UPageSection title="Libraries" orientation="horizontal">
         <template #footer>
-            <UButton icon="i-lucide-plus" class="w-fit" @click="() => addLibraryModal.open()">Add</UButton>
+            <UButton icon="i-lucide-plus" class="w-fit" @click="addLibraryModal.open()">Add</UButton>
         </template>
         <FileLibraries />
     </UPageSection>
@@ -17,19 +17,17 @@
 
 <script setup lang="ts">
 import { LazyAddLibraryModal } from '#components';
-
 import FileLibraries from '~/components/FileLibraries.vue';
 import { refreshNuxtData } from '#app';
 const overlay = useOverlay();
-const config = useRuntimeConfig();
 
 const addLibraryModal = overlay.create(LazyAddLibraryModal);
 
 const cleanUpDatabaseBusy = ref(false);
 const cleanUpDatabase = async () => {
     cleanUpDatabaseBusy.value = true;
-    await $api('/v2/Maintenance/CleanupNoDownloadManga', { method: 'POST' })
-        .then(() => refreshNuxtData(Keys.Manga.All))
+    await useApi('/v2/Maintenance/CleanupNoDownloadManga', { method: 'POST' })
+        .then(() => refreshNuxtData(FetchKeys.Manga.All))
         .finally(() => (cleanUpDatabaseBusy.value = false));
 };
 </script>