Skip to content

Commit 8555e5b

Browse files
AlexanderNeo427AlexanderNeo427
committed
WIP - Will have to properly include the path/query params for the "Pet Detail" page
1 parent 9e453fc commit 8555e5b

File tree

5 files changed

+49
-59
lines changed

5 files changed

+49
-59
lines changed

‎src/common/AppContext.tsx

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,25 @@
1-
import { createContext, Dispatch, ReactNode, useEffect, useState } from "react";
1+
import { createContext, Dispatch, ReactNode, useState } from "react";
22
import { PetApiData } from "../others/Globals";
33

44
// Any general information you want to be globally accessible
55
// just put it within this context
66
interface AppContextType {
7-
petApiData: PetApiData | null
8-
setAppContext: Dispatch<React.SetStateAction<AppContextType>> | null
7+
petApiData: PetApiData
8+
setPetApiData: Dispatch<React.SetStateAction<PetApiData>>
99
}
1010

1111
export const AppContext = createContext<AppContextType | null>(null)
1212

1313
const AppContextProvider: React.FC<{ children: ReactNode }> = props => {
14-
const [m_contextData, setContextData] = useState<AppContextType>({
15-
petApiData: null,
16-
setAppContext: null
17-
})
14+
const [m_petApiData, setPetApiData] = useState<PetApiData>()
1815

19-
useEffect(() => {
20-
setContextData(oldCtx => {
21-
const newCtx = { ...oldCtx }
22-
newCtx.setAppContext = setContextData
23-
return newCtx
24-
})
25-
}, [])
16+
const appContextVal = {
17+
petApiData: m_petApiData,
18+
setPetApiData: setPetApiData
19+
} as AppContextType
2620

2721
return (
28-
<AppContext.Provider value={m_contextData}>
22+
<AppContext.Provider value={appContextVal}>
2923
{props.children}
3024
</AppContext.Provider>
3125
)

‎src/components/PetInfoCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const PetInfoCard: React.FC<{ petApiData: PetApiData }> = ({ petApiData }) => {
1111
// console.log("PetINfoCard() - ID: ", petApiData.id)
1212
// console.log("PetInfoCard() - About to navigate to detail page...")
1313
const petType = petApiData.apiType === PET_API_TYPE.DOG ? "dog" : "cat"
14-
navTo(`/pet_detail/${petType}/${petApiData.id}`)
14+
// navTo(`/pet_detail/${petType} ${petApiData.id}`)
1515
}
1616

1717
return (

‎src/others/Globals.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const ROUTE_URL = {
22
HOME: "/",
33
GALLERY: "/adoption_gallery",
4-
PET_DETAIL: "/pet_detail/:pet_type/:pet_id",
4+
PET_DETAIL: "/pet_detail",
55
ABOUT: "/about",
66
CONTACT_US: "/contact_us",
77
AUTH: "/auth",

‎src/pages/AdoptionGalleryPage.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,15 @@ const AdoptionGalleryPage: React.FC = () => {
2222
)
2323
const dogApiRes = await axios.get(
2424
`https://api.thedogapi.com/v1/images/search?has_breeds=1&limit=${imageCount}`, {
25-
headers: {
26-
'x-api-key': import.meta.env.VITE_DOG_API_KEY
27-
}
25+
headers: { 'x-api-key': import.meta.env.VITE_DOG_API_KEY }
2826
})
2927

28+
console.log([...catApiRes.data, ...dogApiRes.data])
29+
3030
const allPetData = [
3131
...catApiRes.data
3232
.map((obj: any) => Utils.convertToPetApiData(obj, PET_API_TYPE.CAT))
33-
.filter((petData: PetApiData) => !petData.imgURL.endsWith('.gif'))
34-
,
33+
.filter((petData: PetApiData) => !petData.imgURL.endsWith('.gif')),
3534
...dogApiRes.data
3635
.map((obj: any) => Utils.convertToPetApiData(obj, PET_API_TYPE.DOG))
3736
.filter((petData: PetApiData) => !petData.imgURL.endsWith('.gif'))

‎src/pages/PetDetailPage.tsx

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,47 @@
11
import React, { useContext, useEffect, useState } from 'react'
22
import Navbar from '../components/Navbar'
33
import FooterSection from '../components/sections/FooterSection'
4-
import { useParams } from 'react-router-dom'
5-
import { PET_API_TYPE, PetApiData, Utils } from '../others/Globals'
6-
import axios from 'axios'
4+
import { PetApiData } from '../others/Globals'
75
import { AppContext } from '../common/AppContext'
86

97
const PetDetailPage: React.FC = () => {
10-
const { pet_type, pet_id } = useParams()
11-
const [m_petApiData, setPetApiData] = useState<PetApiData | null>(null)
8+
const appCtx = useContext(AppContext)
129

1310
useEffect(() => {
14-
console.log("Param info - pet type: ", pet_type)
15-
console.log("Param info - pet id: ", pet_id)
16-
17-
const endpointURL = pet_type === "dog" ?
18-
`https://api.thecatapi.com/v1/images/search?has_breeds=1&id=${pet_id}` :
19-
`https://api.thedogapi.com/v1/images/search?has_breeds=1&id=${pet_id}`
20-
21-
const fetchPetApiData = async(): Promise<void> => {
22-
try {
23-
const res = await axios.get(endpointURL, {
24-
headers: {
25-
'x-api-key': pet_type === 'dog' ?
26-
import.meta.env.VITE_DOG_API_KEY :
27-
import.meta.env.VITE_CAT_API_KEY
28-
}
29-
})
30-
console.log("Results from APi: ", res.data)
31-
setPetApiData(
32-
Utils.convertToPetApiData(
33-
res.data[0],
34-
pet_type === "dog" ? PET_API_TYPE.DOG : PET_API_TYPE.CAT
35-
)
36-
)
37-
}
38-
catch (err: any) {
39-
console.log("Error fetching from Pet API: ", err.message)
40-
}
41-
}
42-
fetchPetApiData()
11+
// console.log("Param info - pet type: ", pet_type)
12+
// console.log("Param info - pet id: ", pet_id)
13+
//
14+
// const endpointURL = pet_type === "dog" ?
15+
// `https://api.thecatapi.com/v1/images/search?has_breeds=1&id=${pet_id}` :
16+
// `https://api.thedogapi.com/v1/images/search?has_breeds=1&id=${pet_id}`
17+
//
18+
// const fetchPetApiData = async(): Promise<void> => {
19+
// try {
20+
// const res = await axios.get(endpointURL, {
21+
// headers: {
22+
// 'x-api-key': pet_type === 'dog' ?
23+
// import.meta.env.VITE_DOG_API_KEY :
24+
// import.meta.env.VITE_CAT_API_KEY
25+
// }
26+
// })
27+
// console.log("Results from APi: ", res.data)
28+
// setPetApiData(
29+
// Utils.convertToPetApiData(
30+
// res.data[0],
31+
// pet_type === "dog" ? PET_API_TYPE.DOG : PET_API_TYPE.CAT
32+
// )
33+
// )
34+
// }
35+
// catch (err: any) {
36+
// console.log("Error fetching from Pet API: ", err.message)
37+
// }
38+
// }
39+
// fetchPetApiData()
4340
}, [])
4441

45-
useEffect(() => {
46-
console.log("Pet api data change: ", m_petApiData)
47-
}, [m_petApiData])
42+
// useEffect(() => {
43+
// console.log("Pet api data change: ", m_petApiData)
44+
// }, [m_petApiData])
4845

4946
return (
5047
<main>

0 commit comments

Comments
 (0)