No items to display
; + } + + return ( +Safe Component
;
+ const { getByText } = setup(
+
+ );
+
+ return (
+ Something went wrong
+{error.message}
+ +
+
+));
+
+export default SpinnerComponent;
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 00000000..8b2b7bfe
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,13 @@
+export const API_ENDPOINTS = {
+ BREEDS: '/breeds',
+ IMAGES: '/images',
+ FAVORITES: '/favourites',
+} as const;
+
+export const ROUTES = {
+ HOME: '/',
+ BREEDS: '/breeds',
+ IMAGE: '/image',
+ FAVORITES: '/favorites',
+ NOT_FOUND: '*',
+} as const;
diff --git a/src/context/ErrorContext.test.tsx b/src/context/ErrorContext.test.tsx
new file mode 100644
index 00000000..01c145be
--- /dev/null
+++ b/src/context/ErrorContext.test.tsx
@@ -0,0 +1,59 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ErrorProvider, useError } from './ErrorContext';
+
+// Helper Component to Test `useError`
+const TestComponent = () => {
+ const { showError } = useError();
+ return ;
+};
+
+const setup = () =>
+ render(
+ Child Component
+
+ {loading &&
+ );
+};
+
+const setup = () =>
+ render(
+ Loading...
} +-
+ {favorites.map((fav) => (
+
- + {fav.image.url} + + + ))} +
Cat Breeds
+ + {/* List of Breeds */} + {loadingBreeds ? ( +-
+ {renderBreedRow}
+
Related cats:
+
+
+
+
+ );
+};
+
+export default Favorites;
diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css
new file mode 100644
index 00000000..a65a99a8
--- /dev/null
+++ b/src/pages/Home/Home.css
@@ -0,0 +1,12 @@
+.image-grid-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust 150px as needed for smaller screens */
+ gap: 15px;
+ margin: 20px;
+}
+
+.image-content {
+ width: 100%;
+ height: auto;
+}
+
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
new file mode 100644
index 00000000..1fee8d6f
--- /dev/null
+++ b/src/pages/Home/Home.tsx
@@ -0,0 +1,132 @@
+import { useEffect, FC, useState, ChangeEvent } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Button, Form, Spinner } from 'react-bootstrap';
+
+import useImages from '../../hooks/useImages';
+import ModalComponent from '../../components/ModalComponent/ModalComponent';
+import ImageCard from '../../components/ImageCard/ImageCard';
+import { useError } from '../../context/ErrorContext';
+import { ICatImage } from '../../definitions';
+import { fetchImageDataById } from '../../apiClient/apiService';
+import { useFavoritesContext } from '../../context/FavoritesContext';
+import ImageDetails from './ImageDetails';
+import { ROUTES } from '../../constants';
+
+import './Home.css';
+
+/**
+ * @component
+ * The Home component is the main page of the application, displaying a grid of cat images.
+ * It includes functionality for viewing image details, marking favorites, and pagination for loading more images.
+ */
+const Home: FC = () => {
+ const { images, fetchImages, loading } = useImages();
+ const { favorites, addFavorite, removeFavorite } = useFavoritesContext();
+ const { showError } = useError();
+
+ const [selectedImage, setSelectedImage] = useStateYour Favorite Cats
+ {loading ? ( +You have no favorite cats yet!
+ ) : ( +
+ {favorites.map((favorite) => (
+
+ )}
+
+ {/* Confirmation Modal */}
+
+ navigate(`${ROUTES.IMAGE}/${favorite.image.id}`)}
+ />
+
+
+ ))}
+ Are you sure you want to delete this favorite?
+
+
+
+
+ Cat Images
+
+ {images.map((image, index) => (
+ openModal(image)} />
+ ))}
+
+
+
+ {/* Render modal with selected image details */}
+ {selectedImage && (
+ + Breed: Unknown +
+ )} + ++ Breed: {breedDetails.name} +
++ Alternative Names: {breedDetails?.alt_names || 'N/A'} +
++ Description: {breedDetails.description} +
+ + ), + }, + { + eventKey: '1', + title: 'Details', + content: ( + <> ++ Life Span: {breedDetails.life_span} years +
++ Origin: {breedDetails.origin} +
++ Temperament: {breedDetails.temperament} +
++ Weight (Imperial): {breedDetails.weight.imperial} lbs +
++ Weight (Metric): {breedDetails.weight.metric} kg +
++ Wikipedia info: + + {breedDetails.wikipedia_url} + +
+
+ Energy Level:
+
+ );
+};
+
+export default ImageDetails;
diff --git a/src/pages/NotFound/NotFound.test.tsx b/src/pages/NotFound/NotFound.test.tsx
new file mode 100644
index 00000000..600d16b7
--- /dev/null
+++ b/src/pages/NotFound/NotFound.test.tsx
@@ -0,0 +1,36 @@
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import NotFound from './NotFound';
+
+describe('NotFound Component', () => {
+ const setup = () =>
+ render(
+
+
+);
+
+export default NotFound;
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 00000000..6431bc5f
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// 404 - Page Not Found
+The page you are looking for does not exist.
+ Go back to Home +