veerjot_dml/assignment4_api
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

update review changes

Browse source
This commit is contained in:
veerjot_dm 2025-01-02 18:27:10 +05:30
parent 7d83e8cab9
commit 40170f19ce
6 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.js
View file

@ -4,9 +4,11 @@ import Filters from "./components/Filters";
import Gallery from "./components/Gallery"; import Gallery from "./components/Gallery";
import Favorites from "./components/Favorites"; import Favorites from "./components/Favorites";
import BreedInfoPage from "./components/BreedInfoPage"; import BreedInfoPage from "./components/BreedInfoPage";
import "./App.css"; import "./App.css";
import { debounce } from "lodash"; import { debounce } from "lodash";
const apikey ="live_8bnMZatSzkOR7eyT6o0iwDmXQuTxPI3deVWy0KY2ABxDkTMJdTYZ13S9lVFmrZRO" import { apikey } from "./env";
const App = () => { const App = () => {
const [cats, setCats] = useState([]); const [cats, setCats] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);

8
src/components/BreedInfoPage.js
View file

@ -1,8 +1,8 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom"; import { useParams, useNavigate } from "react-router-dom";
const API_URL = "https://api.thecatapi.com/v1"; import { API_URL, apikey } from "../env";
const API_KEY = "live_8bnMZatSzkOR7eyT6o0iwDmXQuTxPI3deVWy0KY2ABxDkTMJdTYZ13S9lVFmrZRO"; //const API_URL = "https://api.thecatapi.com/v1";
const BreedInfoPage = () => { const BreedInfoPage = () => {
const { id } = useParams(); const { id } = useParams();
@ -19,7 +19,7 @@ const BreedInfoPage = () => {
const breedResponse = await fetch(`${API_URL}/breeds/${id}`, { 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."); 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`, { 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."); if (!imageResponse.ok) throw new Error("Failed to fetch breed image.");

4
src/components/Favorites.js
View file

@ -6,8 +6,8 @@ const Favorites = ({ favorites, onRemoveFavorite }) => {
<h2 className="fav-heading">Favorites Gallery</h2> <h2 className="fav-heading">Favorites Gallery</h2>
<div className="favorites"> <div className="favorites">
{favorites.map((cat) => ( {favorites.map((cat) => (
<div key={cat.id} className="cat-item"> <div key={cat?.id} className="cat-item">
<img src={cat.url} alt="Favorite Cat" /> <img src={cat?.url} alt="Favorite Cat" />
<button className="fav-button" onClick={() => onRemoveFavorite(cat.id)}>Remove</button> <button className="fav-button" onClick={() => onRemoveFavorite(cat.id)}>Remove</button>
</div> </div>
))} ))}

6
src/components/Filters.js
View file

@ -8,14 +8,14 @@ const Filters = ({ filters, onFilterChange}) => {
type="text" type="text"
name="breed" name="breed"
placeholder="Search by breed name" placeholder="Search by breed name"
value={filters.breed} value={filters?.breed}
onChange={onFilterChange} onChange={onFilterChange}
/> />
<select <select
name="hairLength" name="hairLength"
value={filters.hairLength} value={filters?.hairLength}
onChange={onFilterChange} onChange={onFilterChange}
> >
<option value="">All Hair Lengths</option> <option value="">All Hair Lengths</option>
@ -27,7 +27,7 @@ const Filters = ({ filters, onFilterChange}) => {
<select <select
name="origin" name="origin"
value={filters.origin} value={filters?.origin}
onChange={onFilterChange} onChange={onFilterChange}
> >
<option value="">All Origins</option> <option value="">All Origins</option>

8
src/components/Gallery.js
View file

@ -13,8 +13,8 @@ const Gallery = ({ cats, loading, onLoadMore, onAddFavorite }) => {
}; };
const handleCatClick =(cat)=>{ const handleCatClick =(cat)=>{
console.log('id',cat) console.log('id',cat)
if (cat.breeds && cat.breeds[0] && cat.breeds[0].id) { if (cat?.breeds && cat?.breeds[0] && cat?.breeds[0].id) {
navigate(`/breed/${cat.breeds[0].id}`); navigate(`/breed/${cat?.breeds[0].id}`);
} else { } else {
console.error("No breed ID found for this cat."); 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"> <Masonry className="masonry-grid" breakpointCols={breakpointColumnsObj} columnClassName="masonry-grid-column">
{cats.map((cat,index) => ( {cats.map((cat,index) => (
<div key={`${cat.id}-${index}`} className="cat-item" loading="lazy" onClick={() => handleCatClick(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"} /> <img src={cat?.url} alt={cat.breeds?.[0]?.name || "A cute cat"} />
<button className="like-button" onClick={(e) => { <button className="like-button" onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onAddFavorite(cat); onAddFavorite(cat);

2
src/env.js Normal file
View file

@ -0,0 +1,2 @@
export const apikey ="live_8bnMZatSzkOR7eyT6o0iwDmXQuTxPI3deVWy0KY2ABxDkTMJdTYZ13S9lVFmrZRO";
export const API_URL = "https://api.thecatapi.com/v1";