Modified styles of some files, implement validateLinkPage in validate…

… file, implement contactEmail and linkPage in registerPetsitterUser and updatePetsitter and have the data displayed when you click on the contact button in the petsitter b00tc4mp#99
TatiGV · Sep 2, 2024 · 6295ae2 · 6295ae2
1 parent 28b2636
commit 6295ae2
Show file tree

Hide file tree

Showing 16 changed files with 160 additions and 104 deletions.
diff --git a/staff/tatiana-garcia/project/api/handlers/registerPetsitterUserHandler.js b/staff/tatiana-garcia/project/api/handlers/registerPetsitterUserHandler.js
@@ -1,10 +1,10 @@
 import { logic } from '../../cor/index.js'
 
 export default (req, res, next) => {
-    const { image, name, city, description, email, linKPage, contacEmail, phoneNumber, password, passwordRepeat, pets } = req.body
+    const { image, name, city, description, email, linkPage, contactEmail, phoneNumber, password, passwordRepeat, pets } = req.body
 
     try {
-        logic.registerPetsitterUser(image, name, city, description, email, linKPage, contacEmail, phoneNumber, password, passwordRepeat, pets)
+        logic.registerPetsitterUser(image, name, city, description, email, linkPage, contactEmail, phoneNumber, password, passwordRepeat, pets)
             .then(() => res.status(201).send())
             .catch(error => next(error))
     } catch (error) {

diff --git a/staff/tatiana-garcia/project/api/handlers/updatePetsitterUserHandler.js b/staff/tatiana-garcia/project/api/handlers/updatePetsitterUserHandler.js
@@ -3,7 +3,7 @@ import { logic } from '../../cor/index.js'
 export default (req, res, next) => {
     const { userId } = req
 
-    const { image: newImage, name: newName, city: newCity, description: newDescription, linKPage: newLinkPage, contacEmail: newContactEmail, phoneNumber: newPhoneNumber, pets: newPets } = req.body
+    const { image: newImage, name: newName, city: newCity, description: newDescription, linkPage: newLinkPage, contactEmail: newContactEmail, phoneNumber: newPhoneNumber, pets: newPets } = req.body
 
     try {
         logic.updatePetsitterUser(userId, newImage, newName, newCity, newDescription, newLinkPage, newContactEmail, newPhoneNumber, newPets)

diff --git a/staff/tatiana-garcia/project/app/logic/registerPetsitterUser.js b/staff/tatiana-garcia/project/app/logic/registerPetsitterUser.js
@@ -2,14 +2,14 @@ import { errors, validate } from '../../com/index.js'
 
 const { SystemError } = errors
 
-export default (image, name, city, description, email, linKPage, contacEmail, phoneNumber, password, passwordRepeat, pets) => {
+export default (image, name, city, description, email, linkPage, contactEmail, phoneNumber, password, passwordRepeat, pets) => {
     validate.image(image, 'image')
     validate.name(name, 'name')
     validate.city(city, 'city')
     validate.description(description, 'description')
     validate.email(email, 'email')
-    validate.image(linKPage, 'linkPage')
-    validate.email(contacEmail, 'contacEmail')
+    validate.linkPage(linkPage, 'linkPage')
+    validate.email(contactEmail, 'contactEmail', true)
     validate.phoneNumber(phoneNumber, 'phoneNumber')
     validate.password(password)
     validate.pets(pets, 'pets')
@@ -19,7 +19,7 @@ export default (image, name, city, description, email, linKPage, contacEmail, ph
         headers: {
             'Content-Type': 'application/json'
         },
-        body: JSON.stringify({ image, name, city, description, email, linKPage, contacEmail, phoneNumber, password, passwordRepeat, pets })
+        body: JSON.stringify({ image, name, city, description, email, linkPage, contactEmail, phoneNumber, password, passwordRepeat, pets })
     })
         .catch(error => { throw new SystemError(error.message) })
         .then(response => {

diff --git a/staff/tatiana-garcia/project/app/logic/updatePetsitterUser.js b/staff/tatiana-garcia/project/app/logic/updatePetsitterUser.js
@@ -3,13 +3,13 @@ import extractPayLoadFromToken from '../util/extractPayLoadFromToken'
 
 const { SystemError } = errors
 
-export default (image, name, city, description, linKPage, contactEmail, phoneNumber, pets) => {
+export default (image, name, city, description, linkPage, contactEmail, phoneNumber, pets) => {
     validate.image(image, 'image')
     validate.name(name, 'name')
     validate.city(city, 'city')
     validate.description(description, 'description')
-    validate.image(linKPage, 'linkPage')
-    validate.email(contactEmail, 'contactEmail')
+    validate.linkPage(linkPage, 'linkPage')
+    validate.email(contactEmail, 'contactEmail', true)
     validate.phoneNumber(phoneNumber, 'phoneNumber')
     validate.pets(pets, 'pets')
 
@@ -21,7 +21,7 @@ export default (image, name, city, description, linKPage, contactEmail, phoneNum
             Authorization: `Bearer ${sessionStorage.token}`,
             'Content-Type': 'application/json'
         },
-        body: JSON.stringify({ image, name, city, description, linKPage, contactEmail, phoneNumber, pets })
+        body: JSON.stringify({ image, name, city, description, linkPage, contactEmail, phoneNumber, pets })
     })
         .catch(error => { throw new SystemError(error.message) })
         .then(response => {

diff --git a/staff/tatiana-garcia/project/app/view/App.jsx b/staff/tatiana-garcia/project/app/view/App.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Routes, Route, useNavigate, Navigate } from 'react-router-dom'
 import { Context } from './context.js'
 import logic from '../logic/index.js'
@@ -12,8 +12,10 @@ import Alert from './common/Alert.jsx'
 import Petsitters from './petsitters/index.jsx'
 import PetsitterDetails from './petsitters/petsitterDetails.jsx'
 import Settings from './settings/index.jsx'
+import SettingsPetsitter from './settings/updatePetsitterUser.jsx'
 
 export default function App() {
+  const [isPetsitter, setIsPetsitter] = useState(false)
   const navigate = useNavigate()
 
   const [alertMessage, setAlertMessage] = useState(null)
@@ -46,6 +48,18 @@ export default function App() {
 
   const handleAlertAccept = () => setAlertMessage(null)
 
+  useEffect(() => {
+    if (logic.isUserLoggedIn()) {
+      if (logic.getUserRole() === 'petsitter') {
+        setIsPetsitter(true)
+      } else {
+        setIsPetsitter(false)
+      }
+    } else {
+      setIsPetsitter(false)
+    }
+  })
+
   return <Context.Provider value={{ alert: setAlertMessage }}>
     <Routes>
       <Route path='/*' element={<Home onLogout={handleLogout} />} />
@@ -54,7 +68,7 @@ export default function App() {
       <Route path='/contact' element={<Contact onRegisterPetsitterUserClick={handleRegisterPetsitterUserClick} />} />
       <Route path='/registerPetsitter' element={logic.isUserLoggedIn() ? <Navigate to='/' /> : <RegisterPetsitterUser onRegisterPetsitterUser={handleRegisterPetsitterUser} onLoginClick={handleLoginClick} />} />
       <Route path='/petsitters' element={<Petsitters />} />
-      <Route path='/settings' element={<Settings onLogoutClick={handleLogout} />} />
+      <Route path='/settings' element={isPetsitter ? <SettingsPetsitter onLogoutClick={handleLogout} /> : <Settings onLogoutClick={handleLogout} />} />
       <Route path='/petsitters/:petsitterId' element={<PetsitterDetails handleLoginClick={onLoginClicked} />} />
     </Routes>
 

diff --git a/staff/tatiana-garcia/project/app/view/home/Footer.jsx b/staff/tatiana-garcia/project/app/view/home/Footer.jsx
@@ -2,8 +2,8 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FaUser } from 'react-icons/fa'
 import { RiHomeHeartFill } from 'react-icons/ri'
-import { GiPawHeart } from 'react-icons/gi'
-import { MdOutlineMail } from "react-icons/md"
+import { PiPawPrintFill } from "react-icons/pi"
+import { MdEmail } from "react-icons/md"
 
 import Button from '../library/Button'
 import Container from '../library/Container'
@@ -28,11 +28,11 @@ export default function Footer({ defaultTab }) {
             </Button>
 
             <Button onClick={() => onPetsittersClick()} className={`flex justify-center items-center bg-transparent border-transparent rounded-lg p-1 ${activeTab === 'petsitters' ? 'text-purple-500' : 'text-dimgray'}`}>
-                <GiPawHeart size={24} />
+                <PiPawPrintFill size={24} />
             </Button>
 
             <Button onClick={() => onContactClick()} className={`flex justify-center items-center bg-transparent border-transparent rounded-lg p-1 ${activeTab === 'contact' ? 'text-purple-500' : 'text-dimgray'}`}>
-                <MdOutlineMail size={24} />
+                <MdEmail size={24} />
             </Button>
 
             <Button onClick={() => onLoginClick()} className={`flex justify-center items-center bg-transparent border-transparent rounded-lg p-1 ${activeTab === 'login' ? 'text-purple-500' : 'text-dimgray'}`}>

diff --git a/staff/tatiana-garcia/project/app/view/petsitters/Review.jsx b/staff/tatiana-garcia/project/app/view/petsitters/Review.jsx
@@ -29,19 +29,22 @@ export default function Review({ review, onDelete }) {
     }
 
     return <Container className='flex flex-row items-center border-y border-solid border-gray-400 px-2'>
-        <Container className='flex flex-col w-full h-auto'>
+        <Container className='flex flex-row w-full h-auto'>
             <img src={review.author.image} alt='imagen usuario' className='h-24 w-24 rounded-[15px] mr-4 p-2 ml-3' />
-            <Paragraph className='text-sm my-1 ml-1 font-bold'>{review.author.name}</Paragraph>
-            <Paragraph className='text-sm my-1 ml-1'>{review.comment}</Paragraph>
-            {review.rate > 0 && <Rating
-                name='read-only'
-                value={review.rate}
-                style={{ marginBottom: '12px', marginTop: '6px' }}
-                emptyIcon={<StarIcon style={{ opacity: 1, color: 'white' }} fontSize='inherit' />}
-                readOnly />}
+            <Container className='flex flex-col'>
+                <Paragraph className='text-sm my-1 ml-1 font-bold'>{review.author.name}</Paragraph>
+                <Paragraph className='text-sm my-1 ml-1'>{review.comment}</Paragraph>
+                {review.rate > 0 && <Rating
+                    name='read-only'
+                    value={review.rate}
+                    style={{ marginBottom: '12px', marginTop: '6px' }}
+                    size='small'
+                    emptyIcon={<StarIcon style={{ opacity: 1, color: 'white' }} fontSize='inherit' />}
+                    readOnly />}
+            </Container>
         </Container>
-        {deleteVisibility && <Container className='mr-3'>
-            <Button onClick={handlePetsitterDelete}><DeleteIcon className='w-7 h-7 text-black' /></Button>
+        {deleteVisibility && <Container className='mr-1'>
+            <Button onClick={handlePetsitterDelete}><DeleteIcon className='w-6 h-6 text-slate-800' /></Button>
         </Container>}
     </Container>
 }
diff --git a/staff/tatiana-garcia/project/app/view/petsitters/index.jsx b/staff/tatiana-garcia/project/app/view/petsitters/index.jsx
@@ -59,7 +59,7 @@ export default function SearchPetsitters() {
 
     return <>
         <Header />
-        <main className='bg-teal-100 h-screen mt-16 mb-12 flex flex-col items-center justify-start gap-4 text-[1.5rem]'>
+        <main className='bg-teal-100 h-screen mt-16 mb-12 flex flex-col items-center justify-start text-[1.5rem]'>
             <Container className='p-2 bg-teal-100 w-full max-w-sm'>
                 <Heading className='text-center mb-4 font-bold'>Guarderías</Heading>
 
@@ -126,7 +126,7 @@ export default function SearchPetsitters() {
                         </select>
                     </Container>
                 </Container>
-                <Container className='mt-4'>
+                <Container className='mt-4 mb-16'>
                     {petsitters.length > 0 ? (
                         petsitters.map(petsitter => (
                             <div key={petsitter.id} className='flex items-start h-28 w-full mr-4 mb-4 rounded-[15px] shadow-md bg-white' onClick={() => onPetsitterDetailsClick(petsitter.id)}>

diff --git a/staff/tatiana-garcia/project/app/view/petsitters/petsitterDetails.jsx b/staff/tatiana-garcia/project/app/view/petsitters/petsitterDetails.jsx
@@ -32,6 +32,7 @@ export default function PetsitterDetails({ handleLoginClick }) {
     const [rating, setRating] = useState(0)
     const [value, setValue] = useState(0)
     const [addReviewVisibility, setAddReviewVisibility] = useState(false)
+    const [addAllDetailsVisibility, setAllDetailsVisibility] = useState(false)
 
 
     const onLoginClick = () => handleLoginClick()
@@ -44,6 +45,14 @@ export default function PetsitterDetails({ handleLoginClick }) {
         setAddReviewVisibility(false)
     }
 
+    const onAllDetailsClick = () => {
+        setAllDetailsVisibility(true)
+    }
+
+    const onCancelAllDetailsClick = () => {
+        setAllDetailsVisibility(false)
+    }
+
     const onReviewSubmit = (event) => {
         const { sub: userId } = extractPayloadFromToken(sessionStorage.token)
 
@@ -151,43 +160,43 @@ export default function PetsitterDetails({ handleLoginClick }) {
     return (<>
         <Header />
         <main className='bg-teal-100 h-screen mt-16 mb-12 flex flex-col items-center justify-start gap-4 text-[1.5rem] overflow-y-auto'>
-            <Container className='text-center mb-4'>
+            <Container className='text-center m-6'>
                 <Heading className='text-2xl font-bold'>Guardería</Heading>
             </Container>
             {petsitter != null ? (
-                <Container className='text-lg bg-white p-3 mt-0 rounded-[50px] shadow-lg overflow-y-auto max-h-[80vh]'>
-                    <Container className='flex items-center mb-4'>
-                        <img src={petsitter.image} alt='imagen guarderia' className='h-24 w-24 rounded-[15px] mr-4 p-2 ml-3' />
+                <Container className='text-lg bg-white p-1 rounded-[50px] shadow-lg box-content h-auto'>
+                    <Container className='flex items-center m-4'>
+                        <img src={petsitter.image} alt='imagen guarderia' className='h-24 w-24 rounded-[15px] m-1' />
 
-                        <Container className='flex flex-col'>
-                            <Heading className='text-base font-bold'>{petsitter.name}</Heading>
-                            <Paragraph className='text-sm mt-1 ml-0 font-semibold text-gray-500'>{petsitter.city}</Paragraph>
+                        <Container>
+                            <Heading className='text-base font-bold m-2'>{petsitter.name}</Heading>
+                            <Paragraph className='text-sm font-semibold text-gray-500'>{petsitter.city}</Paragraph>
                             <Container className='flex flex-row items-center'>
                                 <Rating name='read-only' value={rating} precision={0.25} size='small' emptyIcon={<StarIcon style={{ opacity: 1, color: 'white' }} fontSize='inherit' />} readOnly />
-                                <Paragraph className='text-sm mt-1 ml-0 font-semibold text-gray-500'>{rating.toFixed(1)}</Paragraph>
+                                <Paragraph className='text-sm font-semibold text-gray-500'>{rating.toFixed(1)}</Paragraph>
                             </Container>
                         </Container>
                     </Container>
 
                     <Container>
-                        <Paragraph className=' flex flex-col text-sm text-gray-700 mb-4'>{petsitter.description}</Paragraph>
+                        <Paragraph className=' flex flex-col text-lg text-gray-700 m-4'>{petsitter.description}</Paragraph>
                     </Container>
 
                     {
                         userRole === 'regular' ? (
                             <Container className='font-bold text-lg p-1 flex flex-row space-x-2'>
-                                <Button className='w-36 bg-green-100 text-black rounded-full hover:bg-green-200 transition duration-200'>Contáctame</Button>
+                                <Button className='w-36 bg-green-100 text-black rounded-full hover:bg-green-200 transition duration-200' onClick={onAllDetailsClick}>Contáctame</Button>
                                 <Button className='w-36 bg-green-100 text-black rounded-full hover:bg-green-200 transition duration-200' onClick={onAddReviewClick}>Valórame</Button>
                             </Container>
 
                         ) : (
-                            <Link className='text-xs font-bold ' onClick={onLoginClick}>Loguéate para contactar o valorar a tu guardería</Link>
+                            <Link className='text-sm m-4 font-bold' onClick={onLoginClick}>Loguéate para contactar con {petsitter.name}</Link>
                         )
                     }
 
                     <Container>
-                        <Heading className='items-start justify-start flex flex-row text-xl font-bold '>⭐ Reseñas</Heading>
-                        <Container className='flex flex-col max-h-48 space-y-4'>
+                        <Heading className='items-start justify-start m-3 flex flex-row text-lg font-bold '>⭐ Reseñas</Heading>
+                        <Container className='flex flex-col'>
                             {reviews.map(review => (
                                 <Review key={review.id} review={review} onDelete={handleDeletePetsitterReview} />
                             ))}
@@ -206,13 +215,25 @@ export default function PetsitterDetails({ handleLoginClick }) {
                 <Footer defaultTab={'petsitters'} />
             </Container>
 
+            {addAllDetailsVisibility && (
+                <Container className='absolute top-0 left-0 w-screen h-screen bg-black bg-opacity-50 z-20 flex items-center justify-center'>
+                    <Container className='bg-green-100 p-6 border border-black rounded-[25px] flex flex-col items-center w-11/12 max-w-md'>
+                        <Heading className='text-black text-center font-bold mb-4'>Datos de contacto de {petsitter?.name}</Heading>
+                        <a href={`mailto:${petsitter?.contactEmail}`} className='text-black text-center text-lg font-semibold mb-2 underline break-words max-w-full'>{petsitter?.contactEmail}</a>
+                        <a href={petsitter?.linkPage} target="_blank" rel="noopener noreferrer" className='text-black text-center text-sm font-semibold mb-2 underline break-words max-w-full'>{petsitter?.linkPage}</a>
+                        <a href={`tel:${petsitter?.phoneNumber}`} className='text-black text-center text-lg font-semibold mb-2 underline'>{petsitter?.phoneNumber}</a>
+                        <Button className='w-28 bg-red-400 text-white rounded-full hover:bg-red-500 transition duration-200 mt-4' onClick={onCancelAllDetailsClick}>Cancelar</Button>
+                    </Container>
+                </Container>
+            )}
+
             {addReviewVisibility && <>
                 <Container className='absolute top-0 left-0 w-screen h-screen bg-black bg-opacity-50 z-20 flex items-center justify-center'>
 
-                    <Form className='bg-white p-6 border border-black rounded-[25px] flex flex-col items-center w-11/12 max-w-md' onSubmit={onReviewSubmit}>
-                        <Label className='text-black text-center font-bold mb-4'>Da tu opinión sobre {petsitter?.name}</Label>
+                    <Form className='bg-white p-6 border border-black rounded-[50px] flex flex-col items-center w-11/12 max-w-md' onSubmit={onReviewSubmit}>
+                        <Label className='text-black text-center font-bold m-6'>Da tu opinión sobre {petsitter?.name}</Label>
                         <Container className='mb-4 w-full'>
-                            <Input className='bg-gray-200 w-full p-2 rounded' type='text' id='' name='comment-input' placeholder='escribe aquí tu reseña' />
+                            <textarea className='bg-gray-200 w-full h-32 rounded-[25px] px-4 py-2 text-black text-lg placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none' id='comment-input' name='comment-input' placeholder='escribe aquí tu reseña' />
                         </Container>
                         <Container className='flex justify-center'>
                             <Rating name='rating-input'
@@ -223,7 +244,7 @@ export default function PetsitterDetails({ handleLoginClick }) {
                                 size='large'
                                 emptyIcon={<StarIcon style={{ opacity: 1, color: 'grey' }} fontSize='inherit' />} />
                         </Container>
-                        <Container className='flex justify-between mt-4 w-full'>
+                        <Container className='flex justify-around m-4 w-full'>
                             <Button type='button' className='w-28 bg-red-400 text-white rounded-full hover:bg-red-500 transition duration-200' onClick={onCancelReviewClick}>Cancelar</Button>
                             <Button type='submit' className='w-28 bg-green-400 text-white rounded-full hover:bg-green-500 transition duration-200'>Enviar</Button>
                         </Container>

diff --git a/staff/tatiana-garcia/project/app/view/registerPetssiterUser/index.jsx b/staff/tatiana-garcia/project/app/view/registerPetssiterUser/index.jsx
@@ -25,7 +25,7 @@ export default function RegisterPetsitterUser({ onRegisterPetsitterUser, onLogin
         const cityInput = form['city-input']
         const descriptionInput = form['description-input']
         const emailInput = form['email-input']
-        const linkPageInput = form['link-page.input']
+        const linkPageInput = form['link-page-input']
         const contactEmailInput = form['contact-email-input']
         const phoneNumberInput = form['phoneNumber-input']
         const passwordInput = form['password-input']

diff --git a/staff/tatiana-garcia/project/app/view/settings/index.jsx b/staff/tatiana-garcia/project/app/view/settings/index.jsx
@@ -44,6 +44,8 @@ export default function Settings({ onLogoutClick }) {
                 .then(() => {
                     loadUser()
 
+                    alert('Cambios guardados')
+
                     navigate('/')
                 })
                 .catch(error => {