commit

public/manifest.json

@@ -11,11 +11,6 @@
       "src": "logo192.png",
       "type": "image/png",
       "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

src/components/Body/Body.js

@@ -11,7 +11,7 @@ function Body () {
     return (
                 <Grid p='2%' templateColumns='repeat(4, 1fr)' gridRowGap='4.5%' gap={'2%'} bg='blackAlpha.100' w='87vw' overflow='auto' sx={ { '::-webkit-scrollbar':{ display:'none' }}}>
 
-                    {Movies.length !== 0 && Movies.map((result, index) => <Card  key={index} image={result.image} title={result.title}/>)}
+                    {Movies.length !== 0 && Movies.map((result, index) => <Card  key={index} image={result.image} note={result.note} title={result.title}/>)}
 
                 </Grid>
             )

src/components/Body/Card.js

@@ -6,7 +6,7 @@ function Card (props) {
         <GridItem w='100%' bgGradient='linear(to-t, #fffff5, #edede9)' shadow={'base'} h='390px' display={'flex'} flexDirection='column' alignItems='center' justifyContent='center'>
             <Image src={props.image} alt='image' mt='3%' mb='3%' boxSize='230px' boxShadow='dark-lg'/>
             <Text fontSize='lg' m={'18px'} color='blackAlpha.700'>{props.title}</Text>
-            <Modal title = { props.title } image = { props.image }/>
+            <Modal title = { props.title } note={props.note} image = { props.image }/>
          </GridItem>
     )
 }

src/components/Modal.js

@@ -25,7 +25,7 @@ import { Modal,
     VStack,
     Tag
   } from '@chakra-ui/react'
-import { useContext, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import MovieContext  from '../contexts/MovieContext';
 
 function MovieModal (props) {
@@ -34,11 +34,11 @@ function MovieModal (props) {
 
     const { isOpen, onOpen, onClose } = useDisclosure()
     const [noteLabel, setNoteLabel] = useState([])
+    const [text, setText] = useState("");
 
     const noteRef = useRef();
 
     const addLabel = (label) => {
-      //aniadir solo las labels que no se repitan
       if (noteLabel.includes(label)) {
         return
       }
@@ -48,19 +48,23 @@ function MovieModal (props) {
     async function handleSubmit (e) {
         e.preventDefault();
         try {
-          await createNote(props.title, props.image, noteRef.current.value, noteLabel)
+          await createNote(props.title, props.image, text, noteLabel)
           onClose()
         } catch {
           console.log('error')
         }
     }
 
     const labelInputRef = useRef();
+
+    useEffect(() => {
+      setText(props.note)
+    }, [])
 
 
     return (
         <>
-          <Button onClick={onOpen} bgColor='yellow.200' color='blackAlpha.700' _hover={{backgroundColor: 'yellow.300'}}>Select</Button>
+          <Button onClick={onOpen} bgColor='yellow.200' color='blackAlpha.700' _hover={{backgroundColor: 'yellow.300'}}>{props.note ? 'Open Note' : 'Save'}</Button>
 
           <Modal isOpen={isOpen} onClose={onClose}>
             <ModalOverlay />
@@ -70,7 +74,7 @@ function MovieModal (props) {
               <ModalBody>
                 <Flex direction='column' justify='center' align='center' mb='2%'>
                   <Image src={props.image} alt='image' boxSize='380px' mb='8%' />
-                  <Textarea w='95%' placeholder='Writte your notes about the movie' ref={noteRef}/>
+                  <Textarea w='95%' readOnly={false} value={text} placeholder='Writte your notes about the movie' ref={noteRef} onChange={e => setText(e.target.value)}/>
                 </Flex>
                 <HStack spacing={4}>
 
@@ -105,7 +109,7 @@ function MovieModal (props) {
 
               <ModalFooter>
                   <Button colorScheme='green' mr='42%' onClick={handleSubmit}>
-                    Add
+                    {props.note ? 'Update' : 'Save'}
                   </Button>
               </ModalFooter>
             </ModalContent>

src/contexts/MovieContext.js

@@ -27,7 +27,14 @@ export function MovieProvider(props) {
         note: note,
         label: label,
       }
-    setNotes([...Notes, newNote])
+    const index = Notes.findIndex(m => m.title === newNote.title);
+    if (index === -1) {
+      setNotes([...Notes, newNote]);
+    } else {
+      const newMovies = [...Notes];
+      newMovies.splice(index, 1, newNote);
+      setNotes(newMovies);
+    }
     const newArray = [...new Set([...labels, ...label])];
     setLabels(newArray);
     create(title ,newNote, userId);