feat: you can share collections without worrying about another user m…

…aking changes to the collection
Franqsanz · Dec 23, 2024 · 7cf5a48 · 7cf5a48
1 parent da8e28f
commit 7cf5a48
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 111 deletions.
diff --git a/src/components/modals/ModalCollectionSelector.tsx b/src/components/modals/ModalCollectionSelector.tsx
@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   Checkbox,
+  Flex,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -119,6 +120,38 @@ export function ModalCollectionSelector({
     }
   }
 
+  function renderContent() {
+    if (isPending) {
+      return (
+        <Box m='auto' py='5'>
+          <Spinner size='lg' />
+        </Box>
+      );
+    }
+
+    if (!data || data.length === 0) {
+      return (
+        <>
+          <Flex direction='column' gap='2' textAlign='center' py='4'>
+            <Box>No hay colecciones disponibles.</Box>
+            <Box>Crea una colección primero.</Box>
+          </Flex>
+        </>
+      );
+    }
+
+    return data.map((collection) => (
+      <Checkbox
+        key={collection.id}
+        isChecked={selectedCollections[collection.id] || false}
+        onChange={() => handleCheckboxChange(collection.id)}
+        colorScheme='green'
+      >
+        {collection.name}
+      </Checkbox>
+    ));
+  }
+
   return (
     <>
       <Modal
@@ -134,22 +167,7 @@ export function ModalCollectionSelector({
           <ModalBody bg={bgColorBox} p='5'>
             <Box as='form' onSubmit={handleSubmit}>
               <VStack spacing='4' align='stretch' mb='7'>
-                {isPending ? (
-                  <Box m='auto' py='5'>
-                    <Spinner size='lg' />
-                  </Box>
-                ) : (
-                  data?.map((collection) => (
-                    <Checkbox
-                      key={collection.id}
-                      isChecked={selectedCollections[collection.id] || false}
-                      onChange={() => handleCheckboxChange(collection.id)}
-                      colorScheme='green'
-                    >
-                      {collection.name}
-                    </Checkbox>
-                  ))
-                )}
+                {renderContent()}
               </VStack>
               <Button
                 w='full'

diff --git a/src/components/skeletons/SkeletonACollections.tsx b/src/components/skeletons/SkeletonACollections.tsx
@@ -28,7 +28,7 @@ export function SkeletonACollections() {
           align='center'
         >
           <Skeleton w='120px' h='20px' />
-          <Skeleton w='150px' h='30px' rounded='lg' />
+          <Skeleton w={{ base: '40px', md: '150px' }} h='30px' rounded='lg' />
         </Flex>
       </Flex>
       <MyContainer>

diff --git a/src/pages/profile/collections/AllCollections.tsx b/src/pages/profile/collections/AllCollections.tsx
@@ -68,64 +68,59 @@ export function AllCollections() {
   } else {
     collectionsUI = (
       <MySimpleGrid gap={{ base: 3, sm: 5 }}>
-        {data?.collections
-          .sort(
-            (a, b) =>
-              new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-          )
-          .map(({ id, name, createdAt }) => (
-            <>
-              <Flex
-                key={id}
-                w={{ base: 'full', md: '250px' }}
-                h={{ base: '200px', sm: '210px' }}
-                boxShadow='xl'
-                border='1px solid #A0AEC0'
-                rounded='lg'
-                direction='column'
-                justifyContent={{ base: 'space-between', md: 'flex-start' }}
-                justify='center'
-                position='relative'
-              >
-                <Flex w='full' justify='flex-end'>
-                  <MenuCollections id={id} name={name} refetch={refetch} />
-                </Flex>
-                <Flex w='full' direction='column' textAlign='center' gap='3'>
-                  <Box mb='4'>
-                    <Box mb='1' fontSize={{ base: 'xs', sm: 'lg' }}>
-                      {name}
-                    </Box>
-                    <Box fontSize={{ base: '9px', sm: '10px' }}>
-                      {parseDate(createdAt)}
-                    </Box>
+        {data?.collections.map(({ id, name, createdAt }) => (
+          <>
+            <Flex
+              key={id}
+              w={{ base: 'full', md: '250px' }}
+              h={{ base: '200px', sm: '210px' }}
+              boxShadow='xl'
+              border='1px solid #A0AEC0'
+              rounded='lg'
+              direction='column'
+              justifyContent={{ base: 'space-between', md: 'flex-start' }}
+              justify='center'
+              position='relative'
+            >
+              <Flex w='full' justify='flex-end'>
+                <MenuCollections id={id} name={name} refetch={refetch} />
+              </Flex>
+              <Flex w='full' direction='column' textAlign='center' gap='3'>
+                <Box mb='4'>
+                  <Box mb='1' fontSize={{ base: 'xs', sm: 'lg' }}>
+                    {name}
+                  </Box>
+                  <Box fontSize={{ base: '9px', sm: '10px' }}>
+                    {parseDate(createdAt)}
                   </Box>
-                  <Link
-                    as={NavLink}
-                    to={`/my-collections/collection/${id}`}
-                    w='full'
-                    bg={bgRandomBookCardLink}
-                    py='4'
-                    px='7'
-                    color={colorLink}
-                    position={{ base: 'initial', md: 'absolute' }}
-                    bottom='0'
-                    roundedBottom='lg'
-                    tabIndex={-1}
-                    _hover={{ outline: 'none' }}
+                </Box>
+                <Link
+                  as={NavLink}
+                  to={`/my-collections/collection/${id}`}
+                  w='full'
+                  bg={bgRandomBookCardLink}
+                  py='4'
+                  px='7'
+                  color={colorLink}
+                  position={{ base: 'initial', md: 'absolute' }}
+                  bottom='0'
+                  roundedBottom='lg'
+                  tabIndex={-1}
+                  _hover={{ outline: 'none' }}
+                >
+                  <Flex
+                    align='center'
+                    justify={{ base: 'center', md: 'flex-start' }}
+                    fontSize={{ base: 'sm', md: 'md' }}
                   >
-                    <Flex
-                      align='center'
-                      justify={{ base: 'center', md: 'flex-start' }}
-                      fontSize={{ base: 'sm', md: 'md' }}
-                    >
-                      Abrir
-                      <Icon as={FiArrowRight} ml='2' />
-                    </Flex>
-                  </Link>
-                </Flex>
+                    Abrir
+                    <Icon as={FiArrowRight} ml='2' />
+                  </Flex>
+                </Link>
               </Flex>
-            </>
-          ))}
+            </Flex>
+          </>
+        ))}
       </MySimpleGrid>
     );
   }

diff --git a/src/pages/profile/collections/CollectionDetail.tsx b/src/pages/profile/collections/CollectionDetail.tsx
@@ -58,7 +58,10 @@ export function CollectionDetail() {
     refetch,
   } = useCollectionDetail(collectionId);
   const { mutate, isSuccess, isPending: isPendingDelete } = useDeleteCollections();
+  const isCurrentUserAuthor = currentUser && currentUser.uid === data?.userId;
   let asideAndCardsUI;
+  let btnOptionsDesktop;
+  let btnOptionsMobile;
 
   useEffect(() => {
     if (isSuccess) {
@@ -160,6 +163,52 @@ export function CollectionDetail() {
     );
   }
 
+  if (currentUser && isCurrentUserAuthor) {
+    btnOptionsDesktop = (
+      <Flex display={{ base: 'none', sm: 'flex' }} gap='3'>
+        <Button
+          onClick={onOpenEdit}
+          size='sm'
+          fontWeight='normal'
+          _hover={{ color: 'none' }}
+        >
+          Editar nombre
+        </Button>
+        <Button
+          onClick={onOpenDelete}
+          size='sm'
+          fontWeight='normal'
+          bg='red.500'
+          color='white'
+          _hover={{ color: 'none' }}
+        >
+          Eliminar colección
+        </Button>
+      </Flex>
+    );
+
+    btnOptionsMobile = (
+      <Box display={{ base: 'block', sm: 'none' }}>
+        <Menu>
+          <MenuButton
+            as={IconButton}
+            aria-label='Options'
+            icon={<FiMoreVertical />}
+            size='sm'
+          />
+          <MenuList p='0' fontSize='sm'>
+            <MenuItem p='2' onClick={onOpenEdit}>
+              Editar nombre
+            </MenuItem>
+            <MenuItem p='2' onClick={onOpenDelete}>
+              Eliminar colección
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </Box>
+    );
+  }
+
   return (
     <>
       <ScrollRestoration />
@@ -199,44 +248,8 @@ export function CollectionDetail() {
               Volver
             </Flex>
           </Button>
-          <Flex display={{ base: 'none', sm: 'flex' }} gap='3'>
-            <Button
-              onClick={onOpenEdit}
-              size='sm'
-              fontWeight='normal'
-              _hover={{ color: 'none' }}
-            >
-              Editar nombre
-            </Button>
-            <Button
-              onClick={onOpenDelete}
-              size='sm'
-              fontWeight='normal'
-              bg='red.500'
-              color='white'
-              _hover={{ color: 'none' }}
-            >
-              Eliminar colección
-            </Button>
-          </Flex>
-          <Box display={{ base: 'block', sm: 'none' }}>
-            <Menu>
-              <MenuButton
-                as={IconButton}
-                aria-label='Options'
-                icon={<FiMoreVertical />}
-                size='sm'
-              />
-              <MenuList p='0' fontSize='sm'>
-                <MenuItem p='2' onClick={onOpenEdit}>
-                  Editar nombre
-                </MenuItem>
-                <MenuItem p='2' onClick={onOpenDelete}>
-                  Eliminar colección
-                </MenuItem>
-              </MenuList>
-            </Menu>
-          </Box>
+          {btnOptionsDesktop}
+          {btnOptionsMobile}
         </Flex>
       </Flex>
       <MyContainer>{asideAndCardsUI}</MyContainer>

diff --git a/src/services/api.ts b/src/services/api.ts
@@ -130,7 +130,9 @@ async function deleteCollections(id: string | undefined, collectionId: string) {
 }
 
 async function getFindOneCollection(collectionsId: string | undefined) {
-  return await fetchData(`${API_URL}/users/my-collections/${collectionsId}`);
+  return await fetchData(
+    `${API_URL}/users/my-collections/collection/${collectionsId}`,
+  );
 }
 
 async function postBook(books: any) {