feat: refactor react types and services functions

src-www/pages/Browse.tsx

@@ -1,19 +1,16 @@
-import { invoke } from "@tauri-apps/api/core";
 import { useEffect, useState } from "react";
 
-import { Extension, Source } from "../types/extension.ts";
+import { Extension } from "../types/extension";
+
+import { getAllExtensions, getIconUrl } from "../services/extensions.service";
 
 export default function Browse() {
   const [extensions, setExtensions] = useState<Array<Extension>>([]);
 
   useEffect(() => {
-    invoke<Array<[string, Source, string]>>("get_extensions").then(
-      (data) => {
-        setExtensions(data.map(([id, source, iconPath]) => {
-          return new Extension(id, source, iconPath);
-        }));
-      },
-    );
+    getAllExtensions().then((extensions) => {
+      setExtensions(extensions);
+    });
   }, []);
 
   const listExtensions = extensions.map((extension: Extension) => {
@@ -22,13 +19,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/pages/Extensions.tsx

@@ -1,8 +1,9 @@
-import { invoke } from "@tauri-apps/api/core";
 import { useEffect, useState } from "react";
 
-import { Extension, Source } from "../types/extension.ts";
-import { store } from "../store.ts";
+import { Extension } from "../types/extension";
+import { store } from "../store";
+
+import { getAllExtensions, getIconUrl } from "../services/extensions.service";
 
 export default function Extensions() {
   const [extensions, setExtensions] = useState<Array<Extension>>([]);
@@ -11,13 +12,9 @@ export default function Extensions() {
   );
 
   useEffect(() => {
-    invoke<Array<[string, Source, string]>>("get_extensions").then(
-      (data) => {
-        setExtensions(data.map(([id, source, iconPath]) => {
-          return new Extension(id, source, iconPath);
-        }));
-      },
-    );
+    getAllExtensions().then((extensions) => {
+      setExtensions(extensions);
+    });
   }, []);
 
   useEffect(() => {
@@ -38,14 +35,19 @@ export default function Extensions() {
         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.version}
-            {extension.nsfw && <span style={{ color: "red" }}>{" "}18+</span>}
+            {extension.source.language} {extension.source.version}
+            {extension.source.nsfw && (
+              <span style={{ color: "red" }}>{" "}18+</span>
+            )}
           </div>
         </div>
       </li>

src-www/services/extensions.service.ts

@@ -0,0 +1,69 @@
+import { convertFileSrc, invoke } from "@tauri-apps/api/core";
+
+import { Chapter } from "../types/chapter";
+import { Filter } from "../types/filter";
+import { Manga, MangaList } from "../types/manga";
+import { Page } from "../types/page";
+import { Extension, Source } from "../types/extension";
+
+export function getIconUrl(iconPath: string): string {
+  return convertFileSrc(iconPath);
+}
+
+export async function getAllExtensions(): Promise<Extension[]> {
+  return await invoke<Array<[string, Source, string]>>("get_extensions").then(
+    (data) => {
+      return data.map(([id, source, iconPath]) => {
+        return {
+          id: id,
+          iconPath: iconPath,
+          source: source,
+        };
+      });
+    },
+  );
+}
+
+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/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,75 +6,8 @@ export interface Source {
   nsfw: boolean;
 }
 
-export class Extension {
-  private _id: string;
-  private _source: Source;
-  private _iconPath: string;
-
-  constructor(id: string, source: Source, iconPath: string) {
-    this._id = id;
-    this._source = source;
-    this._iconPath = iconPath;
-  }
-
-  get id(): string {
-    return this._id;
-  }
-
-  get name(): string {
-    return this._source.name;
-  }
-
-  get language(): string {
-    return this._source.language;
-  }
-
-  get version(): string {
-    return this._source.version;
-  }
-
-  get url(): string {
-    return this._source.url;
-  }
-
-  get nsfw(): boolean {
-    return this._source.nsfw;
-  }
-
-  get iconUrl(): string {
-    return convertFileSrc(this._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];
+}