(url, { cache: "force-cache" });
+};
diff --git a/src/app/breeds/@modal/[id]/page.tsx b/src/app/breeds/@modal/[id]/page.tsx
new file mode 100644
index 00000000..dac0c2fb
--- /dev/null
+++ b/src/app/breeds/@modal/[id]/page.tsx
@@ -0,0 +1,41 @@
+import { getImagesByBreedId } from "@/app/_api";
+import { Error, ErrorAction } from "@/components/server.error";
+import { redirect } from "next/navigation";
+import {
+ BreedDetailsModal,
+ BreedDetailsModalSkeleton,
+} from "@/app/breeds/_components/breedDetails";
+import { Suspense } from "react";
+
+async function retryAction() {
+ "use server";
+ redirect("/breeds");
+}
+
+export default async function BreedsPage({
+ params,
+}: {
+ params: Promise<{ id: string }>;
+}) {
+ const { id } = await params;
+
+ return (
+
+
+ );
+ }
+
+ return
+
+
+
+
+
+
+
+ {Array.from({ length: 6 }).map((_, index) => (
+
+ ))}
+
+
+
+
+
+
+ );
+};
+
+export const BreedDetailsModal = ({ images }: { images: CatImage[] }) => {
+ const router = useRouter();
+
+ const onClose = () => {
+ router.push("/breeds", { scroll: false });
+ };
+
+ const breedName = images[0]?.breeds?.[0]?.name || "Breed Images";
+
+ return (
+
+
+
+
+ {breedName}
+
+
+
+
+
+ {images.map((image) => (
+
+
+
+
+ Showing {images.length} image{images.length !== 1 ? "s" : ""}{" "}
+ for this breed
+
+
+
+
+
+ );
+};
diff --git a/src/app/breeds/_components/breedsList.tsx b/src/app/breeds/_components/breedsList.tsx
new file mode 100644
index 00000000..7431e218
--- /dev/null
+++ b/src/app/breeds/_components/breedsList.tsx
@@ -0,0 +1,59 @@
+import { Card } from "@/components/card";
+import { Breed } from "@/types";
+
+const BreedCardSkeleton = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export const BreedsListSkeleton = () => {
+ return (
+
+ {Array.from({ length: 30 }).map((_, index) => (
+
+ );
+};
+
+export const BreedsList = ({ breeds }: { breeds: Breed[] }) => {
+ return (
+
+ {breeds.map((breed) => {
+ return (
+
+
+
+ {breed.name}
+
+ {breed.origin && (
+
+
+ {breed.origin}
+
+
+ )}
+
+
+ );
+ })}
+
+
+ );
+}
+
+async function BreedLoader() {
+ const breeds = await getBreeds({ limit: GET_BREEDS_LIMIT });
+
+ if (breeds.error) {
+ return (
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+ Found {breeds.data.length} amazing cat breeds
+
+
+
+ );
+ }
+
+ const imageDetailsResponse = await getCatById(id);
+ const favouritedResponse = await getFavouriteImages({
+ image_id: id,
+ sub_id: userId,
+ limit: 1,
+ });
+ if (imageDetailsResponse.error || favouritedResponse.error) {
+ return (
+
+
+ );
+ }
+
+ const favourite =
+ favouritedResponse.data.length > 0 ? favouritedResponse.data[0] : null;
+
+ return (
+
+
+
+
{breed.name}
+
+
+
+
+
+
+
+ Physical Traits
+
+
+ {physicalTraits.map((item) => (
+
+
+ {item.label}:
+
+
+ {item.value}
+
+
+ ))}
+
+
+
+
+
+ Personality & Health
+
+
+ {personalityHealth.map((item) => (
+
+
+ {item.label}:
+
+
+ {item.isRating ? (
+
+
+ ))}
+
+
+
+
+
+ );
+};
+
+export const ImageDetailsModalSkeleton = () => {
+ const router = useRouter();
+
+ const onClose = () => {
+ router.push("/cats-gallery", { scroll: false });
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export const ImageDetailsModal = ({
+ image,
+ favourite,
+}: {
+ image: CatImage;
+ favourite: CatFavourites | null;
+}) => {
+ const router = useRouter();
+
+ const onClose = () => {
+ router.push("/cats-gallery", { scroll: false });
+ };
+
+ return (
+
+
+
+
+ Cat #{image.id}
+
+
+
+
+
+
+
+ {image.breeds && image.breeds.length > 0 ? (
+
+
+ Breed Information
+
+ {image.breeds.map((breed) => (
+
+ ) : (
+
+
+ No breed information available for this cat
+
+
+ )}
+
+
+
+ );
+};
diff --git a/src/app/cats-gallery/_components/imagesList.tsx b/src/app/cats-gallery/_components/imagesList.tsx
new file mode 100644
index 00000000..f004bde0
--- /dev/null
+++ b/src/app/cats-gallery/_components/imagesList.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { CatImage } from "@/types";
+import { getCatsImagesList } from "@/app/_api";
+import { Button } from "@/components/button";
+import { useFetch } from "@/hooks/useFetch";
+import { useAlert } from "@/components/alert";
+import {
+ GET_CATS_IMAGES_LIST_LIMIT,
+ GET_CATS_IMAGES_MIME_TYPES,
+} from "@/app/cats-gallery/_constants";
+import { Card } from "@/components/card";
+import { useLoadMore } from "@/hooks/useLoadMore";
+
+export const ImagesList = ({ cats }: { cats: CatImage[] }) => {
+ const { items: cards, loadMore } = useLoadMore({
+ initialData: cats,
+ pageSize: GET_CATS_IMAGES_LIST_LIMIT,
+ });
+ const { showError } = useAlert();
+ const { loading, execute } = useFetch(getCatsImagesList);
+
+ const handleLoadMore = async () => {
+ const { error } = await loadMore((page) =>
+ execute({
+ page,
+ limit: GET_CATS_IMAGES_LIST_LIMIT,
+ mime_types: GET_CATS_IMAGES_MIME_TYPES,
+ })
+ );
+
+ if (error) {
+ return showError(error.message);
+ }
+ };
+
+ return (
+
+
+ {cards.map((cat, index) => (
+ /**
+ * Because the cat api return randomly cats there is a change that the same cat will be returned again
+ * for that reason we are adding the index to the key as duplicate cats will have the same id. Since this list is "static" (just adding new items,
+ * no reordering, filtering, or searching) using index in the key is fine.
+ *
+ */
+
+
+
+ Cat #{cat.id}
+
+
+
+ ))}
+ {loading &&
+ Array.from({ length: GET_CATS_IMAGES_LIST_LIMIT }).map((_, index) => (
+
+
+
+
+ {loading ? "Loading..." : "Load More Cats"}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export const ImageListSkeleton = () => {
+ return (
+
+ {Array.from({ length: GET_CATS_IMAGES_LIST_LIMIT }).map((_, index) => (
+
+ );
+};
diff --git a/src/app/cats-gallery/_constants.ts b/src/app/cats-gallery/_constants.ts
new file mode 100644
index 00000000..ae12f14c
--- /dev/null
+++ b/src/app/cats-gallery/_constants.ts
@@ -0,0 +1,2 @@
+export const GET_CATS_IMAGES_LIST_LIMIT = 10;
+export const GET_CATS_IMAGES_MIME_TYPES = "jpg,png";
diff --git a/src/app/cats-gallery/_page.tsx b/src/app/cats-gallery/_page.tsx
new file mode 100644
index 00000000..e787d146
--- /dev/null
+++ b/src/app/cats-gallery/_page.tsx
@@ -0,0 +1,54 @@
+/**
+ * Reusable page component for default.tsx and page.tsx
+ * Ensures both routes render identical content with a single source of truth.
+ */
+
+import { getCatsImagesList } from "@/app/_api";
+import {
+ ImagesList,
+ ImageListSkeleton,
+} from "@/app/cats-gallery/_components/imagesList";
+import { redirect } from "next/navigation";
+
+import { GET_CATS_IMAGES_LIST_LIMIT } from "@/app/cats-gallery/_constants";
+import { Error, ErrorAction } from "@/components/server.error";
+import { PageContainer } from "@/components/pageContainer";
+import { Suspense } from "react";
+
+async function retryAction() {
+ "use server";
+ redirect("/cats-gallery");
+}
+
+export default async function CatsGalleryPage() {
+ return (
+
+
+ );
+}
+
+async function CatsLoader() {
+ const response = await getCatsImagesList({
+ limit: GET_CATS_IMAGES_LIST_LIMIT,
+ mime_types: "jpg,png",
+ });
+
+ if (response.error) {
+ return (
+
+
+ );
+ }
+
+ return
+
Something went wrong!
+
+
+
+
πΏ
+
+ Error while trying to load the page
+
+
+
+
+
+ {error.message || "Unknown error!"}
+
+
+
+
+ reset()}>
+ Try again
+
+
+
+
+
+
+
+ {cards.map((favourite) => (
+
+
+
+
+
+ Cat #{favourite.image_id}
+
+
+
+
+ setItems((prev) =>
+ prev.filter(
+ (item) => item.image.id !== favourite.image.id
+ )
+ )
+ }
+ imageId={favourite.image.id}
+ favourite={favourite}
+ />
+
+
+
+ ))}
+
+ {loading &&
+ Array.from({ length: GET_FAVOURITE_IMAGES_LIMIT }).map((_, index) => (
+
+ ))}
+
+
+ {hasMore && (
+
+
+ {loading ? "Loading..." : "Load More Cats"}
+
+
+ )}
+
+
+
+
+
+
+
+ );
+};
+
+export const FavouritesListSkeleton = () => {
+ return (
+
+ {Array.from({ length: GET_FAVOURITE_IMAGES_LIMIT }).map((_, index) => (
+
+ );
+};
diff --git a/src/app/favourites/_constants.tsx b/src/app/favourites/_constants.tsx
new file mode 100644
index 00000000..0f690f1a
--- /dev/null
+++ b/src/app/favourites/_constants.tsx
@@ -0,0 +1,2 @@
+export const GET_FAVOURITE_IMAGES_LIMIT = 20;
+export const GET_FAVOURITE_IMAGES_ORDER = "DESC";
diff --git a/src/app/favourites/page.tsx b/src/app/favourites/page.tsx
new file mode 100644
index 00000000..301b2bd1
--- /dev/null
+++ b/src/app/favourites/page.tsx
@@ -0,0 +1,64 @@
+import { getFavouriteImages } from "@/app/_api";
+import { redirect } from "next/navigation";
+import { Error, ErrorAction } from "@/components/server.error";
+import { PageContainer } from "@/components/pageContainer";
+import {
+ FavouritesList,
+ FavouritesListSkeleton,
+} from "@/app/favourites/_components/favouriteList";
+import {
+ GET_FAVOURITE_IMAGES_LIMIT,
+ GET_FAVOURITE_IMAGES_ORDER,
+} from "@/app/favourites/_constants";
+import { getUserId } from "@/app/user/_server.utils";
+import { Suspense } from "react";
+
+async function retryAction() {
+ "use server";
+ redirect("/favourites");
+}
+
+export default async function FavouritesPage() {
+ return (
+
+
+ );
+}
+
+async function FavouritesLoader() {
+ const userId = await getUserId();
+ if (!userId) {
+ return (
+
+
+ );
+ }
+
+ const response = await getFavouriteImages({
+ limit: GET_FAVOURITE_IMAGES_LIMIT,
+ sub_id: userId,
+ order: GET_FAVOURITE_IMAGES_ORDER,
+ });
+
+ if (response.error) {
+ return (
+
+
+ );
+ }
+ return
+
+
+
+ React Cat Challenge
+
+
+ Neo Brutal design Cat App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Created by Alexandros Ntitoras
+
+
+
+
+ );
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 00000000..d9e1ae68
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,23 @@
+import { Button } from "@/components/button";
+import Link from "next/link";
+
+export default function NotFound() {
+ return (
+
+
+
+
πΏ
+
+ Page not found.
+
+
+
+
+ Return to cats gallery
+
+
+
+
=> {
+ const cookieStore = await cookies();
+ return cookieStore.get(name)?.value || null;
+};
+
+export const getUserId = async () => {
+ return await getCookie(COOKIE_USER_ID_KEY);
+};
diff --git a/src/components/alert.tsx b/src/components/alert.tsx
new file mode 100644
index 00000000..c1be19ee
--- /dev/null
+++ b/src/components/alert.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React, { useEffect, useState, createContext, useContext } from "react";
+import { createPortal } from "react-dom";
+import { Button } from "./button";
+import { v4 as uuidv4 } from "uuid";
+
+type AlertProps = {
+ type: "error" | "success";
+ title?: string;
+ message: string;
+ autoClose?: boolean;
+ autoCloseDelay?: number;
+};
+
+export const Alert: React.FC = ({
+ type,
+ title,
+ message,
+ autoClose = true,
+ autoCloseDelay = 5000,
+}) => {
+ const [isVisible, setIsVisible] = useState(true);
+
+ useEffect(() => {
+ if (!autoClose) return;
+
+ const timeoutId = setTimeout(() => {
+ setIsVisible(false);
+ }, autoCloseDelay);
+
+ return () => clearTimeout(timeoutId);
+ }, [autoClose, autoCloseDelay]);
+
+ const alertStyles = {
+ error:
+ "bg-neo-white border-neo border-neo-red shadow-neo-red p-neo-lg text-neo-black",
+ success:
+ "bg-neo-white border-neo border-neo-green shadow-neo-green p-neo-lg text-neo-black",
+ };
+
+ if (!isVisible) return null;
+
+ const alertContent = (
+
+
+
+
{
+ setIsVisible(false);
+ }}
+ aria-label="Close alert"
+ >
+ β
+
+
+ {title && (
+
+ {title}
+
+ )}
+
{message}
+
+
+
+
;
+
+const AlertContext = createContext(undefined);
+
+export const useAlert = () => {
+ const context = useContext(AlertContext);
+ if (!context) {
+ throw new Error("useAlert must be used within an AlertProvider");
+ }
+ return context;
+};
+
+export const AlertProvider = ({ children }: { children: React.ReactNode }) => {
+ const [alerts, setAlerts] = useState([]);
+
+ const showSuccess = (message: string) => {
+ const id = uuidv4();
+ setAlerts((prev) => [...prev, { id, type: "success", message }]);
+ setTimeout(() => {
+ setAlerts((prev) => prev.filter((alert) => alert.id !== id));
+ }, 5000);
+ };
+
+ const showError = (message: string) => {
+ const id = uuidv4();
+ setAlerts((prev) => [...prev, { id, type: "error", message }]);
+ setTimeout(() => {
+ setAlerts((prev) => prev.filter((alert) => alert.id !== id));
+ }, 5000);
+ };
+
+ return (
+
+ {children}
+ {alerts.map((alert) => (
+
+ );
+};
diff --git a/src/components/button.tsx b/src/components/button.tsx
new file mode 100644
index 00000000..45f20525
--- /dev/null
+++ b/src/components/button.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+export type ButtonProps = React.ButtonHTMLAttributes & {
+ variant?: "primary" | "secondary" | "danger" | "success" | "ghost";
+ children: React.ReactNode;
+};
+
+export const Button: React.FC = ({
+ variant = "primary",
+ children,
+ className = "",
+ ...props
+}) => {
+ const variantClasses = {
+ primary: "btn-neo btn-neo-primary",
+ secondary: "btn-neo btn-neo-secondary",
+ danger: "btn-neo btn-neo-danger",
+ success: "btn-neo btn-neo-success",
+ ghost: "btn-neo",
+ };
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/components/card.tsx b/src/components/card.tsx
new file mode 100644
index 00000000..140c75fa
--- /dev/null
+++ b/src/components/card.tsx
@@ -0,0 +1,120 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { UrlObject } from "url";
+
+type CardRootProps = {
+ children: React.ReactNode;
+ className?: string;
+};
+
+const CardRoot: React.FC = ({ children, className = "" }) => {
+ const baseClasses = "card-neo transition-all duration-300 ease-out";
+
+ const combinedClasses = `${baseClasses} ${className}`.trim();
+
+ return {children}
;
+};
+
+type CardLinkProps = {
+ children: React.ReactNode;
+ href: UrlObject;
+ className?: string;
+ scroll?: boolean;
+};
+
+const CardLink: React.FC = ({
+ children,
+ href,
+ className = "",
+ scroll = false,
+ ...props
+}) => {
+ const baseClasses =
+ "card-neo hover:shadow-neo-lg hover:scale-105 transition-all duration-300 ease-out cursor-pointer";
+ const combinedClasses = `${baseClasses} ${className}`.trim();
+
+ return (
+ {children}
;
+};
+
+type CardTitleProps = {
+ children: React.ReactNode;
+ className?: string;
+};
+
+const CardTitle = ({ children, className = "" }: CardTitleProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+type CardBodyProps = {
+ children: React.ReactNode;
+ className?: string;
+};
+
+const CardBody = ({ children, className = "" }: CardBodyProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+type CardImageProps = {
+ src: string;
+ alt: string;
+ className?: string;
+ fill?: boolean;
+ sizes?: string;
+ quality?: number;
+};
+
+const CardImage = ({
+ src,
+ alt,
+ className = "",
+ fill = false,
+ sizes,
+ quality = 75,
+}: CardImageProps) => {
+ return (
+
+
+ );
+};
+
+export const Card = {
+ Root: CardRoot,
+ RootLink: CardLink,
+ Content: CardContent,
+ Title: CardTitle,
+ Body: CardBody,
+ Image: CardImage,
+};
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
new file mode 100644
index 00000000..d8d38d06
--- /dev/null
+++ b/src/components/icon.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+export type IconProps = {
+ name: string;
+ className?: string;
+ size?: "small" | "medium";
+};
+
+const viewBox = {
+ small: "0 0 16 16",
+ medium: "0 0 20 20",
+};
+
+const _size = {
+ small: 16,
+ medium: 20,
+};
+
+export const Icon: React.FC = ({
+ name,
+ className = "",
+ size = "medium",
+}) => {
+ return (
+
+
+ );
+};
diff --git a/src/components/iconButton.tsx b/src/components/iconButton.tsx
new file mode 100644
index 00000000..f684ce03
--- /dev/null
+++ b/src/components/iconButton.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { Icon, IconProps } from "./icon";
+import { Button, ButtonProps } from "./button";
+
+type IconButtonProps = Omit & {
+ icon: string;
+ size?: IconProps["size"];
+ color?: "neo-pink" | "neo-red" | "neo-gray-400";
+ loading?: boolean;
+};
+
+export const IconButton: React.FC = ({
+ icon,
+ onClick,
+ className = "",
+ size = "medium",
+ disabled = false,
+ "aria-label": ariaLabel,
+ variant = "ghost",
+ loading = false,
+ color,
+ ...props
+}) => {
+ const colorClass = color ? `text-${color}` : "";
+
+ return (
+
+
+ );
+};
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
new file mode 100644
index 00000000..049b7235
--- /dev/null
+++ b/src/components/modal.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { IconButton } from "./iconButton";
+
+type ModalRootProps = {
+ isOpen: boolean;
+ onClose: () => void;
+ children: React.ReactNode;
+};
+
+const ModalRoot: React.FC = ({ isOpen, onClose, children }) => {
+ /**
+ * we need to track if the modal is mounted to make sure that we are at the cient side,
+ * other wise we are getting an error that document is not defined
+ */
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+
+ if (!isOpen) return;
+
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ onClose();
+ }
+ };
+
+ document.addEventListener("keydown", handleEscape);
+ document.body.style.overflow = "hidden";
+
+ return () => {
+ document.removeEventListener("keydown", handleEscape);
+ document.body.style.overflow = "unset";
+ };
+ }, [isOpen, onClose]);
+
+ if (!isOpen || !mounted) return null;
+
+ const modalContent = (
+
+ );
+
+ return createPortal(modalContent, document.body);
+};
+
+type ModalContentProps = {
+ children: React.ReactNode;
+};
+
+const ModalContent = ({ children }: ModalContentProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+type ModalHeaderProps = {
+ children: React.ReactNode;
+};
+
+const ModalHeader = ({ children }: ModalHeaderProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+type ModalTitleProps = {
+ children: React.ReactNode;
+};
+
+const ModalTitle = ({ children }: ModalTitleProps) => {
+ return {children} ;
+};
+
+type ModalBodyProps = {
+ children: React.ReactNode;
+};
+
+const ModalBody = ({ children }: ModalBodyProps) => {
+ return {children}
;
+};
+
+type ModalCloseProps = {
+ onClick: () => void;
+};
+
+const ModalClose = ({ onClick }: ModalCloseProps) => {
+ return (
+
+
+
π±
+
{title}
+
{message}
+
+
+
Browse Cats
+
+
= ({
+ title,
+ description,
+ children,
+}) => {
+ return (
+
+
+
{title}
+ {description && (
+
{description}
+ )}
+
+ {children}
+
+
+
+
+
+
+ {children &&
{children}
}
+
+
+ β
+
+ ));
+
+ return (
+
+
+ {value}/{max}
+
+
{stars}
+
= ({ items, className = "" }) => {
+ const pathname = usePathname();
+
+ return (
+
+ {items.map((item) => {
+ const isActive =
+ pathname === item.href || pathname.startsWith(item.href + "/");
+
+ return (
+
+ );
+};
+
+export { Tabs };
diff --git a/src/hooks/useFetch.ts b/src/hooks/useFetch.ts
new file mode 100644
index 00000000..2fce074e
--- /dev/null
+++ b/src/hooks/useFetch.ts
@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import { ApiSuccessOrError } from "@/types";
+
+type UseFetchOptions = {
+ fetchOnMount?: boolean;
+};
+
+export function useFetch(
+ fetchFn: (args: Args) => Promise>,
+ options: UseFetchOptions = {}
+) {
+ const { fetchOnMount } = options;
+
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ /**
+ * We need to check if the component is mounted to avoid setting state on an unmounted component
+ */
+ const isMounted = useRef(true);
+
+ const execute = useCallback(
+ async (args?: Args) => {
+ setLoading(true);
+ setError(null);
+
+ const result = await fetchFn(args as Args);
+
+ if (!isMounted.current) return result;
+
+ setLoading(false);
+
+ if (result.error) {
+ setError(result.error.message);
+ setData(null);
+ return result;
+ }
+
+ setData(result.data);
+
+ return result;
+ },
+ [fetchFn]
+ );
+
+ useEffect(() => {
+ isMounted.current = true;
+
+ if (fetchOnMount) {
+ execute();
+ }
+
+ return () => {
+ isMounted.current = false;
+ };
+ }, [execute, fetchOnMount]);
+
+ return { data, loading, error, execute };
+}
diff --git a/src/hooks/useLoadMore.ts b/src/hooks/useLoadMore.ts
new file mode 100644
index 00000000..14ae4c57
--- /dev/null
+++ b/src/hooks/useLoadMore.ts
@@ -0,0 +1,69 @@
+import { ApiSuccessOrError } from "@/types";
+import { useState } from "react";
+
+export function useLoadMore({
+ initialData,
+ initialPage = 0,
+ pageSize,
+}: {
+ initialData: T[];
+ initialPage?: number;
+ pageSize: number;
+}) {
+ const [items, setItems] = useState(initialData);
+
+ const [currentPage, setCurrentPage] = useState(initialPage);
+ const [hasMore, setHasMore] = useState(initialData.length >= pageSize);
+
+ const loadMore = async (
+ fetchPage: (page: number) => Promise>
+ ) => {
+ const nextPage = currentPage + 1;
+
+ const { data, error } = await fetchPage(nextPage);
+
+ if (error) {
+ return { data: null, error, newData: null, page: nextPage };
+ }
+
+ const existingIds = new Set(items.map((item) => item.id));
+ const uniqueData = data.filter((item) => !existingIds.has(item.id));
+
+ /**
+ * If uniqueData is empty it means that we have reach the end of the available data.
+ * Since the pagination api does not provide total number of items, this is the way to know
+ * that we have reached the end of the pagination.
+ */
+ if (uniqueData.length === 0) {
+ setHasMore(false);
+ return {
+ data: items,
+ error: null,
+ newData: [],
+ page: nextPage,
+ };
+ }
+
+ setCurrentPage(nextPage);
+ if (uniqueData.length < pageSize) {
+ setHasMore(false);
+ }
+
+ const updatedItems = [...items, ...uniqueData];
+ setItems(updatedItems);
+
+ return {
+ data: updatedItems,
+ error: null,
+ newData: uniqueData,
+ page: nextPage,
+ };
+ };
+
+ return {
+ items,
+ hasMore,
+ loadMore,
+ setItems,
+ };
+}
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 00000000..9539cb1d
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+import { v4 as uuidv4 } from "uuid";
+import { COOKIE_USER_ID_KEY, COOKIE_MAX_AGE } from "@/app/user/_constants";
+
+export function middleware(request: NextRequest) {
+ const response = NextResponse.next();
+
+ if (!request.cookies.get(COOKIE_USER_ID_KEY)) {
+ response.cookies.set(COOKIE_USER_ID_KEY, uuidv4(), {
+ sameSite: "lax",
+ path: "/",
+ httpOnly: false,
+ maxAge: COOKIE_MAX_AGE,
+ });
+ }
+
+ return response;
+}
+
+export const config = {
+ matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+};
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 00000000..e5a6292e
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,54 @@
+export type Breed = {
+ id: number;
+ name: string;
+ life_span: string;
+ energy_level: number;
+ intelligence: number;
+ origin: string;
+ health_issues: number;
+ child_friendly: number;
+ weight: {
+ imperial: string;
+ metric: string;
+ };
+};
+
+export type Category = {
+ id: number;
+ name: string;
+};
+
+export type CatImage = {
+ id: string;
+ url: string;
+ width?: number;
+ height?: number;
+ mime_type?: string;
+ breeds?: Breed[];
+ categories?: Category[];
+};
+
+export type CatFavourites = {
+ id: string;
+ image_id: string;
+ sub_id: string;
+ created_at: string;
+ image: CatImage;
+ user_id: string;
+};
+
+export type ApiResponse = {
+ data: T;
+ status: number;
+ ok: boolean;
+ error: null;
+};
+
+export type ApiErrorResponse = {
+ data: null;
+ status: number;
+ ok: boolean;
+ error: { message: string; stack?: string };
+};
+
+export type ApiSuccessOrError = ApiResponse | ApiErrorResponse;
diff --git a/src/utils/http.ts b/src/utils/http.ts
new file mode 100644
index 00000000..4909ccee
--- /dev/null
+++ b/src/utils/http.ts
@@ -0,0 +1,118 @@
+import { ApiSuccessOrError } from "@/types";
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+const API_VERSION = process.env.NEXT_PUBLIC_API_VERSION;
+const API_KEY = process.env.NEXT_PUBLIC_API_KEY;
+
+type CacheOptions = "force-cache" | "no-store";
+
+type NextOptions = { tags?: string[]; revalidate?: number };
+
+type RequestConfig = {
+ method?: string;
+ headers?: Record;
+ body?: string;
+ cache?: CacheOptions;
+ next?: NextOptions;
+};
+
+export function buildUrl(
+ endpoint: string,
+ params?: Record
+): string {
+ const fullUrl = `${API_BASE_URL}/${API_VERSION}${endpoint}`;
+ const url = new URL(fullUrl);
+
+ if (params) {
+ Object.entries(params).forEach(([key, value]) => {
+ if (value !== undefined && value !== null) {
+ url.searchParams.append(key, String(value));
+ }
+ });
+ }
+
+ return url.toString();
+}
+
+async function apiRequest(
+ url: string,
+ requestConfig?: RequestConfig
+): Promise> {
+ const { cache, ...fetchConfig } = requestConfig || {};
+
+ const config = {
+ headers: {
+ "Content-Type": "application/json",
+ ...(API_KEY && {
+ "x-api-key": API_KEY,
+ }),
+ },
+ ...fetchConfig,
+
+ ...(typeof cache === "string" && { cache }),
+ } as const;
+
+ try {
+ const response = await fetch(url, config);
+ const data = await response.json();
+
+ if (!response.ok) {
+ return {
+ data: null,
+ status: response.status,
+ ok: response.ok,
+ error: {
+ message: data.message || "Request failed",
+ },
+ };
+ }
+
+ return {
+ data,
+ status: response.status,
+ ok: response.ok,
+ error: null,
+ };
+ } catch (error) {
+ return {
+ data: null,
+ status: 500,
+ ok: false,
+ error: {
+ message: error instanceof Error ? error.message : "Unknown error",
+ stack: error instanceof Error ? error.stack : undefined,
+ },
+ };
+ }
+}
+
+export const http = Object.freeze({
+ async get(
+ url: string,
+ { cache, next }: { cache?: CacheOptions; next?: NextOptions } = {}
+ ): Promise> {
+ return apiRequest(url, { cache, next });
+ },
+ async post(
+ url: string,
+ data: D,
+ { cache, next }: { cache?: CacheOptions; next?: NextOptions } = {}
+ ): Promise> {
+ return apiRequest(url, {
+ method: "POST",
+ body: JSON.stringify(data),
+ cache,
+ next,
+ });
+ },
+ async delete(
+ url: string,
+ { cache, next }: { cache?: CacheOptions; next?: NextOptions } = {}
+ ): Promise> {
+ return apiRequest(url, {
+ method: "DELETE",
+ cache,
+ next,
+ });
+ },
+});
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..c1334095
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}