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 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);

8
src/components/BreedInfoPage.js
View file

@ -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.");

4
src/components/Favorites.js
View file

@ -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>
))}

6
src/components/Filters.js
View file

@ -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>

8
src/components/Gallery.js
View file

@ -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);

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";