chore: updated some packages and improvements in collections

Franqsanz · Dec 16, 2024 · 89411c3 · 89411c3
1 parent 314a514
commit 89411c3
Show file tree

Hide file tree

Showing 8 changed files with 4,326 additions and 2,877 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,69 +24,69 @@
   "license": "MIT",
   "dependencies": {
     "@chakra-ui/react": "2.8.2",
-    "@emotion/react": "11.13.3",
-    "@emotion/styled": "11.13.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
     "@smastrom/react-rating": "1.5.0",
-    "@tanstack/react-query": "5.51.11",
-    "@tanstack/react-query-devtools": "5.51.11",
+    "@tanstack/react-query": "5.62.7",
+    "@tanstack/react-query-devtools": "5.62.7",
     "atropos": "2.0.2",
-    "chakra-react-select": "4.9.2",
+    "chakra-react-select": "5.0.2",
     "firebase": "10.12.4",
-    "framer-motion": "11.11.4",
+    "framer-motion": "11.15.0",
     "medium-zoom": "1.1.0",
     "million": "3.1.11",
-    "nanoid": "5.0.7",
+    "nanoid": "5.0.9",
     "pako": "2.1.0",
     "react": "18.3.1",
     "react-cropper": "2.3.3",
     "react-dom": "18.3.1",
-    "react-error-boundary": "4.0.13",
+    "react-error-boundary": "4.1.2",
     "react-helmet-async": "2.0.5",
-    "react-hook-form": "7.53.0",
-    "react-icons": "5.3.0",
-    "react-intersection-observer": "9.13.1",
+    "react-hook-form": "7.54.1",
+    "react-icons": "5.4.0",
+    "react-intersection-observer": "9.14.0",
     "react-lazy-load": "4.0.1",
     "react-router-dom": "6.26.2",
-    "react-share": "5.1.0",
-    "zustand": "4.5.4"
+    "react-share": "5.1.1",
+    "zustand": "5.0.2"
   },
   "devDependencies": {
     "@sentry/react": "8.33.1",
-    "@testing-library/jest-dom": "6.4.6",
-    "@testing-library/react": "16.0.0",
-    "@types/cypress": "1.1.3",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.1.0",
+    "@types/cypress": "1.1.6",
     "@types/pako": "2.0.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "8.8.1",
-    "@typescript-eslint/parser": "8.8.1",
-    "@vitejs/plugin-react": "4.3.2",
-    "@vitest/ui": "2.0.4",
-    "cypress": "13.13.1",
+    "@typescript-eslint/eslint-plugin": "8.18.1",
+    "@typescript-eslint/parser": "8.18.1",
+    "@vitejs/plugin-react": "4.3.4",
+    "@vitest/ui": "2.1.8",
+    "cypress": "13.16.1",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
     "eslint-plugin-cypress": "3.3.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.37.1",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.1.0",
     "husky": "9.1.1",
-    "jsdom": "24.1.1",
+    "jsdom": "25.0.1",
     "lint-staged": "15.2.7",
     "patch-package": "8.0.0",
-    "prettier": "3.3.3",
-    "sharp": "0.33.4",
+    "prettier": "3.4.2",
+    "sharp": "0.33.5",
     "svgo": "3.3.2",
-    "typescript": "5.6.3",
-    "vite": "5.4.3",
+    "typescript": "5.7.2",
+    "vite": "6.0.3",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-html": "3.2.2",
     "vite-plugin-image-optimizer": "1.1.8",
-    "vite-plugin-minify": "2.0.0",
+    "vite-plugin-minify": "2.1.0",
     "vite-plugin-remove-console": "2.2.0",
-    "vite-plugin-webfont-dl": "3.9.5",
-    "vitest": "2.0.4"
+    "vite-plugin-webfont-dl": "3.10.3",
+    "vitest": "2.1.8"
   }
 }
diff --git a/src/components/forms/FormEdit.tsx b/src/components/forms/FormEdit.tsx
@@ -519,7 +519,7 @@ export function FormEdit({
                   name='category'
                   size={{ base: 'md', md: 'lg' }}
                   variant='filled'
-                  colorScheme='green'
+                  tagColorScheme='green'
                   onChange={handleCategoryChange}
                   options={sortedCategories}
                   value={books.category.map((category) => {

diff --git a/src/components/forms/NewBook.tsx b/src/components/forms/NewBook.tsx
@@ -519,7 +519,7 @@ export function FormNewBook() {
                   name='category'
                   size={{ base: 'md', md: 'lg' }}
                   variant='filled'
-                  colorScheme='green'
+                  tagColorScheme='green'
                   onChange={handleCategoryChange}
                   options={sortedCategories}
                   closeMenuOnSelect={false}

diff --git a/src/components/ui/MySimpleGrid.tsx b/src/components/ui/MySimpleGrid.tsx
@@ -3,10 +3,11 @@ import { SimpleGrid, useColorModeValue } from '@chakra-ui/react';
 
 interface SimpleGridType {
   width?: string;
+  gap?: number;
   children: React.ReactNode;
 }
 
-export function MySimpleGrid({ width = '8xl', children }: SimpleGridType) {
+export function MySimpleGrid({ width = '8xl', gap, children }: SimpleGridType) {
   const colorCard = useColorModeValue('gray.900', 'gray.100');
 
   return (
@@ -21,6 +22,7 @@ export function MySimpleGrid({ width = '8xl', children }: SimpleGridType) {
         mt={{ base: 5, md: 12 }}
         pl={{ base: 0, md: 5 }}
         color={colorCard}
+        gap={gap}
       >
         {children}
       </SimpleGrid>

diff --git a/src/pages/profile/collections/AllCollections.tsx b/src/pages/profile/collections/AllCollections.tsx
@@ -67,11 +67,11 @@ export function AllCollections() {
     );
   } else {
     collectionsUI = (
-      <MySimpleGrid>
+      <MySimpleGrid gap={5}>
         {data?.collections.map(({ id, name, createdAt }) => (
           <>
             <Flex
-              w={{ base: '127px', sm: '160px', md: '250px' }}
+              w={{ base: 'full', md: '250px' }}
               h={{ base: '200px', sm: '210px' }}
               boxShadow='xl'
               border='1px solid #A0AEC0'
@@ -89,7 +89,9 @@ export function AllCollections() {
                   <Box mb='1' fontSize={{ base: 'sm', md: 'lg' }}>
                     {name}
                   </Box>
-                  <Box fontSize='10px'>{parseDate(createdAt)}</Box>
+                  <Box fontSize={{ base: '9px', sm: '10px' }}>
+                    {parseDate(createdAt)}
+                  </Box>
                 </Box>
                 <Link
                   as={NavLink}
@@ -147,16 +149,7 @@ export function AllCollections() {
         >
           {data?.totalCollections ?? 0}{' '}
           {data?.totalCollections === 1 ? 'Colección' : 'Colecciones'}
-          <Button
-            fontWeight='500'
-            onClick={onOpen}
-            size='sm'
-            border='1px'
-            bg={bgColorButton}
-            color='black'
-            _hover={{ bg: 'green.600' }}
-            _active={{ bg: 'green.600' }}
-          >
+          <Button fontWeight='500' onClick={onOpen} size='sm'>
             <Flex align='center' justify='center'>
               <Icon as={TbPlaylistAdd} fontSize='25' mr='1' />
               <Box as='span' display={{ base: 'none', md: 'block' }}>

diff --git a/src/pages/profile/collections/CollectionDetail.tsx b/src/pages/profile/collections/CollectionDetail.tsx
@@ -1,5 +1,10 @@
 import React, { useEffect } from 'react';
-import { NavLink, useNavigate, useParams } from 'react-router-dom';
+import {
+  NavLink,
+  ScrollRestoration,
+  useNavigate,
+  useParams,
+} from 'react-router-dom';
 import {
   Box,
   Button,
@@ -154,6 +159,7 @@ export function CollectionDetail() {
     <>
       <MainHead title={`${data?.name} | Mis colecciones | XBuniverse`} />
       <ContainerTitle title={data?.name} />
+      <ScrollRestoration />
       <ModalCollection
         title='Editar colección'
         textButton='Guardar'

diff --git a/src/services/auth/auth.tsx b/src/services/auth/auth.tsx
@@ -51,16 +51,20 @@ export function SignIn() {
   }, [userId]);
 
   useEffect(() => {
-    if (!isPending && (!data || data.uid === null)) {
-      return navigate('/create-username', {
-        state: { token: window.localStorage.getItem('app_tk') },
-      });
-    }
+    function performNavigation() {
+      if (!isPending && (!data || data.uid === null)) {
+        navigate('/create-username', {
+          state: { token: window.localStorage.getItem('app_tk') },
+        });
+      }
 
-    if (data && data.username) {
-      return navigate(`/${data.username}`);
+      if (data?.username) {
+        navigate(`/${data.username}`);
+      }
     }
-  }, [data, isPending, error]);
+
+    performNavigation(); // Llama la función dentro del useEffect
+  }, [data, isPending, navigate]);
 
   async function DisconnectFirebaseAccount() {
     // const { currentUser } = useAuth();