feat: refactor react types and services functions

src-www/pages/Browse.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 
 import { Extension } from "../types/extension.ts";
+import { getIconUrl } from "../services/extensions.service.ts";
 import { getExtensions } from "../tauri.ts";
 
 export default function Browse() {
@@ -16,13 +17,16 @@ export default function Browse() {
         key={extension.id}
         style={{ display: "flex", alignItems: "center", gap: 12 }}
       >
-        <img src={extension.iconUrl} style={{ width: 48, height: 48 }} />
+        <img
+          src={getIconUrl(extension.iconPath)}
+          style={{ width: 48, height: 48 }}
+        />
         <div>
           <span style={{ display: "block", fontSize: 16 }}>
-            {extension.name}
+            {extension.source.name}
           </span>
           <div style={{ opacity: 0.7, fontSize: 14 }}>
-            {extension.language}
+            {extension.source.language}
           </div>
         </div>
         <a

src-www/services/extensions.service.ts

@@ -0,0 +1,54 @@
+import { convertFileSrc, invoke } from "@tauri-apps/api/core.ts";
+
+import { Chapter } from "../types/chapter.ts";
+import { Filter } from "../types/filter.ts";
+import { Manga, MangaList } from "../types/manga.ts";
+import { Page } from "../types/page.ts";
+
+export function getIconUrl(iconPath: string): string {
+  return convertFileSrc(iconPath);
+}
+
+export async function getMangaList(
+  extensionId: string,
+  filters: Filter[],
+  page: number,
+): Promise<MangaList> {
+  return await invoke("get_manga_list", {
+    extensionId: extensionId,
+    filters: filters,
+    page: page,
+  });
+}
+
+export async function getMangaDetails(
+  extensionId: string,
+  mangaId: string,
+): Promise<Manga> {
+  return await invoke("get_manga_details", {
+    extensionId: extensionId,
+    mangaId: mangaId,
+  });
+}
+
+export async function getChapterList(
+  extensionId: string,
+  mangaId: string,
+): Promise<Chapter[]> {
+  return await invoke("get_chapter_list", {
+    extensionId: extensionId,
+    mangaId: mangaId,
+  });
+}
+
+export async function getPageList(
+  extensionId: string,
+  mangaId: string,
+  chapterId: string,
+): Promise<Page[]> {
+  return await invoke("get_page_list", {
+    extensionId: extensionId,
+    mangaId: mangaId,
+    chapterId: chapterId,
+  });
+}

src-www/tauri.ts

@@ -5,7 +5,13 @@ import { Manifest } from "./types/manifest.ts";
 
 export async function getExtensions(): Promise<Extension[]> {
   return (await invoke<[string, Source, string][]>("get_extensions"))
-    .map(([id, source, iconPath]) => new Extension(id, source, iconPath));
+    .map(([id, source, iconPath]) =>
+      <Extension> {
+        id: id,
+        source: source,
+        iconPath: iconPath,
+      }
+    );
 }
 
 export async function getRepositoryExtensions(

src-www/types/extension.ts

@@ -1,10 +1,3 @@
-import { convertFileSrc, invoke } from "@tauri-apps/api/core";
-
-import { Chapter } from "./chapter.ts";
-import { Filter } from "./filter.ts";
-import { Manga } from "./manga.ts";
-import { Page } from "./page.ts";
-
 export interface Source {
   name: string;
   language: string;
@@ -13,57 +6,8 @@ export interface Source {
   nsfw: boolean;
 }
 
-export class Extension {
-  public name: string;
-  public language: string;
-  public version: string;
-  public url: string;
-  public nsfw: boolean;
-  public iconUrl: string;
-
-  constructor(
-    public id: string,
-    source: Source,
-    iconPath: string,
-  ) {
-    this.name = source.name;
-    this.language = source.language;
-    this.version = source.version;
-    this.url = source.url;
-    this.nsfw = source.nsfw;
-    this.iconUrl = convertFileSrc(iconPath);
-  }
-
-  async getMangaList(
-    filters: Array<Filter>,
-    page: number,
-  ): Promise<[Array<Manga>, boolean]> {
-    return await invoke("get_manga_list", {
-      extensionId: this.id,
-      filters: filters,
-      page: page,
-    });
-  }
-
-  async getMangaDetails(mangaId: string): Promise<Manga> {
-    return await invoke("get_manga_details", {
-      extensionId: this.id,
-      mangaId: mangaId,
-    });
-  }
-
-  async getChapterList(mangaId: string): Promise<Array<Chapter>> {
-    return await invoke("get_chapter_list", {
-      extensionId: this.id,
-      mangaId: mangaId,
-    });
-  }
-
-  async getPageList(mangaId: string, chapterId: string): Promise<Array<Page>> {
-    return await invoke("get_page_list", {
-      extensionId: this.id,
-      mangaId: mangaId,
-      chapterId: chapterId,
-    });
-  }
+export interface Extension {
+  id: string;
+  iconPath: string;
+  source: Source;
 }

src-www/types/manga.ts

@@ -27,8 +27,12 @@ export interface Manga {
   coverUrl: string;
   authorName: string;
   artistName: string;
-  categories: Array<string>;
+  categories: string[];
   status: Status;
   contentRating: ContentRating;
   readingMode: ReadingMode;
 }
+
+export interface MangaList {
+  data: [Manga[], boolean];
+}