Compare commits

..

No commits in common. "e707852e691e7fb0abf8bc8c70981979b48520f8" and "60d6d23fe4e83cc7f313e24a7d536a991e06ddee" have entirely different histories.

6 changed files with 45 additions and 60 deletions

View File

@ -14,13 +14,7 @@ import {
// create router with JSX Route elements // create router with JSX Route elements
const appRouter = createBrowserRouter( const appRouter = createBrowserRouter(
createRoutesFromElements( createRoutesFromElements(<Route path="/" element={<Root />}></Route>)
<Route path="/" element={<Root />}>
<Route index element={<HomePage />} />
<Route path=":type" element={<HomePage />} />
<Route path=":type/:id" element={<PetDetailsPage />} />
</Route>
)
); );
function App() { function App() {

View File

@ -1,8 +1,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { getPetTypes } from "../../api/petfinder"; import { getPetTypes } from '../../api/petfinder';
import Logo from "../../assets/logo.svg"; import Logo from '../../assets/logo.svg';
import Search from "../search"; import Search from '../search';
import { NavLink } from "react-router-dom";
// Import NavLink // Import NavLink
@ -25,33 +24,26 @@ const Navigation = () => {
<Search /> <Search />
</div> </div>
<ul className="nav-links"> <ul className="nav-links">
<li key={"all"}> <li key={'all'}>
{/* These links should be NavLink component and add a special active class name if its an active link */} {/* These links should be NavLink component and add a special active class name if its an active link */}
<NavLink <a href="/"
to="/" className='nav-link'
className={({ isActive }) =>
`nav-link ${isActive ? "nav-link-active" : ""}`
}
> >
All Pets All Pets
</NavLink> </a>
</li> </li>
{petTypes {petTypes
? petTypes.map((type) => ( ? petTypes.map((type) => (
<li key={type.name}> <li key={type.name}>
{/* These links should be NavLink component and add a special active class name if its an active link */} {/* These links should be NavLink component and add a special active class name if its an active link */}
<NavLink <a href={`/${type._links.self.href.split('/').pop()}`}
to={`/${type._links.self.href.split("/").pop()}`}
key={type.name} key={type.name}
className={({ isActive }) => className='nav-link' >
`nav-link ${isActive ? "nav-link-active" : ""}`
}
>
{type.name}s {type.name}s
</NavLink>{" "} </a>{' '}
</li> </li>
)) ))
: "Loading..."} : 'Loading...'}
</ul> </ul>
</nav> </nav>
); );

View File

@ -1,15 +1,14 @@
import React from "react"; import React from 'react';
import Navigation from "../navigation"; import Navigation from '../navigation';
import { Outlet } from "react-router-dom";
// import Outlet // import Outlet
const Root = () => { const Root = () => {
return ( return (
<> <>
<Navigation /> <Navigation/>
<Outlet /> {/* Add an Outlet*/}
</> </>
); );
}; };
export default Root; export default Root;

View File

@ -1,11 +1,11 @@
import React, { useRef } from "react"; import React, { useRef } from 'react';
import { createSearchParams, useNavigate } from "react-router-dom";
// Import createSearchParams // Import createSearchParams
// Import useNavigate // Import useNavigate
const Search = () => { const Search = () => {
// get navigate function // get navigate function
const navigate = useNavigate(); const navigate = "REPLACE ME";
const searchInputRef = useRef(); const searchInputRef = useRef();
@ -13,14 +13,13 @@ const Search = () => {
e.preventDefault(); e.preventDefault();
const searchQuery = { const searchQuery = {
name: searchInputRef.current.value, name: searchInputRef.current.value
}; }
// use createSearchParams // use createSearchParams
const query = createSearchParams(searchQuery); const query = "REPLACE ME";
// imperatively redirect with useNavigate() returned function // imperatively redirect with useNavigate() returned function
navigate({ pathname: "/search", search: `${query}` });
}; };
return ( return (

View File

@ -1,7 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { getPetDetails } from "../../api/petfinder"; import { getPetDetails } from '../../api/petfinder';
import Hero from "../../components/hero"; import Hero from '../../components/hero';
import { useParams } from "react-router-dom";
// Import useParams // Import useParams
// Import Navigate // Import Navigate
@ -10,7 +9,7 @@ const PetDetailsPage = () => {
const [data, setData] = useState(); const [data, setData] = useState();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(false); const [error, setError] = useState(false);
const { id } = useParams(); // <--- Update me! const id = '51322435'; // <--- Update me!
useEffect(() => { useEffect(() => {
async function getPetsData() { async function getPetsData() {
@ -38,7 +37,7 @@ const PetDetailsPage = () => {
) : ( ) : (
<main> <main>
<Hero <Hero
image={data.photos[1]?.full || "https://i.imgur.com/aEcJUFK.png"} image={data.photos[1]?.full || 'https://i.imgur.com/aEcJUFK.png'}
displayText={`Meet ${data.name}`} displayText={`Meet ${data.name}`}
/> />
<div className="pet-detail"> <div className="pet-detail">
@ -46,7 +45,7 @@ const PetDetailsPage = () => {
<img <img
className="pet-image" className="pet-image"
src={ src={
data.photos[0]?.medium || "https://i.imgur.com/aEcJUFK.png" data.photos[0]?.medium || 'https://i.imgur.com/aEcJUFK.png'
} }
alt="" alt=""
/> />
@ -54,7 +53,7 @@ const PetDetailsPage = () => {
<div> <div>
<h1>{data.name}</h1> <h1>{data.name}</h1>
<h3>Breed: {data.breeds.primary}</h3> <h3>Breed: {data.breeds.primary}</h3>
<p>Color: {data.colors.primary || "Unknown"}</p> <p>Color: {data.colors.primary || 'Unknown'}</p>
<p>Gender: {data.gender}</p> <p>Gender: {data.gender}</p>
<h3>Description</h3> <h3>Description</h3>
<p>{data.description}</p> <p>{data.description}</p>

View File

@ -1,14 +1,13 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { getPets } from "../../api/petfinder"; import { getPets } from '../../api/petfinder';
import Hero from "../../components/hero"; import Hero from '../../components/hero';
import { useParams } from "react-router-dom";
// import useParams // import useParams
// import Link // import Link
const HomePage = () => { const HomePage = () => {
const [data, setData] = useState(null); const [data, setData] = useState(null);
const { type } = useParams(); // Fix me! const type = ''; // Fix me!
useEffect(() => { useEffect(() => {
async function getPetsData() { async function getPetsData() {
@ -27,7 +26,7 @@ const HomePage = () => {
<div className="page"> <div className="page">
<Hero /> <Hero />
<h3> <h3>
<span className="pet-type-label">{type ? `${type}s` : "Pets"}</span>{" "} <span className="pet-type-label">{type ? `${type}s` : 'Pets'}</span>{' '}
available for adoption near you available for adoption near you
</h3> </h3>
@ -44,7 +43,10 @@ const HomePage = () => {
{ {
<img <img
className="pet-image" className="pet-image"
src={animal.photos[0]?.medium || "/missing-animal.png"} src={
animal.photos[0]?.medium ||
'/missing-animal.png'
}
alt="" alt=""
/> />
} }