From 9cb93d921b8e8c3ead96078c56b66dedb10d6c79 Mon Sep 17 00:00:00 2001
From: Hikmet <ka555861@gmail.com>
Date: Tue, 28 Jan 2025 12:57:32 +0300
Subject: [PATCH] Move admin login and get theme metas to react-query.

---
 src/api/admin/useAdminLogin.ts      | 14 ++++++++++++++
 src/api/theme/useAdminThemeMetas.ts | 16 ++++++++++++++++
 src/lib/axios.ts                    |  3 ++-
 src/pages/admin/index.tsx           | 22 ++++------------------
 src/pages/admin/login.tsx           | 16 ++++++----------
 5 files changed, 42 insertions(+), 29 deletions(-)
 create mode 100644 src/api/admin/useAdminLogin.ts
 create mode 100644 src/api/theme/useAdminThemeMetas.ts

diff --git a/src/api/admin/useAdminLogin.ts b/src/api/admin/useAdminLogin.ts
new file mode 100644
index 0000000..db44609
--- /dev/null
+++ b/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;
+        },
+    });
+};
diff --git a/src/api/theme/useAdminThemeMetas.ts b/src/api/theme/useAdminThemeMetas.ts
new file mode 100644
index 0000000..7b26781
--- /dev/null
+++ b/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;
+        },
+    });
+};
\ No newline at end of file
diff --git a/src/lib/axios.ts b/src/lib/axios.ts
index d62f2ae..b015fe4 100644
--- a/src/lib/axios.ts
+++ b/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",
-});
+});
\ No newline at end of file
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index 6bd971d..111a578 100644
--- a/src/pages/admin/index.tsx
+++ b/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);
   };
 
diff --git a/src/pages/admin/login.tsx b/src/pages/admin/login.tsx
index d9f593d..e2e1903 100644
--- a/src/pages/admin/login.tsx
+++ b/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);
         });
       }}
     >