improve animal page

Author: giovanniRodighiero

src/features/Animal/Animal.ts

@@ -68,3 +68,10 @@ export function getAnimalsByCategory(categoryName: string): Animal[] {
     (animal) => animal.category.toLowerCase() === categoryName.toLowerCase()
   );
 }
+
+// Function to get an animal by its slug
+export function getAnimalBySlug(slug: string): Animal | null {
+  const animals = getAllAnimals();
+
+  return animals.find((animal) => animal.slug === slug) || null;
+}

src/features/AnimalCategory/AnimalCategory.ts

@@ -40,3 +40,9 @@ export function getCategoryBySlug(slug: string): AnimalCategory | null {
 
   return categories.find((category) => category.slug === slug) || null;
 }
+
+export function getCategoryByName(name: string): AnimalCategory | null {
+  const categories = getAllCategories();
+
+  return categories.find((category) => category.name === name) || null;
+}

src/pages/animalDetailsPage/AnimalDetailsPage.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { useParams, Link } from "react-router-dom";
 import { ArrowLeft, MapPin, Ruler, Utensils, Shield, Info } from "lucide-react";
-import { getAnimalById, categories } from "../../data/animals";
+
+import { getAnimalBySlug } from "~features/Animal/Animal";
+import { getCategoryByName } from "~features/AnimalCategory/AnimalCategory";
 
 export default function AnimalDetailPage() {
   const { animalId } = useParams<{ animalId: string }>();
@@ -10,13 +12,13 @@ export default function AnimalDetailPage() {
     return <div>Animal not found</div>;
   }
 
-  const animal = getAnimalById(animalId);
+  const animal = getAnimalBySlug(animalId);
 
   if (!animal) {
     return <div>Animal not found</div>;
   }
 
-  const category = categories.find((cat) => cat.id === animal.category);
+  const category = getCategoryByName(animal.category);
 
   const getStatusColor = (status: string) => {
     switch (status.toLowerCase()) {
@@ -35,6 +37,7 @@ export default function AnimalDetailPage() {
     }
   };
 
+  console.log(animal, category);
   return (
     <div className="min-h-screen bg-gray-50">
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -45,7 +48,7 @@ export default function AnimalDetailPage() {
           </Link>
           <span className="text-gray-400">/</span>
           <Link
-            to={`/category/${animal.category}`}
+            to={`/category/${category?.slug}`}
             className="text-teal-600 hover:text-teal-700"
           >
             {category?.name}