dino/Adopt_a_pet-Codecademy
1
0
Fork 0
Code Issues 47 Pull Requests Packages Projects Releases Wiki Activity

Fully implemented the search function

Browse Source
This commit is contained in:
Dino Tutic 2023-07-13 21:06:19 +02:00
parent e707852e69
commit 8485efc47c
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.js
View File

@ -19,6 +19,7 @@ const appRouter = createBrowserRouter(
<Route index element={<HomePage />} /> <Route index element={<HomePage />} />
<Route path=":type" element={<HomePage />} /> <Route path=":type" element={<HomePage />} />
<Route path=":type/:id" element={<PetDetailsPage />} /> <Route path=":type/:id" element={<PetDetailsPage />} />
<Route path="search" element={<SearchPage />} />
</Route> </Route>
) )
); );

16
src/pages/search/index.js
View File

@ -1,20 +1,20 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react";
import Hero from '../../components/hero'; import Hero from "../../components/hero";
import { getPets } from '../../api/petfinder'; import { getPets } from "../../api/petfinder";
import Pet from '../../components/pet'; import Pet from "../../components/pet";
import { useSearchParams } from "react-router-dom";
// Import useSearchParams // Import useSearchParams
const SearchPage = () => { const SearchPage = () => {
// Get searchParams object from useSearchParams // Get searchParams object from useSearchParams
const [searchParams] = useSearchParams();
const petNameToFind = 'REPLACE ME'; // Get query parameter using searchParams object const petNameToFind = searchParams.get("name"); // Get query parameter using searchParams object
const [pets, setPets] = useState([]); const [pets, setPets] = useState([]);
useEffect(() => { useEffect(() => {
async function getPetsData() { async function getPetsData() {
const petsData = await getPets('', petNameToFind); const petsData = await getPets("", petNameToFind);
setPets(petsData); setPets(petsData);
} }