+ {isLoading && images.length === 0
+ ? Array.from({ length: numberOfSkeletons }).map((_, index) =>
+ );
+});
+
+export default ImageGallery
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 00000000..699fb1b8
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,99 @@
+import { JSX, useEffect, useRef, useCallback, useMemo } from 'react';
+
+interface ModalProps {
+ children: React.ReactNode;
+ onClose: () => void;
+ title?: string;
+ description?: string;
+}
+
+function Modal({ children, onClose, title, description }: ModalProps): JSX.Element {
+ const modalRef = useRef
+
+ );
+}
+
+export default Modal
diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
new file mode 100644
index 00000000..d3bd8ee2
--- /dev/null
+++ b/src/components/atoms/Button.tsx
@@ -0,0 +1,43 @@
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, JSX } from 'react';
+
+interface ButtonProps extends DetailedHTMLProps {
+ e.stopPropagation();
+ }}
+ tabIndex={-1} // Make modal content focusable
+ >
+
+ {title &&
+ {title}
} + {description &&{description}
} +{children}
+
+
+ );
+});
+
+export default ErrorMessage;
diff --git a/src/components/atoms/Skeleton.tsx b/src/components/atoms/Skeleton.tsx
new file mode 100644
index 00000000..ee67800e
--- /dev/null
+++ b/src/components/atoms/Skeleton.tsx
@@ -0,0 +1,21 @@
+import React, { JSX } from 'react';
+
+interface SkeletonProps {
+ width?: string;
+ height?: string;
+ className?: string;
+}
+
+const Skeleton = React.memo(({ width = '100%', height = '100%', className = '' }: SkeletonProps): JSX.Element => {
+ return (
+
+ );
+});
+
+export default Skeleton;
diff --git a/src/components/molecules/ImageCard.tsx b/src/components/molecules/ImageCard.tsx
new file mode 100644
index 00000000..e98477ed
--- /dev/null
+++ b/src/components/molecules/ImageCard.tsx
@@ -0,0 +1,36 @@
+import { JSX, memo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { CatImage } from '../../api/types';
+import Skeleton from '../atoms/Skeleton';
+
+interface ImageCardProps {
+ image: CatImage;
+ renderAfterImage?: (image: CatImage) => JSX.Element;
+}
+
+const ImageCard = memo(({ image, renderAfterImage }: ImageCardProps): JSX.Element => {
+ const [isLoadingImage, setIsLoadingImage] = useState(true);
+
+ return (
+ {message}
+ {onRetry && ( + + )} +
+ void import('../../views/ImageView')}
+ >
+ {isLoadingImage && 
setIsLoadingImage(false)}
+ />
+
+ {renderAfterImage?.(image)}
+
+ );
+});
+
+export default ImageCard;
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 00000000..970d5359
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1 @@
+export const BASENAME_ROUTE = process.env.NODE_ENV === 'production' ? '/platform-catApi-react/' : '/';
\ No newline at end of file
diff --git a/src/hooks/__mocks__/useFavorites.ts b/src/hooks/__mocks__/useFavorites.ts
new file mode 100644
index 00000000..dc700cad
--- /dev/null
+++ b/src/hooks/__mocks__/useFavorites.ts
@@ -0,0 +1,9 @@
+import { vi } from 'vitest'
+
+export const useFavorites = () => ({
+ favorites: [],
+ addFavorite: vi.fn(),
+ removeFavorite: vi.fn(),
+ isLoading: false,
+ error: null
+})
diff --git a/src/hooks/useFavorites.ts b/src/hooks/useFavorites.ts
new file mode 100644
index 00000000..e74f3888
--- /dev/null
+++ b/src/hooks/useFavorites.ts
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react'
+import { parseCatImages } from '../api/parsers'
+import { CatImage } from '../api/types'
+
+const LOCAL_STORAGE_FAVORITES_KEY = 'favorites'
+
+export function useFavorites() {
+ const [favorites, setFavorites] = useState
+
+ )}
+ {error && !breed &&
+ {Array.from({ length: 4 }).map((_, i) => (
+
+ {breed.name}
+{breed.description}
+No breed details found.
} +
+ void fetchBreeds()} />}
+ {!isLoading && !error && breeds.length > 0 &&
+ );
+}
+
+export default Breeds
diff --git a/src/views/Favorites.tsx b/src/views/Favorites.tsx
new file mode 100644
index 00000000..2c72540a
--- /dev/null
+++ b/src/views/Favorites.tsx
@@ -0,0 +1,38 @@
+import { JSX, useCallback } from 'react';
+import { useFavorites } from '../hooks/useFavorites';
+import ImageGallery from '../components/ImageGallery';
+import { CatImage } from '../api/types';
+import Button from '../components/atoms/Button';
+
+function Favorites(): JSX.Element {
+ const { favorites, removeFavorite } = useFavorites();
+
+ const renderRemoveFavoriteButton = useCallback((fav: CatImage): JSX.Element => {
+ return (
+
+ );
+ }, [removeFavorite]);
+
+ return (
+ Cat Breeds
+ {isLoading && ( + Array.from({ length: 20 }).map((_, i) => ( +- {listItems}
No breeds found.
} +
+
+ );
+}
+
+export default Favorites
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
new file mode 100644
index 00000000..46d0bb11
--- /dev/null
+++ b/src/views/Home.tsx
@@ -0,0 +1,41 @@
+import { JSX, useEffect } from 'react';
+import useFetchCatImages from '../hooks/useFetchCatImages';
+import ImageGallery from '../components/ImageGallery';
+import Button from '../components/atoms/Button';
+import ErrorMessage from '../components/atoms/ErrorMessage';
+
+function Home(): JSX.Element {
+ const { images, fetchImages, isLoading, error } = useFetchCatImages();
+
+ useEffect(() => {
+ if (isLoading || images.length > 0) return;
+ void fetchImages();
+ // we only want to fetch new images when the component mounts
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+ Favourite Cats
+ {favorites.length > 0 ? ( +No favorite cats yet.
+ )} +
+ void fetchImages()} />}
+ {!isLoading && !error && images.length === 0 && (
+
+ );
+}
+
+export default Home
diff --git a/src/views/ImageView.tsx b/src/views/ImageView.tsx
new file mode 100644
index 00000000..d73ebec4
--- /dev/null
+++ b/src/views/ImageView.tsx
@@ -0,0 +1,92 @@
+import { useEffect, JSX, useMemo, useCallback } from 'react';
+import { useNavigate, useParams, useLocation, Location } from 'react-router-dom';
+import Modal from '../components/Modal';
+import { CatImage } from '../api/types';
+import { useFavorites } from '../hooks/useFavorites';
+import useFetchImageDetail from '../hooks/useFetchImageDetail';
+import Button from '../components/atoms/Button';
+import Skeleton from '../components/atoms/Skeleton';
+import ErrorMessage from '../components/atoms/ErrorMessage';
+
+function ImageView(): JSX.Element {
+ const navigate = useNavigate();
+ const location: LocationRandom Cats
+ {error &&No images found.
+ )} +
+
+
+
+
+ )}
+ {error && !selectedImage &&
+ 
+ {selectedImage.breeds && selectedImage.breeds.length > 0 ? (
+ <>
+
+ )}
+ {!isLoading && !error && !selectedImage && {selectedImage.breeds[0].name}
+{selectedImage.breeds[0].description}
+ + ) : ( +No breed info available
+ )} + +No image details found.
} +
+
+
+`;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+
+ + Random Cats +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+