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
const appRouter = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<Root />}>
<Route index element={<HomePage />} />
<Route path=":type" element={<HomePage />} />
<Route path=":type/:id" element={<PetDetailsPage />} />
</Route>
)
createRoutesFromElements(<Route path="/" element={<Root />}></Route>)
);
function App() {

View File

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

View File

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

View File

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

View File

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

View File

@ -1,14 +1,13 @@
import React, { useEffect, useState } from "react";
import { getPets } from "../../api/petfinder";
import Hero from "../../components/hero";
import { useParams } from "react-router-dom";
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 } = useParams(); // Fix me!
const type = ''; // Fix me!
useEffect(() => {
async function getPetsData() {
@ -27,7 +26,7 @@ const HomePage = () => {
<div className="page">
<Hero />
<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
</h3>
@ -44,7 +43,10 @@ const HomePage = () => {
{
<img
className="pet-image"
src={animal.photos[0]?.medium || "/missing-animal.png"}
src={
animal.photos[0]?.medium ||
'/missing-animal.png'
}
alt=""
/>
}