+
+
+
+
+
+
+
+
+ CatLover
+ +
+
+ );
+};
+
+export default BreedModal;
diff --git a/cat-lover/src/components/CatInfoModal/CatInfoModal.css b/cat-lover/src/components/CatInfoModal/CatInfoModal.css
new file mode 100644
index 00000000..5e6ffe7d
--- /dev/null
+++ b/cat-lover/src/components/CatInfoModal/CatInfoModal.css
@@ -0,0 +1,11 @@
+ /* Modal styles */
+ .favorite-form {
+ margin-top: 30px;
+ padding-top: 25px;
+ border-top: 1px solid #e0e0e0;
+ }
+
+ .favorite-form h4 {
+ font-size: 1.3rem;
+ margin-bottom: 15px;
+ }
\ No newline at end of file
diff --git a/cat-lover/src/components/CatInfoModal/index.tsx b/cat-lover/src/components/CatInfoModal/index.tsx
new file mode 100644
index 00000000..cceaa0c9
--- /dev/null
+++ b/cat-lover/src/components/CatInfoModal/index.tsx
@@ -0,0 +1,92 @@
+import { useEffect, useRef } from "react";
+import { addFavorite, type CatImage } from "../../services/cat-api";
+import { useNavigate } from "react-router-dom";
+import "./CatInfoModal.css";
+
+interface ModalProps {
+ cat: CatImage;
+ onClose: () => void;
+}
+
+const CatInfoModal = ({ cat, onClose }: ModalProps) => {
+ const modalRef = useRef
+
+
+
+
+
+
+ {breed.name}
+{breed.description}
+
+
+ + Origin: {breed.origin} +
++ Temperament: {breed.temperament} +
++ Life Span: {breed.life_span} years +
+ {breed.wikipedia_url && ( + + )} +Photos of {breed.name} cats
+ + {loading &&Loading images...
} + {error &&Error: {error}
} + +
+ {breedImages.map((cat) => (
+
+
+ {breedImages.length === 0 && !loading && !error && (
+ openCatDetails(cat)}
+ >
+ 
+
+ ))}
+ No images found for this breed.
+ )} +
+
+ );
+};
+
+export default CatInfoModal;
diff --git a/cat-lover/src/index.css b/cat-lover/src/index.css
new file mode 100644
index 00000000..08a3ac9e
--- /dev/null
+++ b/cat-lover/src/index.css
@@ -0,0 +1,68 @@
+:root {
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/cat-lover/src/main.tsx b/cat-lover/src/main.tsx
new file mode 100644
index 00000000..bef5202a
--- /dev/null
+++ b/cat-lover/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+
+ {cat?.breeds && cat?.breeds?.length > 0 ? (
+
+
+
+ ) : (
+ {cat.breeds[0]?.name}
+{cat.breeds[0]?.description}
++ Origin: {cat.breeds[0]?.origin} +
++ Temperament: {cat.breeds[0]?.temperament} +
++ Life Span: {cat.breeds[0]?.life_span} years +
+ {cat.breeds[0]?.wikipedia_url && ( + + )} + +No breed information available for this cat.
+ )} + +
+
+ Like this cat?
+ +Loading breeds...
;
+ if (error) return Error: {error}
;
+
+ return (
+
+
+ );
+};
+
+export default Breeds;
diff --git a/cat-lover/src/pages/Favorites/Favorites.css b/cat-lover/src/pages/Favorites/Favorites.css
new file mode 100644
index 00000000..13ae1126
--- /dev/null
+++ b/cat-lover/src/pages/Favorites/Favorites.css
@@ -0,0 +1,102 @@
+@import "../../styles/variables.css";
+
+.favorites-container {
+ padding: 20px 0;
+ }
+
+ .favorites-count {
+ margin-bottom: 30px;
+ color: #666;
+ font-size: 1.2rem;
+ }
+
+ .favorites-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 30px;
+ }
+
+ .favorite-card {
+ background-color: white;
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: var(--primary-shadow);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .favorite-card:hover {
+ transform: translateY(-8px);
+ box-shadow: var(--card-shadow-hover);
+ }
+
+ .favorite-image-container {
+ position: relative;
+ flex-grow: 1;
+ }
+
+ .favorite-image-container img {
+ width: 100%;
+ height: 250px;
+ object-fit: cover;
+ display: block;
+ cursor: pointer;
+ }
+
+ .remove-favorite-btn {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ background-color: rgba(255, 255, 255, 0.9);
+ border: none;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ padding: 0;
+ font-size: 18px;
+ transition: all 0.3s ease;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+ }
+
+ .remove-favorite-btn:hover {
+ background-color: var(--primary-color);
+ color: white;
+ transform: scale(1.1);
+ }
+
+ .favorite-breed {
+ padding: 18px;
+ font-weight: bold;
+ color: var(--primary-color);
+ text-align: center;
+ background-color: white;
+ font-size: 1.1rem;
+ }
+
+ .empty-favorites {
+ text-align: center;
+ margin-top: 80px;
+ padding: 50px;
+ background-color: var(--background-color);
+ border-radius: 12px;
+ box-shadow: var(--primary-shadow);
+ }
+
+ .empty-favorites p {
+ margin-bottom: 30px;
+ color: #666;
+ font-size: 1.3rem;
+ }
+
+ .loading, .error {
+ text-align: center;
+ margin-top: 80px;
+ color: #666;
+ font-size: 1.3rem;
+ }
\ No newline at end of file
diff --git a/cat-lover/src/pages/Favorites/index.tsx b/cat-lover/src/pages/Favorites/index.tsx
new file mode 100644
index 00000000..c499e3a7
--- /dev/null
+++ b/cat-lover/src/pages/Favorites/index.tsx
@@ -0,0 +1,97 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+ getFavorites,
+ removeFavorite,
+ type FavoriteCat,
+} from "../../services/cat-api";
+import "./Favorites.css";
+
+const Favorites = () => {
+ const [favorites, setFavorites] = useStateCat Breeds
+
+ {breeds.map((breed) => (
+
+
+ {breeds.length === 0 && openBreedModal(breed)}
+ >
+
+ ))}
+ {breed.name}
+{breed.origin}
+{breed.temperament}
+No breeds found
} + + {selectedBreed && ( +Loading your favorites...
;
+ if (error) return Error: {error}
;
+
+ return (
+
+
+ );
+};
+
+export default Favorites;
diff --git a/cat-lover/src/pages/Home.test.tsx b/cat-lover/src/pages/Home.test.tsx
new file mode 100644
index 00000000..c2ccaf26
--- /dev/null
+++ b/cat-lover/src/pages/Home.test.tsx
@@ -0,0 +1,86 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Home from "./Home";
+import { getCats } from "../services/cat-api";
+import { MemoryRouter } from "react-router-dom";
+
+jest.mock("../services/cat-api", () => ({
+ getCats: jest.fn(),
+}));
+
+describe("Home Component", () => {
+ const mockCats = [
+ { id: "1", url: "https://example.com/cat1.jpg" },
+ { id: "2", url: "https://example.com/cat2.jpg" },
+ ];
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ test("displays loading state initially and then renders cats after fetch", async () => {
+ (getCats as jest.Mock).mockResolvedValue(mockCats);
+
+ render(
+ Your Favorite Cats
+ + {favorites.length === 0 ? ( +
+
+ ) : (
+ <>
+ You haven't added any cats to your favorites yet.
+ ++ You have {favorites.length} favorite cats +
+
+ {favorites.map((favorite) => (
+
+
+ )}
+
+
+ ))}
+
+ 
openCatDetails(favorite.image_id)}
+ />
+
+
+ {favorite.image.breeds && favorite.image.breeds.length > 0 && (
+ openCatDetails(favorite.image_id)}
+ />
+
+
+ {favorite.image.breeds[0].name}
+
+ )}
+ Loading cats...
;
+ if (error && cats.length === 0) return Error: {error}
;
+
+ return (
+
+
+ );
+};
+
+export default Home;
diff --git a/cat-lover/src/services/cat-api.test.ts b/cat-lover/src/services/cat-api.test.ts
new file mode 100644
index 00000000..9ba83c47
--- /dev/null
+++ b/cat-lover/src/services/cat-api.test.ts
@@ -0,0 +1,155 @@
+import MockAdapter from "axios-mock-adapter";
+import catApi, {
+ getCats,
+ getBreeds,
+ getImagesByBreed,
+ getFavorites,
+ removeFavorite,
+ addFavorite,
+} from "./cat-api";
+import type { CatImage, CatBreed, FavoriteCat } from "./cat-api";
+
+describe("catApi", () => {
+ let mock: MockAdapter;
+
+ beforeEach(() => {
+ mock = new MockAdapter(catApi);
+ });
+
+ afterEach(() => {
+ mock.restore();
+ });
+
+ test("getCats calls the correct endpoint with parameters", async () => {
+ const mockData: CatImage[] = [
+ {
+ id: "1",
+ url: "https://test.com/cat.jpg",
+ breeds: [],
+ width: 100,
+ height: 100,
+ },
+ ];
+
+ mock
+ .onGet("/images/search", { params: { limit: 5, has_breeds: 1 } })
+ .reply(200, mockData);
+
+ const result = await getCats(5);
+
+ expect(result).toEqual(mockData);
+ });
+
+ test("getBreeds calls the correct endpoint and returns breed data", async () => {
+ const mockBreeds: CatBreed[] = [
+ {
+ id: "abys",
+ name: "Abyssinian",
+ description: "Active and intelligent",
+ temperament: "Active, Energetic, Independent",
+ origin: "Egypt",
+ life_span: "14 - 15",
+ wikipedia_url: "https://en.wikipedia.org/wiki/Abyssinian_cat",
+ },
+ ];
+
+ mock.onGet("/breeds").reply(200, mockBreeds);
+
+ const result = await getBreeds();
+
+ expect(result).toEqual(mockBreeds);
+ });
+
+ test("getImagesByBreed calls the correct endpoint with breed parameters", async () => {
+ const mockImages: CatImage[] = [
+ {
+ id: "img123",
+ url: "https://test.com/cat2.jpg",
+ breeds: [],
+ width: 500,
+ height: 600,
+ },
+ ];
+
+ mock
+ .onGet("/images/search", { params: { breed_ids: "abys", limit: 5 } })
+ .reply(200, mockImages);
+
+ const result = await getImagesByBreed("abys", 5);
+
+ expect(result).toEqual(mockImages);
+ });
+
+ test("getBreeds throws error on failure", async () => {
+ mock.onGet("/breeds").reply(500);
+
+ await expect(getBreeds()).rejects.toThrow();
+ });
+
+ test("getFavorites calls the correct endpoint and returns favorite cats", async () => {
+ const mockFavorites: FavoriteCat[] = [
+ {
+ id: 123,
+ image_id: "img123",
+ created_at: "2023-01-01T12:00:00.000Z",
+ image: {
+ id: "img123",
+ url: "https://test.com/cat.jpg",
+ breeds: [],
+ width: 500,
+ height: 600,
+ },
+ },
+ ];
+
+ mock.onGet("/favourites").reply(200, mockFavorites);
+
+ const result = await getFavorites();
+
+ expect(result).toEqual(mockFavorites);
+ });
+
+ test("getFavorites throws error on failure", async () => {
+ mock.onGet("/favourites").reply(500);
+
+ await expect(getFavorites()).rejects.toThrow();
+ });
+
+ test("removeFavorite calls the correct endpoint with ID", async () => {
+ const favoriteId = 123;
+ const mockResponse = { message: "SUCCESS" };
+
+ mock.onDelete(`/favourites/${favoriteId}`).reply(200, mockResponse);
+
+ const result = await removeFavorite(favoriteId);
+
+ expect(result).toEqual(mockResponse);
+ });
+
+ test("removeFavorite throws error on failure", async () => {
+ const favoriteId = 123;
+
+ mock.onDelete(`/favourites/${favoriteId}`).reply(500);
+
+ await expect(removeFavorite(favoriteId)).rejects.toThrow();
+ });
+
+ test("addFavorite calls the correct endpoint with imageID", async () => {
+ const imageId = "i123";
+ const mockResponse = { id: 456 };
+
+ mock.onPost("/favourites", { image_id: imageId }).reply(200, mockResponse);
+
+ const result = await addFavorite(imageId);
+
+ expect(result).toEqual(mockResponse);
+ });
+
+ test("addFavorite throws error upon failure", async () => {
+ const imageId = "i123";
+
+ mock.onPost("/favourites", { image_id: imageId }).reply(500);
+
+ await expect(addFavorite(imageId)).rejects.toThrow();
+ });
+});
diff --git a/cat-lover/src/services/cat-api.ts b/cat-lover/src/services/cat-api.ts
new file mode 100644
index 00000000..ef3b2e8c
--- /dev/null
+++ b/cat-lover/src/services/cat-api.ts
@@ -0,0 +1,94 @@
+import axios from "axios";
+
+// TODO MOVE TO ENV
+const API_KEY =
+ "live_bgpf9RUnXkOrMIYrIoTVLK810Jp5Ym6Dt9KX4FIpVuJptDIJoOgonTTKCCWHdabz";
+const BASE_URL = "https://api.thecatapi.com/v1";
+
+const catApi = axios.create({
+ baseURL: BASE_URL,
+ headers: {
+ "x-api-key": API_KEY,
+ },
+});
+
+export interface FavoriteCat {
+ id: number;
+ image_id: string;
+ sub_id?: string;
+ created_at: string;
+ image: CatImage;
+}
+export interface CatImage {
+ id: string;
+ url: string;
+ breeds: CatBreed[];
+ width: number;
+ height: number;
+}
+
+export interface CatBreed {
+ id: string;
+ name: string;
+ description: string;
+ temperament: string;
+ origin: string;
+ life_span: string;
+ wikipedia_url: string;
+}
+
+export const getCats = async (limit: number = 10): PromiseCats
+
+ {cats.map((cat) => (
+
+
+ openModal(cat)}>
+
+
+ ))}
+
+
+
+ {selectedCat &&