From 3dfaed964f1f87ae83b7521c2a20dfb755a132e9 Mon Sep 17 00:00:00 2001
From: Dino Tutic <dino.tutic96@gmail.com>
Date: Thu, 13 Jul 2023 20:12:37 +0200
Subject: [PATCH] Added routing for pet species

---
 src/App.js                   |  7 ++++++-
 src/components/root/index.js | 19 ++++++++++---------
 src/pages/home/index.js      | 16 +++++++---------
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/App.js b/src/App.js
index f02d895..c20428f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,7 +14,12 @@ 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>
+  )
 );
 
 function App() {
diff --git a/src/components/root/index.js b/src/components/root/index.js
index 4c207a1..ce7db8e 100644
--- a/src/components/root/index.js
+++ b/src/components/root/index.js
@@ -1,14 +1,15 @@
-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*/}
-        </>
-    );
+  return (
+    <>
+      <Navigation />
+      <Outlet />
+    </>
+  );
 };
 
-export default Root;
\ No newline at end of file
+export default Root;
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
index f62e03f..fb69130 100644
--- a/src/pages/home/index.js
+++ b/src/pages/home/index.js
@@ -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=""
                     />
                   }