Skip to content

Commit

Permalink
Add searchPetsitters app and api, without tests b00tc4mp#99
Browse files Browse the repository at this point in the history
  • Loading branch information
@TatiGV
TatiGV committed Aug 23, 2024
1 parent fcfd303 commit faaa59d
Show file tree
Hide file tree
Showing 4 changed files with 171 additions and 63 deletions.
6 changes: 5 additions & 1 deletion staff/tatiana-garcia/project/app/logic/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import loginUser from './loginUser'
import isUserLoggedIn from './isUserLoggedIn'
import logoutUser from './logoutUser'
import updateUser from './updateUser'
import searchPetsitters from './searchPetsitters'
import getAllPetsitters from './getAllPetsitters'

const logic = {
registerUser,
Expand All @@ -15,7 +17,9 @@ const logic = {
loginUser,
isUserLoggedIn,
logoutUser,
updateUser
updateUser,
searchPetsitters,
getAllPetsitters
}

export default logic
34 changes: 34 additions & 0 deletions staff/tatiana-garcia/project/app/logic/searchPetsitters.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { validate, errors } from '../../com/index.js'

const { SystemError } = errors

export default (city, pet = null) => {
validate.city(city, 'city')

return fetch(`${import.meta.env.VITE_API_URL}/petsitters/search?city=${city}&pet=${pet}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.catch(error => { throw new SystemError(error.message) })
.then(response => {
const { status } = response

if (status === 200) {
return response.json()
.then(
petsitters => petsitters
)
}

return response.json()
.then(body => {
const { error, message } = body

const constructor = errors[error]

throw new constructor(message)
})
})
}
4 changes: 0 additions & 4 deletions staff/tatiana-garcia/project/app/view/home/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { useNavigate } from 'react-router-dom'

import Header from './Header'
import Heading from '../library/Heading'
import Container from '../library/Container'
Expand All @@ -8,8 +6,6 @@ import Paragraph from '../library/Paragraph'
import Image from '../library/Image'

export default function Home({ }) {
const navigate = useNavigate()

return <>
<Header />
<main className='flex flex-col items-center gap-4 mt-16 mb-12 bg-teal-100'>
Expand Down
190 changes: 132 additions & 58 deletions staff/tatiana-garcia/project/app/view/pettsiters/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,143 @@
import { useNavigate } from 'react-router-dom'
import { useEffect, useState } from 'react'
import useContext from '../context.js'
import logic from '../../logic/index.js'

import Header from '../home/Header'
import Container from '../library/Container'
import Footer from '../home/Footer'
import Header from '../home/Header.jsx'
import Heading from '../library/Heading.jsx'
import Paragraph from '../library/Paragraph.jsx'
import Container from '../library/Container.jsx'
import Footer from '../home/Footer.jsx'

export default function Petsitters() {
export default function SearchPetsitters() {
const { alert } = useContext()
const [city, setCity] = useState('')
const [pet, setPet] = useState('')
const [petsitters, setPetsitters] = useState([])

useEffect(() => {
if (city) {
try {
logic.searchPetsitters(city, pet)
.then(petsitters => setPetsitters(petsitters))
.catch(error => {
console.error(error)

alert(error.message)
})
} catch (error) {
console.error(error)

alert(error.message)
}
} else if (pet != '') {
alert("Selecciona una ciudad para poder filtrar por mascota")
} else {
loadPetsitters()
}
}, [city, pet])

const loadPetsitters = () => {
try {
logic.getAllPetsitters()
.then(petsitters => setPetsitters(petsitters))
.catch(error => {
console.error(error)

alert(error.message)
})
} catch (error) {
console.error(error)

alert(error.message)
}
}

return <>
<Header />
<main className='bg-teal-100 h-screen flex flex-col items-center justify-start gap-4 text-[1.1rem]'>
<Container className='mt-20'>
<select name='city' id='city-input'>
<option value=''>Seleccione una ciudad</option>
<option value='madrid'>Madrid</option>
<option value='barcelona'>Barcelona</option>
<option value='valencia'>Valencia</option>
<option value='sevilla'>Sevilla</option>
<option value='zaragoza'>Zaragoza</option>
<option value='malaga'>Málaga</option>
<option value='murcia'>Murcia</option>
<option value='palma'>Palma</option>
<option value='las_palmas'>Las Palmas de Gran Canaria</option>
<option value='bilbao'>Bilbao</option>
<option value='alicante'>Alicante</option>
<option value='cordoba'>Córdoba</option>
<option value='valladolid'>Valladolid</option>
<option value='vigo'>Vigo</option>
<option value='gijon'>Gijón</option>
<option value='l_hospitalet'>L'Hospitalet de Llobregat</option>
<option value='vitoria'>Vitoria-Gasteiz</option>
<option value='la_coruna'>La Coruña</option>
<option value='granada'>Granada</option>
<option value='elche'>Elche</option>
<option value='oviedo'>Oviedo</option>
<option value='badalona'>Badalona</option>
<option value='sabadell'>Sabadell</option>
<option value='cartagena'>Cartagena</option>
<option value='terrassa'>Terrassa</option>
<option value='jerez'>Jerez de la Frontera</option>
<option value='santander'>Santander</option>
<option value='almeria'>Almería</option>
<option value='burgos'>Burgos</option>
<option value='albacete'>Albacete</option>
<option value='san_sebastian'>San Sebastián</option>
<option value='salamanca'>Salamanca</option>
<option value='logrono'>Logroño</option>
<option value='lleida'>Lleida</option>
<option value='marbella'>Marbella</option>
<option value='cadiz'>Cádiz</option>
<option value='huelva'>Huelva</option>
<option value='tarragona'>Tarragona</option>
<option value='leon'>León</option>
<option value='jaen'>Jaén</option>
<option value='ourense'>Ourense</option>
<option value='algeciras'>Algeciras</option>
<option value='gerona'>Gerona</option>
<option value='lugo'>Lugo</option>
</select>
</Container>


</main>
<Container className='p-6 bg-white rounded-[50px] shadow-md w-full max-w-sm'>
<Heading className='text-center mb-6 text-2xl font-bold'>Guarderías</Heading>

<Footer defaultTab={'petsitters'} />
<Container className='text-lg bg-white p-3 rounded-[50px] text-center flex-col'>
<Container className='mb-4'>
<select className='mt-1 p-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500' id='city-select' value={city} onChange={(e) => setCity(e.target.value)}>
<option value=''>Seleccione una ciudad</option>
<option value='madrid'>Madrid</option>
<option value='barcelona'>Barcelona</option>
<option value='valencia'>Valencia</option>
<option value='sevilla'>Sevilla</option>
<option value='zaragoza'>Zaragoza</option>
<option value='malaga'>Málaga</option>
<option value='murcia'>Murcia</option>
<option value='palma'>Palma</option>
<option value='las_palmas'>Las Palmas de Gran Canaria</option>
<option value='bilbao'>Bilbao</option>
<option value='alicante'>Alicante</option>
<option value='cordoba'>Córdoba</option>
<option value='valladolid'>Valladolid</option>
<option value='vigo'>Vigo</option>
<option value='gijon'>Gijón</option>
<option value='l_hospitalet'>L'Hospitalet de Llobregat</option>
<option value='vitoria'>Vitoria-Gasteiz</option>
<option value='la_coruna'>La Coruña</option>
<option value='granada'>Granada</option>
<option value='elche'>Elche</option>
<option value='oviedo'>Oviedo</option>
<option value='badalona'>Badalona</option>
<option value='sabadell'>Sabadell</option>
<option value='cartagena'>Cartagena</option>
<option value='terrassa'>Terrassa</option>
<option value='jerez'>Jerez de la Frontera</option>
<option value='santander'>Santander</option>
<option value='almeria'>Almería</option>
<option value='burgos'>Burgos</option>
<option value='albacete'>Albacete</option>
<option value='san_sebastian'>San Sebastián</option>
<option value='salamanca'>Salamanca</option>
<option value='logrono'>Logroño</option>
<option value='lleida'>Lleida</option>
<option value='marbella'>Marbella</option>
<option value='cadiz'>Cádiz</option>
<option value='huelva'>Huelva</option>
<option value='tarragona'>Tarragona</option>
<option value='leon'>León</option>
<option value='jaen'>Jaén</option>
<option value='ourense'>Ourense</option>
<option value='algeciras'>Algeciras</option>
<option value='gerona'>Gerona</option>
<option value='lugo'>Lugo</option>
</select>
</Container>

<Container className='mb-6'>
<select className='mt-1 p-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500' id='pet-select' value={pet} onChange={(e) => setPet(e.target.value)} >
<option value=''>Seleccione un animal</option>
<option value='rabbits'>Conejos</option>
<option value='guineaPig'>Cobayas</option>
<option value='hamsters'>Hamsters</option>
<option value='rats'>Ratas</option>
<option value='birds'>Aves</option>
<option value='reptiles'>Reptiles</option>
</select>
</Container>
</Container>
<Container className='mt-6'>
{petsitters.length > 0 ? (
petsitters.map(petsitter => (
<div key={petsitter.id} className='petssitter-card p-4 mb-4 bg-white shadow rounded-md'>
<img src={petsitter.image} alt={petsitter.name} className='petsitter-image rounded-full w-16 h-16 mb-4' />
<Heading className='text-xl font-semibold'>{petsitter.name}</Heading>
<Paragraph>{petsitter.city}</Paragraph>
<Paragraph>{petsitter.description}</Paragraph>
</div>
))
) : (
<Paragraph className='text-center text-gray-500'>No hay guarderías disponible para la selección actual.</Paragraph>
)}
</Container>

<Footer defaultTab={'petsitters'} />
</Container>
</main>
</>
}

0 comments on commit faaa59d

Please sign in to comment.