70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { getPets } from '../../api/petfinder';
|
|
import Hero from '../../components/hero';
|
|
|
|
// import useParams
|
|
// import Link
|
|
|
|
const HomePage = () => {
|
|
const [data, setData] = useState(null);
|
|
const type = ''; // Fix me!
|
|
|
|
useEffect(() => {
|
|
async function getPetsData() {
|
|
const petsData = await getPets(type);
|
|
setData(petsData);
|
|
}
|
|
|
|
getPetsData();
|
|
}, [type]);
|
|
|
|
if (!data) {
|
|
return <h2>Loading...</h2>;
|
|
}
|
|
|
|
return (
|
|
<div className="page">
|
|
<Hero />
|
|
<h3>
|
|
<span className="pet-type-label">{type ? `${type}s` : 'Pets'}</span>{' '}
|
|
available for adoption near you
|
|
</h3>
|
|
|
|
{data.length ? (
|
|
<div className="grid">
|
|
{data.map((animal) => (
|
|
<a // Change me to a Link!
|
|
key={animal.id}
|
|
href={`/${animal.type.toLowerCase()}/${animal.id}`}
|
|
className="pet"
|
|
>
|
|
<article>
|
|
<div className="pet-image-container">
|
|
{
|
|
<img
|
|
className="pet-image"
|
|
src={
|
|
animal.photos[0]?.medium ||
|
|
'/missing-animal.png'
|
|
}
|
|
alt=""
|
|
/>
|
|
}
|
|
</div>
|
|
<h3>{animal.name}</h3>
|
|
<p>Breed: {animal.breeds.primary}</p>
|
|
<p>Color: {animal.colors.primary}</p>
|
|
<p>Gender: {animal.gender}</p>
|
|
</article>
|
|
</a> // Don't forget to change me!
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="prompt">No {type}s available for adoption now.</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HomePage;
|