Use nuxtaptparty insstead of openfetch

website/app/app.vue

@@ -6,7 +6,7 @@
                 <NuxtLink to="https://github.com/C9Glax/tranga-website"
                     ><Icon name="i-lucide-github" />Website</NuxtLink
                 >
-                <NuxtLink to=""><Icon name="i-lucide-book-open" />Swagger</NuxtLink>
+                <NuxtLink :to="`${$config.public.apiParty.endpoints.api?.url}swagger`"><Icon name="i-lucide-book-open" />Swagger</NuxtLink>
             </template>
             <template #default>
                 <NuxtLink to="/">
@@ -37,4 +37,5 @@
         </UMain>
     </UApp>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+</script>

website/app/components/AddLibraryModal.vue

@@ -15,23 +15,20 @@
 </template>
 
 <script setup lang="ts">
-import type { components } from '#open-fetch-schemas/api';
+import type { ApiModel } from '#nuxt-api-party';
 
 const name = ref('');
 const path = ref('');
 
-const model = computed((): components['schemas']['CreateLibraryRecord'] => {
+const model = computed((): ApiModel<'CreateLibraryRecord'> => {
     return { basePath: path.value, libraryName: name.value };
 });
 
-const config = useRuntimeConfig();
 const busy = ref(false);
-const onAddClick = () => {
+const onAddClick = async () => {
     busy.value = true;
-    $fetch(new Request(`${config.public.openFetch.api.baseURL}v2/FileLibrary`), { method: 'PUT', body: model.value })
-        .then(() => emit('change'))
+    await $api('/v2/FileLibrary', { method: 'PUT', body: model.value })
+        .then(() => refreshNuxtData(Keys.FileLibraries))
         .finally(() => (busy.value = false));
 };
-
-const emit = defineEmits(['change']);
 </script>

website/app/components/ChaptersList.vue

@@ -31,12 +31,11 @@
 </template>
 
 <script setup lang="ts">
-import { id } from '#ui/locale';
 
 export interface ChaptersListProps {
     mangaId: string;
 }
 const props = defineProps<ChaptersListProps>();
 
-const { data: chapters } = useApi('/v2/Manga/{MangaId}/Chapters', { path: { MangaId: props.mangaId } });
+const { data: chapters } = await useApiData('/v2/Manga/{MangaId}/Chapters', { path: { MangaId: props.mangaId }, key: FetchKeys.Chapters.All });
 </script>

website/app/components/FileLibraries.vue

@@ -1,8 +1,8 @@
 <template>
-    <UPageList divide>
+    <UPageList class="gap-2">
         <UPageCard
             v-for="l in fileLibraries"
-            variant="ghost"
+            variant="soft"
             icon="i-lucide-library-big"
             :title="l.libraryName"
             :description="l.basePath"
@@ -13,19 +13,15 @@
 </template>
 
 <script setup lang="ts">
-import type { components } from '#open-fetch-schemas/api';
-type FileLibrary = components['schemas']['FileLibrary'];
-const { data: fileLibraries, refresh } = useApi('/v2/FileLibrary');
+import type { ApiModel } from '#nuxt-api-party'
+type FileLibrary = ApiModel<"FileLibrary">;
+const { data: fileLibraries } = await useApiData('/v2/FileLibrary', { key: FetchKeys.FileLibraries });
 
-const config = useRuntimeConfig();
 const busy = ref(false);
-const deleteLibrary = (l: FileLibrary) => {
+const deleteLibrary = async (l: FileLibrary) => {
     busy.value = true;
-    $fetch(new Request(`${config.public.openFetch.api.baseURL}v2/FileLibrary/${l.key}`), { method: 'DELETE' }).finally(
-        () => {
-            refresh();
-            busy.value = false;
-        }
-    );
+    await $api('/v2/FileLibrary/{FileLibraryId}', { path: { FileLibraryId: l.key }, method: 'DELETE' })
+        .then(() => refreshNuxtData(FetchKeys.FileLibraries))
+        .finally(() => busy.value = false)
 };
 </script>

website/app/components/MangaCard.vue

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

website/app/components/MangaCover.vue

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

website/app/components/MangaDetailPage.vue

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

website/app/components/MangaconnectorIcon.vue

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

website/app/composables/FetchKeys.ts

@@ -0,0 +1,14 @@
+export const FetchKeys = {
+    FileLibraries: "FileLibraries",
+    Chapters: {
+        All: "Chapters",
+    },
+    Manga: {
+        All: "Manga",
+        Id: (id: string) => `Manga/${id}`,
+    },
+    MangaConnector: {
+        Id: (id: string) => `MangaConnector/${id}`,
+        All: "MangaConnector",
+    }
+}

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

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

website/app/pages/index.vue

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

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

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

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

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

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

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

website/app/pages/search.vue

@@ -46,12 +46,12 @@
 </template>
 
 <script setup lang="ts">
-import type { components } from '#open-fetch-schemas/api';
+import {$api, type ApiModel} from '#nuxt-api-party'
 import type { StepperItem } from '@nuxt/ui';
-type MangaConnector = components['schemas']['MangaConnector'];
-type MinimalManga = components['schemas']['MinimalManga'];
+type MangaConnector = ApiModel<"MangaConnector">;
+type MinimalManga = ApiModel<'MinimalManga'>;
 
-const { data: connectors } = useApi('/v2/MangaConnector');
+const { data: connectors } = await useApiData('/v2/MangaConnector', { FetchKeys: FetchKeys.MangaConnector.All });
 
 const query = ref<string>();
 const connector = useState<MangaConnector>();
@@ -95,14 +95,10 @@ const config = useRuntimeConfig();
 
 const search = async (query: string): Promise<MinimalManga[]> => {
     if (isUrl(query)) {
-        return await $fetch<MinimalManga>(new Request(`${config.public.openFetch.api.baseURL}v2/Search/Url`), {
-            method: 'POST',
-            body: JSON.stringify(query),
-        }).then((x) => [x]);
+        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 $fetch<MinimalManga[]>(
-            new Request(`${config.public.openFetch.api.baseURL}v2/Search/${connector.value.name}/${query}`)
-        );
+        return await $api('/v2/Search/{MangaConnectorName}/{Query}', { path: { MangaConnectorName: connector.value.name, query: query }, method: "POST" });
     }
     return Promise.reject();
 };

website/app/pages/settings.vue

@@ -1,8 +1,10 @@
 <template>
-    <UPageSection title="Settings"/>
+    <UPageSection title="Settings" />
     <UPageSection title="Libraries" orientation="horizontal">
+        <template #footer>
+            <UButton icon="i-lucide-plus" class="w-fit" @click="() => addLibraryModal.open()">Add</UButton>
+        </template>
         <FileLibraries />
-        <UButton icon="i-lucide-plus" class="w-fit" @click="() => addLibraryModal.open()">Add</UButton>
     </UPageSection>
     <UPageSection title="Maintenance" orientation="horizontal">
         <div class="flex flex-col gap-1 items-end basis-1">
@@ -17,16 +19,17 @@
 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 = () => {
+const cleanUpDatabase = async () => {
     cleanUpDatabaseBusy.value = true;
-    $fetch(`${config.public.openFetch.api.baseURL}v2/Maintenance/CleanupNoDownloadManga`).finally(
-        () => (cleanUpDatabaseBusy.value = false)
-    );
+    await $api('/v2/Maintenance/CleanupNoDownloadManga', { method: 'POST' })
+        .then(() => refreshNuxtData(Keys.Manga.All))
+        .finally(() => cleanUpDatabaseBusy.value = false);
 };
 </script>