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

View File

@ -1,7 +1,8 @@
import React, { useEffect, useState } from 'react';
import { getPetTypes } from '../../api/petfinder';
import Logo from '../../assets/logo.svg';
import Search from '../search';
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 NavLink
@ -24,26 +25,33 @@ 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 */}
<a href="/"
className='nav-link'
<NavLink
to="/"
className={({ isActive }) =>
`nav-link ${isActive ? "nav-link-active" : ""}`
}
>
All Pets
</a>
</NavLink>
</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 */}
<a href={`/${type._links.self.href.split('/').pop()}`}
<NavLink
to={`/${type._links.self.href.split("/").pop()}`}
key={type.name}
className='nav-link' >
className={({ isActive }) =>
`nav-link ${isActive ? "nav-link-active" : ""}`
}
>
{type.name}s
</a>{' '}
</NavLink>{" "}
</li>
))
: 'Loading...'}
: "Loading..."}
</ul>
</nav>
);

View File

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

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 useNavigate
const Search = () => {
// get navigate function
const navigate = "REPLACE ME";
const navigate = useNavigate();
const searchInputRef = useRef();
@ -13,13 +13,14 @@ const Search = () => {
e.preventDefault();
const searchQuery = {
name: searchInputRef.current.value
}
name: searchInputRef.current.value,
};
// use createSearchParams
const query = "REPLACE ME";
const query = createSearchParams(searchQuery);
// imperatively redirect with useNavigate() returned function
navigate({ pathname: "/search", search: `${query}` });
};
return (

View File

@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import { getPetDetails } from '../../api/petfinder';
import Hero from '../../components/hero';
import React, { useEffect, useState } from "react";
import { getPetDetails } from "../../api/petfinder";
import Hero from "../../components/hero";
import { useParams } from "react-router-dom";
// Import useParams
// Import Navigate
@ -9,7 +10,7 @@ const PetDetailsPage = () => {
const [data, setData] = useState();
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const id = '51322435'; // <--- Update me!
const { id } = useParams(); // <--- Update me!
useEffect(() => {
async function getPetsData() {
@ -37,7 +38,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">
@ -45,7 +46,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=""
/>
@ -53,7 +54,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,13 +1,14 @@
import React, { useEffect, useState } from 'react';
import { getPets } from '../../api/petfinder';
import Hero from '../../components/hero';
import React, { useEffect, useState } from "react";
import { getPets } from "../../api/petfinder";
import Hero from "../../components/hero";
import { useParams } from "react-router-dom";
// import useParams
// import Link
const HomePage = () => {
const [data, setData] = useState(null);
const type = ''; // Fix me!
const { type } = useParams(); // Fix me!
useEffect(() => {
async function getPetsData() {
@ -26,7 +27,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>
@ -43,10 +44,7 @@ const HomePage = () => {
{
<img
className="pet-image"
src={
animal.photos[0]?.medium ||
'/missing-animal.png'
}
src={animal.photos[0]?.medium || "/missing-animal.png"}
alt=""
/>
}