use login function and useMutation

client/src/controllers/UserController.ts

@@ -13,7 +13,7 @@ const getMeInfo = async () => {
   return response.json();
 };
 
-const login = async (email: string, password: string) => {
+const login = async ({email, password}: {email: string, password: string}) => {
   const response = await fetch('/api/auth/login', {
     method: 'POST',
     body: JSON.stringify({ email, password }),

client/src/routes/login.tsx

@@ -1,48 +1,29 @@
 import { Link } from 'react-router-dom';
 import logo from '@assets/images/logo.svg';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useCookies } from 'react-cookie';
 import type { Token } from '../types';
 import { toastError } from '@controllers/Toasts';
+import { login } from '@controllers/UserController';
 
 const Login = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [cookies, setCookie] = useCookies(['token']);
 
-  const { refetch } = useQuery(
+  const mutation = useMutation(login, {
-    ['login'],
-    async () => {
-      const response = await fetch('/api/auth/login', {
-        method: 'POST',
-        body: JSON.stringify({ email, password }),
-        mode: 'cors',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
-      const data = await response.json();
-      if (data.error) {
-        throw data.error;
-      }
-      return data;
-    },
-    {
     onSuccess: (data: Token) => {
       setCookie('token', data.token, { path: '/', expires: new Date(data.expiresAt) });
     },
     onError: (error) => {
       toastError(error as string);
-      },
-      enabled: false,
-      refetchOnWindowFocus: false,
     }
-  );
+  });
 
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    await refetch();
+    mutation.mutate({ email, password });
   };
 
   return (