Compare commits
3 Commits
60d6d23fe4
...
e707852e69
Author | SHA1 | Date | |
---|---|---|---|
e707852e69 | |||
24b9860d18 | |||
3dfaed964f |
@ -14,7 +14,13 @@ import {
|
|||||||
|
|
||||||
// create router with JSX Route elements
|
// create router with JSX Route elements
|
||||||
const appRouter = createBrowserRouter(
|
const appRouter = createBrowserRouter(
|
||||||
createRoutesFromElements(<Route path="/" element={<Root />}></Route>)
|
createRoutesFromElements(
|
||||||
|
<Route path="/" element={<Root />}>
|
||||||
|
<Route index element={<HomePage />} />
|
||||||
|
<Route path=":type" element={<HomePage />} />
|
||||||
|
<Route path=":type/:id" element={<PetDetailsPage />} />
|
||||||
|
</Route>
|
||||||
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
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
|
||||||
|
|
||||||
@ -24,26 +25,33 @@ 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 */}
|
||||||
<a href="/"
|
<NavLink
|
||||||
className='nav-link'
|
to="/"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`nav-link ${isActive ? "nav-link-active" : ""}`
|
||||||
|
}
|
||||||
>
|
>
|
||||||
All Pets
|
All Pets
|
||||||
</a>
|
</NavLink>
|
||||||
</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 */}
|
||||||
<a href={`/${type._links.self.href.split('/').pop()}`}
|
<NavLink
|
||||||
|
to={`/${type._links.self.href.split("/").pop()}`}
|
||||||
key={type.name}
|
key={type.name}
|
||||||
className='nav-link' >
|
className={({ isActive }) =>
|
||||||
|
`nav-link ${isActive ? "nav-link-active" : ""}`
|
||||||
|
}
|
||||||
|
>
|
||||||
{type.name}s
|
{type.name}s
|
||||||
</a>{' '}
|
</NavLink>{" "}
|
||||||
</li>
|
</li>
|
||||||
))
|
))
|
||||||
: 'Loading...'}
|
: "Loading..."}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
|
@ -1,14 +1,15 @@
|
|||||||
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 />
|
||||||
{/* Add an Outlet*/}
|
<Outlet />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Root;
|
export default Root;
|
||||||
|
@ -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 = "REPLACE ME";
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const searchInputRef = useRef();
|
const searchInputRef = useRef();
|
||||||
|
|
||||||
@ -13,13 +13,14 @@ const Search = () => {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const searchQuery = {
|
const searchQuery = {
|
||||||
name: searchInputRef.current.value
|
name: searchInputRef.current.value,
|
||||||
}
|
};
|
||||||
|
|
||||||
// use createSearchParams
|
// use createSearchParams
|
||||||
const query = "REPLACE ME";
|
const query = createSearchParams(searchQuery);
|
||||||
|
|
||||||
// imperatively redirect with useNavigate() returned function
|
// imperatively redirect with useNavigate() returned function
|
||||||
|
navigate({ pathname: "/search", search: `${query}` });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
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
|
||||||
@ -9,7 +10,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 = '51322435'; // <--- Update me!
|
const { id } = useParams(); // <--- Update me!
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function getPetsData() {
|
async function getPetsData() {
|
||||||
@ -37,7 +38,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">
|
||||||
@ -45,7 +46,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=""
|
||||||
/>
|
/>
|
||||||
@ -53,7 +54,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>
|
||||||
|
@ -1,13 +1,14 @@
|
|||||||
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 = ''; // Fix me!
|
const { type } = useParams(); // Fix me!
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function getPetsData() {
|
async function getPetsData() {
|
||||||
@ -26,7 +27,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>
|
||||||
|
|
||||||
@ -43,10 +44,7 @@ const HomePage = () => {
|
|||||||
{
|
{
|
||||||
<img
|
<img
|
||||||
className="pet-image"
|
className="pet-image"
|
||||||
src={
|
src={animal.photos[0]?.medium || "/missing-animal.png"}
|
||||||
animal.photos[0]?.medium ||
|
|
||||||
'/missing-animal.png'
|
|
||||||
}
|
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user