Move admin login and get theme metas to react-query.

src/api/admin/useAdminLogin.ts

@@ -0,0 +1,14 @@
+import { apiAdmin } from "@/lib/axios";
+import { useMutation } from "@tanstack/react-query";
+import { ApiResponse } from "../api_response";
+
+export const useAdminLogin = () => {
+    return useMutation({
+        mutationFn: async ({ password }: { password: string }) => {
+            const { data } = await apiAdmin.post("/login", {
+                password,
+            });
+            return data as ApiResponse;
+        },
+    });
+};

src/api/theme/useAdminThemeMetas.ts

@@ -0,0 +1,16 @@
+import { BackendThemeService } from "@/backend/services/theme_service";
+import { apiAdmin } from "@/lib/axios";
+import { useQuery } from "@tanstack/react-query";
+
+export const useAdminThemeMetas = () => {
+    return useQuery({
+        queryKey: ["admin-theme-metas"],
+        queryFn: async () => {
+            const { data } = await apiAdmin.get("/themes?type=theme-metas");
+            const res = data as Awaited<
+                ReturnType<BackendThemeService["getThemeMetas"]>
+            >;
+            return res.data;
+        },
+    });
+};

src/lib/axios.ts

@@ -2,8 +2,9 @@ import axios from "axios";
 
 export const api = axios.create({
     baseURL: "/api",
+
 });
 
 export const apiAdmin = axios.create({
     baseURL: "/api/admin",
-});
+});

src/pages/admin/index.tsx

@@ -3,34 +3,20 @@ import { BackendThemeService } from "@/backend/services/theme_service";
 import { defaultTheme } from "@/lib/theme/default_theme";
 import { ThemeMetaDTO } from "@/lib/theme/theme_meta_dto";
 import Head from "next/head";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { useAdminCreateTheme } from "@/api/theme/useAdminCreateTheme";
-import { AdminThemeApi } from "@/api/admin_theme_api";
+import { useAdminThemeMetas } from "@/api/theme/useAdminThemeMetas";
 
 export default function AdminPage() {
 
   const { mutateAsync: adminCreateTheme } = useAdminCreateTheme();
-  const [themeMetas, setThemeMetas] = useState<ThemeMetaDTO[]>();
+  const { data: themeMetas, refetch } = useAdminThemeMetas();
   const [stalling, setStalling] = useState(false);
 
-  const fetchThemeMetas = async () => {
-    const resObj = await fetch(`/api/admin/themes?type=theme-metas`);
-    const res = await (resObj.json() as ReturnType<
-      BackendThemeService["getThemeMetas"]
-    >);
-    if (res.status === "success" && res.data) {
-      setThemeMetas(res.data);
-    }
-  };
-
-  useEffect(() => {
-    fetchThemeMetas();
-  }, []);
-
   const createTheme = async () => {
     setStalling(true);
     const res = await adminCreateTheme({ theme: defaultTheme() });
-    if (res.status === "success") await fetchThemeMetas();
+    if (res.status === "success") await refetch();
     setStalling(false);
   };
 

src/pages/admin/login.tsx

@@ -1,3 +1,4 @@
+import { useAdminLogin } from "@/api/admin/useAdminLogin";
 import {
   Box,
   Button,
@@ -11,24 +12,19 @@ import { useState } from "react";
 export default function LoginPage() {
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
+  const { mutateAsync: login } = useAdminLogin();
 
   return (
     <form
       onSubmit={(e) => {
         e.preventDefault();
         setError("");
-        fetch("/api/admin/login", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ password }),
-        }).then((res) => {
-          if (res.ok) {
+        login({ password }).then((res) => {
+          if (res.status === "success") {
             location.href = "/admin";
-          } else {
-            setError(res.statusText);
           }
+        }).catch((error) => {
+          setError(error.message);
         });
       }}
     >