chore: work continues on authentication

src/hooks/querys.ts

@@ -5,6 +5,7 @@ import {
   useInfiniteQuery,
   QueryClient,
 } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
 
 import {
   getAllBooks,
@@ -20,6 +21,7 @@ import {
   postRegister,
   getUserAndBooks,
 } from '../services/api';
+import { logOut } from '../services/firebase/auth';
 import { keys } from '../utils/utils';
 import { BookType } from '../components/types';
 
@@ -148,10 +150,19 @@ function useBook(pathUrl: string | undefined) {
 
 // Usuarios
 
-function useUserRegister(token: string) {
+function useUserRegister() {
+  const navigate = useNavigate();
+
   return useMutation({
-    mutationKey: ['post-token', token],
-    mutationFn: () => postRegister(token),
+    mutationKey: [keys.userRegister],
+    mutationFn: (token: string) => postRegister(token),
+    onSuccess: (data) => {
+      if (data) return navigate(`/profile/${data.info.user.uid}`);
+    },
+    onError: async (error) => {
+      console.error('Error en el servidor:', error);
+      await logOut();
+    },
   });
 }
 
@@ -160,12 +171,8 @@ function useProfile(
   // token: string | undefined
 ) {
   return useSuspenseQuery({
-    queryKey: ['profile', id],
-    queryFn: () =>
-      getUserAndBooks(
-        id,
-        // token
-      ),
+    queryKey: [keys.profile, id],
+    queryFn: () => getUserAndBooks(id),
     gcTime: 3000,
   });
 }

src/pages/Login.tsx

@@ -9,10 +9,10 @@ import { SignIn } from '../services/firebase/auth';
 export function Login() {
   return (
     <>
-      <MainHead title='Iniciar Sesión | XBuniverse' />
-      <ContainerTitle title='Iniciar Sesión' />
+      <MainHead title='Ingresar | XBuniverse' />
+      <ContainerTitle title='Ingresar' />
       <Flex justify='center' py={{ base: '10vh', md: '31vh' }}>
-        <Stack direction='column' spacing='5'>
+        <Stack direction='column' spacing='3'>
           <SignIn />
           {/* <Button
             fontWeight='normal'
@@ -26,9 +26,9 @@ export function Login() {
             _hover={{ bg: '#242424' }}
             _active={{ bg: 'black' }}
           >
-            <Box fontSize='md'>(ex Twitter)</Box>
+            Continuar con X
           </Button>
-          <Button
+           <Button
             fontWeight='normal'
             leftIcon={<BsFacebook />}
             colorScheme='facebook'

src/services/api.ts

@@ -83,7 +83,6 @@ async function postRegister(token: string) {
     method: 'POST',
     headers: {
       Authorization: `Bearer ${token}`,
-      'content-type': 'application/json',
     },
   });
 
@@ -100,7 +99,6 @@ async function getUserAndBooks(
     //   method: 'GET',
     //   headers: {
     //     Authorization: `Bearer ${token}`,
-    //     'Content-Type': 'application/json',
     //   },
     // }
   );

src/services/firebase/auth.tsx

@@ -1,53 +1,30 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Button, useColorModeValue } from '@chakra-ui/react';
 import { GrGoogle } from 'react-icons/gr';
-import {
-  GoogleAuthProvider,
-  signInWithPopup,
-  // signInWithRedirect,
-  // getRedirectResult,
-  signOut,
-} from 'firebase/auth';
+import { GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth';
 
 import { logIn } from './config';
-import { API_URL } from '../../config';
-// import { useUserRegister } from '../../hooks/querys';
+import { useUserRegister } from '../../hooks/querys';
 // import { useAuth } from '../../store/AuthContext';
 
 const provider = new GoogleAuthProvider();
 
 provider.setCustomParameters({ prompt: 'select_account ' });
 
 function SignIn() {
-  const navigate = useNavigate();
-  // const { mutate } = useUserRegister(token);
+  const { mutateAsync, isPending, isError, isSuccess } = useUserRegister();
+  let errorUI;
+
+  if (isError) {
+    errorUI = <h1>error de conexion</h1>;
+  }
 
   async function signInWithGoogle() {
     try {
       const result = await signInWithPopup(logIn, provider);
       const token = await result.user.getIdToken();
-      // await signInWithRedirect(logIn, provider);
-
-      // Obtener el resultado de la redirección
-      // const result = await getRedirectResult(logIn);
 
-      // mutate(token);
-      const serverResponse = await fetch(`${API_URL}/auth/register`, {
-        method: 'POST',
-        headers: {
-          Authorization: `Bearer ${token}`,
-          'content-type': 'application/json',
-        },
-      });
-
-      if (serverResponse.ok) {
-        // El registro en el servidor fue exitoso, navegar a la página de perfil
-        navigate(`/profile/${result.user.uid}`);
-      } else {
-        console.error('Error en el servidor:', serverResponse.statusText);
-        await DisconnectFirebaseAccount();
-      }
+      return mutateAsync(token);
     } catch (error) {
       await DisconnectFirebaseAccount();
       console.warn(error);
@@ -71,7 +48,7 @@ function SignIn() {
   return (
     <>
       <Button
-        w='250px'
+        w='275px'
         fontWeight='normal'
         leftIcon={<GrGoogle />}
         bg={useColorModeValue('#EA4335', '#EE685D')}
@@ -82,23 +59,16 @@ function SignIn() {
         _hover={{ bg: '#D23C2F' }}
         _active={{ bg: '#BB352A' }}
         onClick={signInWithGoogle}
+        loadingText='Redirigiendo...'
+        isLoading={isPending}
       >
-        Google
+        Continuar con Google
       </Button>
+      <div>{errorUI}</div>
     </>
   );
 }
 
-// async function login() {
-//   try {
-//     const result = await signInWithPopup(logIn, provider);
-//     const token = await result.user.getIdToken();
-//     console.log(result);
-//   } catch (error) {
-//     console.log(error);
-//   }
-// }
-
 async function logOut() {
   try {
     await signOut(logIn);

src/utils/utils.ts

@@ -13,6 +13,8 @@ const keys = {
   random: 'BooksRandom',
   relatedBooks: 'RelatedBooks',
   moreBooksAuthors: 'MoreBooksAuthors',
+  userRegister: 'UserRegister',
+  profile: 'Profile',
 };
 
 function handleImageLoad(e: React.SyntheticEvent) {