From 40170f19ce18e5a777149c56c8425491ba99e170 Mon Sep 17 00:00:00 2001
From: veerjot_dm <veerjot.heer@digimantra.com>
Date: Thu, 2 Jan 2025 18:27:10 +0530
Subject: [PATCH] update review changes

---
 src/App.js                      | 4 +++-
 src/components/BreedInfoPage.js | 8 ++++----
 src/components/Favorites.js     | 4 ++--
 src/components/Filters.js       | 6 +++---
 src/components/Gallery.js       | 8 ++++----
 src/env.js                      | 2 ++
 6 files changed, 18 insertions(+), 14 deletions(-)
 create mode 100644 src/env.js

diff --git a/src/App.js b/src/App.js
index 9a1e922..677a251 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,9 +4,11 @@ import Filters from "./components/Filters";
 import Gallery from "./components/Gallery";
 import Favorites from "./components/Favorites";
 import BreedInfoPage from "./components/BreedInfoPage";
+
 import "./App.css";
 import { debounce } from "lodash";
-const apikey ="live_8bnMZatSzkOR7eyT6o0iwDmXQuTxPI3deVWy0KY2ABxDkTMJdTYZ13S9lVFmrZRO"
+import { apikey } from "./env";
+
 const App = () => {
   const [cats, setCats] = useState([]);
   const [loading, setLoading] = useState(true);
diff --git a/src/components/BreedInfoPage.js b/src/components/BreedInfoPage.js
index 2f3fef4..70a163d 100644
--- a/src/components/BreedInfoPage.js
+++ b/src/components/BreedInfoPage.js
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 
-const API_URL = "https://api.thecatapi.com/v1";
-const API_KEY = "live_8bnMZatSzkOR7eyT6o0iwDmXQuTxPI3deVWy0KY2ABxDkTMJdTYZ13S9lVFmrZRO"; 
+import { API_URL, apikey } from "../env";
+//const API_URL = "https://api.thecatapi.com/v1";
 
 const BreedInfoPage = () => {
   const { id } = useParams();
@@ -19,7 +19,7 @@ const BreedInfoPage = () => {
 
       
         const breedResponse = await fetch(`${API_URL}/breeds/${id}`, {
-          headers: { "x-api-key": API_KEY },
+          headers: { "x-api-key": apikey },
         });
 
         if (!breedResponse.ok) throw new Error("Failed to fetch breed information.");
@@ -28,7 +28,7 @@ const BreedInfoPage = () => {
 
        
         const imageResponse = await fetch(`${API_URL}/images/search?breed_ids=${id}&limit=1`, {
-          headers: { "x-api-key": API_KEY },
+          headers: { "x-api-key": apikey },
         });
 
         if (!imageResponse.ok) throw new Error("Failed to fetch breed image.");
diff --git a/src/components/Favorites.js b/src/components/Favorites.js
index 076ea47..1a58004 100644
--- a/src/components/Favorites.js
+++ b/src/components/Favorites.js
@@ -6,8 +6,8 @@ const Favorites = ({ favorites, onRemoveFavorite }) => {
       <h2 className="fav-heading">Favorites Gallery</h2>
       <div className="favorites">
         {favorites.map((cat) => (
-          <div key={cat.id} className="cat-item">
-            <img src={cat.url} alt="Favorite Cat" />
+          <div key={cat?.id} className="cat-item">
+            <img src={cat?.url} alt="Favorite Cat" />
             <button className="fav-button" onClick={() => onRemoveFavorite(cat.id)}>Remove</button>
           </div>
         ))}
diff --git a/src/components/Filters.js b/src/components/Filters.js
index 9ecec37..35bc14e 100644
--- a/src/components/Filters.js
+++ b/src/components/Filters.js
@@ -8,14 +8,14 @@ const Filters = ({ filters, onFilterChange}) => {
         type="text"
         name="breed"
         placeholder="Search by breed name"
-        value={filters.breed}
+        value={filters?.breed}
         onChange={onFilterChange}
       />
 
 
       <select
         name="hairLength"
-        value={filters.hairLength}
+        value={filters?.hairLength}
         onChange={onFilterChange}
       >
         <option value="">All Hair Lengths</option>
@@ -27,7 +27,7 @@ const Filters = ({ filters, onFilterChange}) => {
   
       <select
         name="origin"
-        value={filters.origin}
+        value={filters?.origin}
         onChange={onFilterChange}
       >
         <option value="">All Origins</option>
diff --git a/src/components/Gallery.js b/src/components/Gallery.js
index 3e133f7..c9e34b8 100644
--- a/src/components/Gallery.js
+++ b/src/components/Gallery.js
@@ -13,8 +13,8 @@ const Gallery = ({ cats, loading, onLoadMore, onAddFavorite }) => {
     };
     const handleCatClick =(cat)=>{
         console.log('id',cat)
-        if (cat.breeds && cat.breeds[0] && cat.breeds[0].id) {
-            navigate(`/breed/${cat.breeds[0].id}`);
+        if (cat?.breeds && cat?.breeds[0] && cat?.breeds[0].id) {
+            navigate(`/breed/${cat?.breeds[0].id}`);
           } else {
             console.error("No breed ID found for this cat.");
           }
@@ -24,8 +24,8 @@ const Gallery = ({ cats, loading, onLoadMore, onAddFavorite }) => {
       <Masonry className="masonry-grid" breakpointCols={breakpointColumnsObj} columnClassName="masonry-grid-column">
         {cats.map((cat,index) => (
           
-          <div key={`${cat.id}-${index}`}  className="cat-item" loading="lazy" onClick={() => handleCatClick(cat)}>
-            <img src={cat.url} alt={cat.breeds?.[0]?.name || "A cute cat"} />
+          <div key={`${cat?.id}-${index}`}  className="cat-item" loading="lazy" onClick={() => handleCatClick(cat)}>
+            <img src={cat?.url} alt={cat.breeds?.[0]?.name || "A cute cat"} />
             <button className="like-button" onClick={(e) => {
               e.stopPropagation();
               onAddFavorite(cat);
diff --git a/src/env.js b/src/env.js
new file mode 100644
index 0000000..4145c0c
--- /dev/null
+++ b/src/env.js
@@ -0,0 +1,2 @@
+export const apikey ="live_8bnMZatSzkOR7eyT6o0iwDmXQuTxPI3deVWy0KY2ABxDkTMJdTYZ13S9lVFmrZRO";
+export const API_URL = "https://api.thecatapi.com/v1";
\ No newline at end of file