feat: routes were replaced by absolute routes

src/components/AllBooks.tsx

@@ -10,13 +10,13 @@ import {
 } from '@chakra-ui/react';
 import { useInView } from 'react-intersection-observer';
 
-import { CardType } from './types';
-import { useBooksPaginate } from '../hooks/querys';
-import { MySimpleGrid } from './MySimpleGrid';
-import { Card } from './cards/Card';
-import { Aside } from './Aside';
-import { SkeletonAllBooks } from './skeletons/SkeletonABooks';
-import ResultLength from './ResultLength';
+import { CardType } from '@components/types';
+import { useBooksPaginate } from '@hooks/querys';
+import { MySimpleGrid } from '@components/MySimpleGrid';
+import { Card } from '@components/cards/Card';
+import { Aside } from '@components/Aside';
+import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
+import ResultLength from '@components/ResultLength';
 
 export function AllBooks() {
   const { ref, inView } = useInView();

src/components/BooksSection.tsx

@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
 import { Box, Center, Flex, Divider, Spinner } from '@chakra-ui/react';
 
-import { BooksSectionType } from './types';
+import { BooksSectionType } from '@components/types';
 
 export function BooksSection({
   title,

src/components/Categories.tsx

@@ -3,8 +3,8 @@ import { NavLink } from 'react-router-dom';
 import { Link } from '@chakra-ui/react';
 import { BsTag } from 'react-icons/bs';
 
-import { MyTag } from '../components/MyTag';
-import { useAllFilterOptions } from '../hooks/querys';
+import { MyTag } from '@components/MyTag';
+import { useAllFilterOptions } from '@hooks/querys';
 
 export default function Categories() {
   const { data } = useAllFilterOptions();

src/components/ContainerTitle.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Container, Box, useColorModeValue } from '@chakra-ui/react';
 
-import { TitleType } from './types';
+import { TitleType } from '@components/types';
 
 export function ContainerTitle({ title }: TitleType) {
   const bgContainer = useColorModeValue('green.50', 'green.900');

src/components/FilterDrawer.tsx

@@ -15,7 +15,7 @@ import {
   Button,
 } from '@chakra-ui/react';
 
-import { DrawerType } from './types';
+import { DrawerType } from '@components/types';
 
 export function FilterDrawer({
   isOpen,

src/components/Head.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
 
-import { HeadType } from './types';
+import { HeadType } from '@components/types';
 // million-ignore
 export function MainHead({ title, description, urlImage }: HeadType) {
   return (

src/components/ModalConfirmation.tsx

@@ -16,7 +16,7 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react';
 
-import { ModalOptionsAndConfirType } from './types';
+import { ModalOptionsAndConfirType } from '@components/types';
 
 export function ModalConfirmation({
   isOpen,

src/components/ModalOptions.tsx

@@ -10,12 +10,13 @@ import {
   Flex,
 } from '@chakra-ui/react';
 
-import { ModalOptionsAndConfirType } from './types';
+import { ModalOptionsAndConfirType } from '@components/types';
 
 export function ModalOptions({
   isOpen,
   onClose,
   onDeleteBook,
+  onEditBook,
 }: ModalOptionsAndConfirType) {
   return (
     <>
@@ -36,6 +37,7 @@ export function ModalOptions({
               <Button
                 fontWeight='normal'
                 fontSize='sm'
+                onClick={onEditBook}
                 _hover={{ color: 'none' }}
               >
                 Editar

src/components/ModalShare.tsx

@@ -29,7 +29,7 @@ import {
 import { FaCheckCircle } from 'react-icons/fa';
 import { MdCopyAll } from 'react-icons/md';
 
-import { ModalType } from './types';
+import { ModalType } from '@components/types';
 
 export function ModalShare({ shareUrl, data, isOpen, onClose }: ModalType) {
   const bgInput = useColorModeValue('gray.200', 'gray.900');

src/components/MyLink.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { Box, Link, useColorModeValue } from '@chakra-ui/react';
 
-import { MyLinkType } from './types';
+import { MyLinkType } from '@components/types';
 
 export function MyLink({ data, href, external, index }: MyLinkType) {
   const colorLinkCategory = useColorModeValue('green.800', 'green.400');

src/components/MySliderCategories.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useRef, Suspense, lazy } from 'react';
 import { Box, Button, Flex, useColorModeValue } from '@chakra-ui/react';
 import { MdChevronLeft, MdChevronRight } from 'react-icons/md';
 
-import { SkeletonTags } from './skeletons/SkeletonTags';
-const Categories = lazy(() => import('../components/Categories'));
+import { SkeletonTags } from '@components/skeletons/SkeletonTags';
+const Categories = lazy(() => import('@components/Categories'));
 
 export function MySliderCategories() {
   const bgArrows = useColorModeValue('white', 'black');

src/components/MyTag.tsx

@@ -7,7 +7,7 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react';
 
-import { TagType } from './types';
+import { TagType } from '@components/types';
 
 export function MyTag({
   bg,

src/components/PrivateRoute.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Navigate } from 'react-router-dom';
 
 import { useAuth } from '../store/AuthContext';
-import { SkeletonAllBooks } from './skeletons/SkeletonABooks';
+import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 
 export function PrivateRoute({ children }: { children: React.ReactNode }) {
   const { currentUser, loading } = useAuth();

src/components/cards/Card.tsx

@@ -13,13 +13,9 @@ import {
 import { BsTag } from 'react-icons/bs';
 import { IoLanguageOutline } from 'react-icons/io5';
 
-import { CardType } from '../types';
-import { MyTag } from '../MyTag';
-import {
-  handleImageLoad,
-  useHandleEnterKey,
-  isSpanish,
-} from '../../utils/utils';
+import { CardType } from '@components/types';
+import { MyTag } from '@components/MyTag';
+import { handleImageLoad, useHandleEnterKey, isSpanish } from '@utils/utils';
 
 export function Card({
   title,

src/components/cards/MoreBooks.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { RelatedCard } from './RelatedCard';
-import { ContainerRCard } from './ContainerRCard';
-import { CardType, RelatedBooksType } from '../types';
-import { useMoreBooks } from '../../hooks/querys';
-import { useRefetchLocation } from '../../hooks/useRefetchLocation';
+import { RelatedCard } from '@components/cards/RelatedCard';
+import { ContainerRCard } from '@components/cards/ContainerRCard';
+import { CardType, RelatedBooksType } from '@components/types';
+import { useMoreBooks } from '@hooks/querys';
+import { useRefetchLocation } from '@hooks/useRefetchLocation';
 
 export default function MoreBooks({ currentBookId }: RelatedBooksType) {
   const { data, refetch } = useMoreBooks();

src/components/cards/MoreBooksAuthors.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Box, Text } from '@chakra-ui/react';
 
-import { RelatedCard } from './RelatedCard';
-import { ContainerRCard } from './ContainerRCard';
-import { CardType, RelatedBooksType } from '../types';
-import { useMoreBooksAuthors } from '../../hooks/querys';
-import { useRefetchLocation } from '../../hooks/useRefetchLocation';
+import { RelatedCard } from '@components/cards/RelatedCard';
+import { ContainerRCard } from '@components/cards/ContainerRCard';
+import { CardType, RelatedBooksType } from '@components/types';
+import { useMoreBooksAuthors } from '@hooks/querys';
+import { useRefetchLocation } from '@hooks/useRefetchLocation';
 
 export default function MoreBooksAuthors({
   currentBookId,

src/components/cards/RelatedBooks.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Box, Text } from '@chakra-ui/react';
 
-import { RelatedCard } from './RelatedCard';
-import { ContainerRCard } from './ContainerRCard';
-import { CardType, RelatedBooksType } from '../types';
-import { useRelatedBooks } from '../../hooks/querys';
-import { useRefetchLocation } from '../../hooks/useRefetchLocation';
+import { RelatedCard } from '@components/cards/RelatedCard';
+import { ContainerRCard } from '@components/cards/ContainerRCard';
+import { CardType, RelatedBooksType } from '@components/types';
+import { useRelatedBooks } from '@hooks/querys';
+import { useRefetchLocation } from '@hooks/useRefetchLocation';
 
 export default function RelatedBooks({ currentBookId, id }: RelatedBooksType) {
   const { data, refetch } = useRelatedBooks(id);

src/components/cards/RelatedCard.tsx

@@ -3,8 +3,8 @@ import { NavLink } from 'react-router-dom';
 import { Flex, Box, useColorModeValue, Link, Icon } from '@chakra-ui/react';
 import { FiArrowRight } from 'react-icons/fi';
 
-import { CardType } from '../types';
-import { useHandleEnterKey } from '../../utils/utils';
+import { CardType } from '@components/types';
+import { useHandleEnterKey } from '@utils/utils';
 
 export function RelatedCard({
   title,

src/components/forms/ModalCropper.tsx

@@ -14,7 +14,7 @@ import {
 } from '@chakra-ui/react';
 import { RiScissorsCutFill } from 'react-icons/ri';
 
-import { ModalCroppType } from '../types';
+import { ModalCroppType } from '@components/types';
 
 export function ModalCropper({
   children,

src/components/forms/NewBook.tsx

@@ -25,11 +25,11 @@ import { AiOutlineCloudUpload } from 'react-icons/ai';
 import { BiImageAdd } from 'react-icons/bi';
 
 import { categories, format, languages } from '../../data/links';
-import { BookType } from '../types';
-import { useMutatePost } from '../../hooks/querys';
-import { ModalCropper } from '../forms/ModalCropper';
-import { generatePathUrl } from '../../utils/utils';
-import { MyPopover } from '../MyPopover';
+import { BookType } from '@components/types';
+import { useMutatePost } from '@hooks/querys';
+import { ModalCropper } from '@components/forms/ModalCropper';
+import { generatePathUrl } from '@utils/utils';
+import { MyPopover } from '@components/MyPopover';
 import { useAuth } from '../../store/AuthContext';
 
 const Cropper = lazy(() => import('react-cropper'));

src/components/forms/filters/Filter.tsx

@@ -9,8 +9,8 @@ import {
 } from '@chakra-ui/react';
 import { FiSearch } from 'react-icons/fi';
 
-import { useAllFilterOptions } from '../../../hooks/querys';
-import { SelectType } from '../../../components/types';
+import { useAllFilterOptions } from '@hooks/querys';
+import { SelectType } from '@components/types';
 
 interface Props {
   onClose: () => void;

src/components/forms/filters/InputSearch.tsx

@@ -23,9 +23,9 @@ import {
 import { CgOptions } from 'react-icons/cg';
 import { FiSearch } from 'react-icons/fi';
 
-import { useAllSearchBooks } from '../../../hooks/querys';
-import { useDebounce } from '../../../hooks/useDebounce';
-import { BookSearchResultsType } from '../../../components/types';
+import { useAllSearchBooks } from '@hooks/querys';
+import { useDebounce } from '@hooks/useDebounce';
+import { BookSearchResultsType } from '@components/types';
 
 function highlightText(text, query) {
   const regex = new RegExp(`(${query.trim()})`, 'gi');

src/components/forms/filters/ModalFilter.tsx

@@ -8,8 +8,8 @@ import {
   ModalCloseButton,
 } from '@chakra-ui/react';
 
-import Filter from './Filter';
-import { ModalType } from '../../types';
+import Filter from '@components/forms/filters/Filter';
+import { ModalType } from '@components/types';
 
 export function ModalFilter({ isOpen, onClose }: ModalType) {
   return (

src/components/nav/DesktopNav.tsx

@@ -15,9 +15,9 @@ import {
 } from '@chakra-ui/react';
 
 import { navLink, accountLinks } from '../../data/links';
-import { MenuProfile } from '../../components/nav/menu/MenuProfile';
-import { InputSearch } from '../forms/filters/InputSearch';
-import { ModalFilter } from '../forms/filters/ModalFilter';
+import { MenuProfile } from '@components/nav/menu/MenuProfile';
+import { InputSearch } from '@components/forms/filters/InputSearch';
+import { ModalFilter } from '@components/forms/filters/ModalFilter';
 import { useAuth } from '../../store/AuthContext';
 
 export function DesktopNav() {

src/components/nav/MobileNav.tsx

@@ -25,9 +25,9 @@ import {
 } from '@chakra-ui/react';
 
 import { navLink, accountLinks } from '../../data/links';
-import { InputSearch } from '../forms/filters/InputSearch';
-import { ModalFilter } from '../forms/filters/ModalFilter';
-import { MenuProfile } from '../../components/nav/menu/MenuProfile';
+import { InputSearch } from '@components/forms/filters/InputSearch';
+import { ModalFilter } from '@components/forms/filters/ModalFilter';
+import { MenuProfile } from '@components/nav/menu/MenuProfile';
 import { useAuth } from '../../store/AuthContext';
 
 export function MobileNav() {

src/components/nav/Nav.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useBreakpointValue } from '@chakra-ui/react';
 
-import { MobileNav } from './MobileNav';
-import { DesktopNav } from './DesktopNav';
+import { MobileNav } from '@components/nav/MobileNav';
+import { DesktopNav } from '@components/nav/DesktopNav';
 
 export function Nav() {
   const isMobile = useBreakpointValue({ base: true, md: false });

src/components/nav/menu/MenuProfile.tsx

@@ -13,8 +13,8 @@ import {
   MenuDivider,
 } from '@chakra-ui/react';
 
-import { logOut } from '../../../services/firebase/auth';
-import { MenuType } from '../../../components/types';
+import { logOut } from '@services/firebase/auth';
+import { MenuType } from '@components/types';
 
 export function MenuProfile({ displayName, photoURL, uid }: MenuType) {
   const navigate = useNavigate();

src/components/skeletons/SkeletonABooks.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Skeleton, SkeletonText, Flex, Box, Stack } from '@chakra-ui/react';
 
-import { MySimpleGrid } from '../MySimpleGrid';
-import { Aside } from '../Aside';
-import { SkeletonTags } from './SkeletonTags';
-import { SkeletonType } from '../types';
+import { MySimpleGrid } from '@components/MySimpleGrid';
+import { Aside } from '@components/Aside';
+import { SkeletonTags } from '@components/skeletons/SkeletonTags';
+import { SkeletonType } from '@components/types';
 
 export function SkeletonAllBooks({ showTags = true }: SkeletonType) {
   const Cards = Array.from({ length: 12 }, (_, index) => (

src/components/types.d.ts

@@ -142,7 +142,8 @@ interface SkeletonType {
 }
 
 interface ModalOptionsAndConfirType extends DisclosureType {
-  onDeleteBook: () => any | void;
+  onDeleteBook?: () => any | void;
+  onEditBook?: () => any | void;
   name?: string;
   isPending?: boolean;
 }

src/hooks/querys.ts

@@ -22,10 +22,10 @@ import {
   getUserAndBooks,
   updateBook,
   deleteBook,
-} from '../services/api';
-import { logOut } from '../services/firebase/auth';
-import { keys } from '../utils/utils';
-import { BookType } from '../components/types';
+} from '@services/api';
+import { logOut } from '@services/firebase/auth';
+import { keys } from '@utils/utils';
+import { BookType } from '@components/types';
 
 const queryClient = new QueryClient();
 

src/hooks/useRefetchLocation.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { RelatedBooksType } from '../components/types';
+import { RelatedBooksType } from '@components/types';
 
 type Book = {
   pathUrl: string;

src/pages/404.tsx

@@ -3,8 +3,8 @@ import { NavLink } from 'react-router-dom';
 import { Link, Text, VStack, Box, Image, Flex, Icon } from '@chakra-ui/react';
 import { FiArrowLeft } from 'react-icons/fi';
 
-import { MainHead } from '../components/Head';
-import { PageNotFound } from '../assets/assets';
+import { MainHead } from '@components/Head';
+import { PageNotFound } from '@assets/assets';
 
 export function ErrorPage() {
   return (