Skip to content

Commit 48897dd

Browse files
AlexanderNeo427AlexanderNeo427
committed
More WIP for the "Pet Detail" page
1 parent a6a4fe7 commit 48897dd

File tree

3 files changed

+76
-28
lines changed

3 files changed

+76
-28
lines changed

‎package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/pages/AdoptionGalleryPage.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ const AdoptionGalleryPage: React.FC = () => {
2525
headers: { 'x-api-key': import.meta.env.VITE_DOG_API_KEY }
2626
})
2727

28-
console.log([...catApiRes.data, ...dogApiRes.data])
28+
// DEBUG
29+
// console.log([...catApiRes.data, ...dogApiRes.data])
2930

3031
const allPetData = [
3132
...catApiRes.data

‎src/pages/PetDetailPage.tsx

Lines changed: 71 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import axios from 'axios'
88
const PetDetailPage: React.FC = () => {
99
const [m_petApiData, setPetApiData] = useState<PetApiData>()
1010
const m_searchParams = useSearchParams()[0]
11-
11+
1212
useEffect(() => {
1313
const pet_type = m_searchParams.get('pet_type')
1414
const pet_id = m_searchParams.get('pet_id')
@@ -18,39 +18,39 @@ const PetDetailPage: React.FC = () => {
1818
// console.log("PetDetailPage - Pet ID: ", pet_id)
1919
// console.log("PetDetailPage - Breed ID: ", breed_id)
2020

21-
const imgEndpointURL = pet_type === "dog" ?
21+
const imgEndpointURL = pet_type === "dog" ?
2222
`https://api.thedogapi.com/v1/images/${pet_id}` :
23-
`https://api.thecatapi.com/v1/images/${pet_id}`
24-
25-
const breedEndpointURL = pet_type === 'dog' ?
23+
`https://api.thecatapi.com/v1/images/${pet_id}`
24+
25+
const breedEndpointURL = pet_type === 'dog' ?
2626
`https://api.thedogapi.com/v1/breeds/${breed_id}` :
2727
`https://api.thecatapi.com/v1/breeds/${breed_id}`
2828

29-
const fetchPetApiData = async(): Promise<void> => {
29+
const fetchPetApiData = async (): Promise<void> => {
3030
try {
3131
const imgRes = await axios.get(imgEndpointURL, {
3232
headers: {
3333
'x-api-key': pet_type === 'dog' ?
34-
import.meta.env.VITE_DOG_API_KEY :
35-
import.meta.env.VITE_CAT_API_KEY
34+
import.meta.env.VITE_DOG_API_KEY :
35+
import.meta.env.VITE_CAT_API_KEY
3636
}
3737
})
3838
const breedRes = await axios.get(breedEndpointURL, {
3939
headers: {
4040
'x-api-key': pet_type === 'dog' ?
41-
import.meta.env.VITE_DOG_API_KEY :
42-
import.meta.env.VITE_CAT_API_KEY
41+
import.meta.env.VITE_DOG_API_KEY :
42+
import.meta.env.VITE_CAT_API_KEY
4343
}
4444
})
4545

4646
const imgData = imgRes.data
4747
const breedData = breedRes.data
4848
const petApiData = new PetApiData(
4949
imgData.id, imgData.url, breedData,
50-
imgData.height, imgData.width,
50+
imgData.height, imgData.width,
5151
pet_type === "dog" ? PET_API_TYPE.DOG : PET_API_TYPE.CAT
5252
)
53-
setPetApiData(petApiData)
53+
setPetApiData(petApiData)
5454
}
5555
catch (err: any) {
5656
console.log("Error fetching from Pet API: ", err.message)
@@ -59,14 +59,41 @@ const PetDetailPage: React.FC = () => {
5959
fetchPetApiData()
6060
}, [])
6161

62+
interface IconInfoPair {
63+
imgURL: string
64+
info: string
65+
}
66+
67+
const getAdditionalInfo = (petApiData: PetApiData): IconInfoPair[] => {
68+
switch (petApiData.apiType) {
69+
case PET_API_TYPE.DOG:
70+
const dogBreedData = petApiData.breedData as DogBreedData
71+
return [
72+
{ imgURL: "", info: dogBreedData.lifespan },
73+
{ imgURL: "", info: dogBreedData.height },
74+
{ imgURL: "", info: dogBreedData.temperaments.toString() },
75+
{ imgURL: "", info: dogBreedData.weight },
76+
]
77+
case PET_API_TYPE.CAT:
78+
const catBreedData = petApiData.breedData as CatBreedData
79+
return [
80+
{ imgURL: "", info: catBreedData.lifespan },
81+
{ imgURL: "", info: catBreedData.temperaments.toString() },
82+
{ imgURL: "", info: catBreedData.weight }
83+
]
84+
default:
85+
return []
86+
}
87+
}
88+
6289
useEffect(() => {
6390
console.log("Pet api data change: ", m_petApiData)
6491
}, [m_petApiData])
6592

6693
return (
6794
<main>
68-
<Navbar useSticky/>{
69-
m_petApiData &&
95+
<Navbar useSticky />{
96+
m_petApiData &&
7097
<section className='min-h-[30rem] text-center flex flex-col justify-start items-center'>
7198

7299
{/* ---- BANNER IMAGE ---- */}
@@ -77,25 +104,45 @@ const PetDetailPage: React.FC = () => {
77104
{/* --- --- */}
78105
<div className='max-w-4xl flex flex-col md:flex-row mb-margin-xl mx-margin-s'>
79106

80-
<div className='text-center flex-col mb-margin-xl mr-margin-xl'>
81-
<div className='flex items-start justify-between mb-margin-s'>
107+
{/* --- DESCRIPTION CONTAINER --- */}
108+
<div className='text-center flex-col items-start min-w-96 mb-margin-xl mr-margin-xl'>
109+
110+
{/* ---- DESC HEADER ---- */}
111+
<div className='flex items-end justify-between mb-margin-m'>
82112
<h1 className='font-bold text-3xl'>{m_petApiData.breedData?.breed.toUpperCase()}</h1>
83113
<button className='font-semibold rounded-lg outline outline-2 outline-primary-400 px-5 py-3'>Favourite</button>
84114
</div>
115+
116+
{/* ---- DESCRIPTION ---- */}
85117
<p className='text-left'>{
86-
m_petApiData.apiType === PET_API_TYPE.DOG ?
87-
`${m_petApiData.breedData?.breed}'s are bred for ${(m_petApiData.breedData as DogBreedData).bredFor}`:
88-
`${(m_petApiData.breedData as CatBreedData).description}`
118+
m_petApiData.apiType === PET_API_TYPE.DOG ?
119+
`${m_petApiData.breedData?.breed}'s are bred for ${(m_petApiData.breedData as DogBreedData).bredFor}` :
120+
`${(m_petApiData.breedData as CatBreedData).description}`
89121
}</p>
122+
123+
{/* ---- ADDITIONAL INFO ----- */}
124+
<div className=''>{
125+
getAdditionalInfo(m_petApiData).map(iconInfoPair => {
126+
return (
127+
<div className='flex justify-start items-center'>
128+
{/* <img src={iconInfoPair.imgURL} alt="" /> */}
129+
<span>*</span>
130+
<span className='text-left'>{iconInfoPair.info}</span>
131+
</div>
132+
)
133+
})
134+
}</div>
90135
</div>
136+
137+
{/* ----- ADOPTION FEE BOX ----- */}
91138
<div className='
92-
flex flex-col justify-center items-center rounded-xl
93-
w-full max-w-72 text-center text-text-50 bg-white
139+
flex flex-col justify-center items-center rounded-xl shadow-xl
140+
w-full max-w-96 text-center text-text-50 bg-white px-4 py-6
94141
'>
95-
<span className='text-lg font-medium mb-margin-xxs'>Adoption Fee</span>
96-
<span className='text-xl font-semibold mb-margin-l'>$150.0</span>
142+
<span className='text-xl font-medium mb-margin-xxs'>Adoption Fee</span>
143+
<span className='text-lg font-semibold mb-margin-l'>$150.0</span>
97144
<button className='
98-
text-text-950 bg-primary-500 hover:bg-primary-600 px-6 py-2 rounded-lg
145+
text-text-950 bg-primary-500 hover:bg-primary-600 px-6 py-3 rounded-xl
99146
'>Adopt Me</button>
100147
</div>
101148
</div>

0 commit comments

Comments
 (0)