Compare commits

...

3 Commits

Author SHA1 Message Date
e707852e69 Trying to add search function / useNavigate question 2023-07-13 20:57:06 +02:00
24b9860d18 Improved navlinks 2023-07-13 20:34:43 +02:00
3dfaed964f Added routing for pet species 2023-07-13 20:12:37 +02:00
6 changed files with 60 additions and 45 deletions

View File

@ -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() {

View File

@ -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>
); );

View File

@ -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;

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 = "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 (

View File

@ -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>

View File

@ -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=""
/> />
} }