feat: A new view was created to create a username and many more changes

Franqsanz · Feb 14, 2024 · a3b788a · a3b788a
1 parent c40988c
commit a3b788a
Show file tree

Hide file tree

Showing 14 changed files with 235 additions and 83 deletions.
diff --git a/src/components/forms/FormCreateUser.tsx b/src/components/forms/FormCreateUser.tsx
@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import {
+  Box,
+  Flex,
+  FormControl,
+  Input,
+  InputGroup,
+  InputLeftAddon,
+  Button,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+import { useUserRegister } from '@hooks/querys';
+
+export function FormCreateUser() {
+  const [username, setUsername] = useState<string>('');
+  const bgColorButton = useColorModeValue('green.500', 'green.700');
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { token } = location.state;
+  const { mutateAsync, data, isPending, isSuccess } = useUserRegister(username);
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const { value } = e.target;
+
+    setUsername(value);
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    mutateAsync(token);
+  }
+
+  if (isSuccess) {
+    navigate(`/${data.username}`);
+  }
+
+  return (
+    <>
+      <Flex
+        as='form'
+        onSubmit={handleSubmit}
+        justify='center'
+        p='5'
+        mt='24'
+        h='400px'
+      >
+        <Flex gap='5' direction='column'>
+          <Box
+            as='h1'
+            textAlign='center'
+            fontSize={{ base: 'lg', md: '2xl' }}
+            mb='5'
+          >
+            Elegir nombre de usuario
+          </Box>
+          <FormControl isRequired>
+            <InputGroup size={{ base: 'md', md: 'lg' }}>
+              <InputLeftAddon>xbu.com/</InputLeftAddon>
+              <Input
+                type='text'
+                name='username'
+                value={username}
+                onChange={handleChange}
+              />
+            </InputGroup>
+          </FormControl>
+          <Button
+            type='submit'
+            size='lg'
+            border='1px'
+            bg={bgColorButton}
+            color='black'
+            _hover={{ bg: 'green.600' }}
+            _active={{ bg: 'green.600' }}
+            fontWeight='normal'
+            loadingText='Creando cuenta...'
+            isLoading={isPending}
+          >
+            Siguiente
+          </Button>
+        </Flex>
+      </Flex>
+    </>
+  );
+}
diff --git a/src/components/nav/DesktopNav.tsx b/src/components/nav/DesktopNav.tsx
@@ -19,20 +19,22 @@ import { MenuProfile } from '@components/nav/menu/MenuProfile';
 import { InputSearch } from '@components/forms/filters/InputSearch';
 import { ModalFilter } from '@components/modals/ModalFilter';
 import { useAuth } from '@contexts/AuthContext';
+import { useUserData } from '@hooks/querys';
 
 export function DesktopNav() {
   const { currentUser } = useAuth();
+  const { data } = useUserData(currentUser?.uid);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { colorMode, toggleColorMode } = useColorMode();
   const bgNavColor = useColorModeValue('#ffffff8b', '#12121244');
   let profileMenu;
 
-  if (currentUser) {
+  if (data) {
     profileMenu = (
       <MenuProfile
-        displayName={currentUser.displayName}
-        photoURL={currentUser.photoURL}
-        uid={currentUser.uid}
+        displayName={data.name}
+        photoURL={data.picture}
+        username={data.username}
       />
     );
   } else {

diff --git a/src/components/nav/MobileNav.tsx b/src/components/nav/MobileNav.tsx
@@ -29,9 +29,11 @@ import { InputSearch } from '@components/forms/filters/InputSearch';
 import { ModalFilter } from '@components/modals/ModalFilter';
 import { MenuProfile } from '@components/nav/menu/MenuProfile';
 import { useAuth } from '@contexts/AuthContext';
+import { useUserData } from '@hooks/querys';
 
 export function MobileNav() {
   const { currentUser } = useAuth();
+  const { data } = useUserData(currentUser?.uid);
   const containerRef = useRef<HTMLDivElement>(null);
   const { colorMode, toggleColorMode } = useColorMode();
   const {
@@ -62,12 +64,12 @@ export function MobileNav() {
     },
   });
 
-  if (currentUser) {
+  if (data) {
     profileMenu = (
       <MenuProfile
-        displayName={currentUser.displayName}
-        photoURL={currentUser.photoURL}
-        uid={currentUser.uid}
+        displayName={data.name}
+        photoURL={data.picture}
+        username={data.username}
       />
     );
 

diff --git a/src/components/nav/menu/MenuProfile.tsx b/src/components/nav/menu/MenuProfile.tsx
@@ -16,7 +16,7 @@ import {
 import { logOut } from '@services/firebase/auth';
 import { MenuType } from '@components/types';
 
-export function MenuProfile({ displayName, photoURL, uid }: MenuType) {
+export function MenuProfile({ displayName, photoURL, username }: MenuType) {
   const navigate = useNavigate();
   const colorBorder = useColorModeValue('black', 'white');
 
@@ -50,7 +50,7 @@ export function MenuProfile({ displayName, photoURL, uid }: MenuType) {
           <MenuDivider />
           <MenuItem
             as={NavLink}
-            to={`/profile/${uid}`}
+            to={`/${username}`}
             _hover={{ textDecoration: 'none' }}
           >
             Perfil

diff --git a/src/components/types.d.ts b/src/components/types.d.ts
@@ -177,7 +177,8 @@ interface AboutType {
 interface MenuType {
   displayName: string | null;
   photoURL: string | null;
-  uid: string;
+  username: string;
+  uid?: string;
 }
 
 interface AuthContextType {

diff --git a/src/hooks/querys.ts b/src/hooks/querys.ts
@@ -19,6 +19,7 @@ import {
   getMoreBooksAuthors,
   postBook,
   postRegister,
+  getCheckUser,
   getUserAndBooks,
   updateBook,
   deleteBook,
@@ -153,44 +154,50 @@ function useBook(pathUrl: string | undefined) {
 
 // Usuarios
 
-function useUserRegister() {
-  const navigate = useNavigate();
-
+function useUserRegister(body: any) {
   return useMutation({
     mutationKey: [keys.userRegister],
-    mutationFn: (token: string) => postRegister(token),
-    onSuccess: (data) => {
-      if (data) {
-        return navigate(`/profile/${data.info.user.uid}`, { replace: true });
-      }
-    },
+    mutationFn: (token: string) => postRegister(token, body),
     onError: async (error) => {
       console.error('Error en el servidor:', error);
       await logOut();
     },
   });
 }
 
-function useProfile(id: string | undefined, token: string | null) {
+function useCheckUser(id: string | undefined) {
+  return useQuery({
+    queryKey: [keys.checkUser, id],
+    queryFn: () => getCheckUser(id),
+    enabled: false,
+    refetchOnWindowFocus: false,
+    retry: 1,
+  });
+}
+
+function useUserData(id: string | undefined) {
+  return useQuery({
+    queryKey: [keys.userData, id],
+    queryFn: () => getCheckUser(id),
+  });
+}
+
+function useProfile(
+  username: string | undefined,
+  userId: string | null,
+  token: string | null,
+) {
   return useSuspenseQuery({
-    queryKey: [keys.profile, id],
-    queryFn: () => getUserAndBooks(id, token),
+    queryKey: [keys.profile, username, userId],
+    queryFn: () => getUserAndBooks(username, userId, token),
     gcTime: 3000,
   });
 }
 
 function useDeleteBook() {
-  const navigate = useNavigate();
-
   return useMutation({
     mutationKey: [keys.deleteBook],
     mutationFn: (id: string | undefined) => deleteBook(id),
-    // onSuccess: (data) => {
-    //   if (data) {
-    //     // return navigate(`/profile/${data.info.user.uid}`, { replace: true });
-    //     return navigate('/explore', { replace: true });
-    //   }
-    // },
     onError: async (error) => {
       console.error('Error en el servidor:', error);
       await logOut();
@@ -199,15 +206,9 @@ function useDeleteBook() {
 }
 
 function useUpdateBook(book: any) {
-  // const navigate = useNavigate();
-  // const { currentUser } = useAuth();
-
   return useMutation({
     mutationKey: [keys.updateBook],
     mutationFn: (id: string | undefined) => updateBook(id, book),
-    // onSuccess: (data) => {
-    //   if (data) return navigate('/explore', { replace: true });
-    // },
     onError: async (error) => {
       console.error('Error en el servidor:', error);
       await logOut();
@@ -227,6 +228,8 @@ export {
   useRelatedBooks,
   useMoreBooksAuthors,
   useUserRegister,
+  useCheckUser,
+  useUserData,
   useProfile,
   useUpdateBook,
   useDeleteBook,

diff --git a/src/pages/CreateUser.tsx b/src/pages/CreateUser.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { FormCreateUser } from '@components/forms/FormCreateUser';
+import { MainHead } from '@components/Head';
+
+export function CreateUser() {
+  return (
+    <>
+      <MainHead title='Elegir nombre de usuario | XBuniverse' />
+      <FormCreateUser />
+    </>
+  );
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -25,10 +25,12 @@ import {
   ImgBook,
   BookReading,
 } from '@assets/assets';
+import { useUserData } from '@hooks/querys';
 
 export function Home() {
   const { colorMode } = useColorMode();
   const { currentUser } = useAuth();
+  const { data } = useUserData(currentUser?.uid);
   const bgButton = useColorModeValue('green.500', 'green.700');
   const bContainer = useColorModeValue('gray.50', 'none');
   const height = useBreakpointValue({
@@ -90,7 +92,7 @@ export function Home() {
             >
               <Link
                 w={{ base: '250px', md: '200px' }}
-                to={!currentUser ? '/login' : `/profile/${currentUser?.uid}`}
+                to={!data ? '/login' : `/${data.username}`}
                 as={NavLink}
                 border='1px'
                 bg={bgButton}

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
@@ -9,7 +9,7 @@ import { SignIn } from '@services/firebase/auth';
 export function Login() {
   return (
     <>
-      <MainHead title='Ingresar o Regístrate| XBuniverse' />
+      <MainHead title='Ingresar o Regístrate | XBuniverse' />
       <ContainerTitle title='Ingresar o Regístrate' />
       <Flex
         justify='center'

diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
 import { Box, Flex, Image, useColorModeValue } from '@chakra-ui/react';
 
 import { MySimpleGrid } from '@components/MySimpleGrid';
@@ -14,9 +14,10 @@ import ResultLength from '@components/ResultLength';
 // import { logOut } from '../../services/firebase/auth';
 
 export default function Profile() {
-  const { userId } = useParams();
   const getToken = window.localStorage.getItem('app_tk');
-  const { data } = useProfile(userId, getToken);
+  const getUid = window.localStorage.getItem('app_ud');
+  const { username } = useParams();
+  const { data } = useProfile(username, getUid, getToken);
   const bgCover = useColorModeValue('gray.100', 'gray.700');
 
   return (
@@ -29,7 +30,7 @@ export default function Profile() {
         justify='center'
         align='center'
         direction='column'
-        h={{ base: '250px', md: '300px' }}
+        h={{ base: '230px', md: '260px' }}
         bg={bgCover}
       >
         <Image
@@ -45,9 +46,6 @@ export default function Profile() {
         >
           {data.user.name}
         </Box>
-        <Box as='span' fontSize={{ base: 'xs', md: 'sm' }} textAlign='center'>
-          {data.user.email}
-        </Box>
         <Flex
           direction='column'
           fontSize={{ base: 'xs', md: 'sm' }}