Support code

src/components/Image/Image.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+
+import { createClient } from 'pexels';
+import type { ErrorResponse, Photo } from 'pexels';
+import { FruitType } from 'src/types';
+
+interface ImageProps {
+  item: FruitType;
+}
+
+function Image({ item }: ImageProps) {
+  const client = createClient(process.env.REACT_APP_PEXEL_API_KEY as string);
+  const [photo, setPhoto] = useState<Photo | null>(null);
+
+  const fetchImage = (query: string) => {
+    client.photos
+      .search({ query, per_page: 1 })
+      .then((data) => {
+        if (!('error' in data)) {
+          setPhoto(data.photos[0]);
+        }
+      })
+      .catch((error: ErrorResponse) => {
+        throw new Error(error.error);
+      });
+  };
+
+  useEffect(() => {
+    fetchImage(item.name);
+  }, []);
+
+  return (
+    <div className='m-1'>
+      <img
+        className='object-cover w-52 h-36'
+        src={photo?.src.medium || 'https://placehold.co/100'}
+        alt={photo?.alt || 'photo of fruit'}
+      ></img>
+    </div>
+  );
+}
+
+export default Image;

src/components/Image/index.ts

@@ -0,0 +1 @@
+export { default } from './Image';

src/components/Products/Products.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+
+import Image from 'src/components/Image';
+import PaginationControls from 'src/components/PaginationControls';
+import usePagination from 'src/hooks/usePagination';
+import { FruitType } from 'src/types';
+
+function Products() {
+  const [fruits, setFruits] = useState<FruitType[] | null>(null);
+  const { currentPage, getCurrentData, setCurrentPage, pageCount } = usePagination<FruitType>(fruits || [], 5);
+
+  const fetchFruitsData = async () => {
+    try {
+      const url = 'https://proxyserver-phi.vercel.app/';
+      const res = await fetch(url);
+      const fruits = await res.json();
+
+      setFruits(fruits);
+    } catch (error: unknown) {
+      if (typeof error == 'string') {
+        throw new Error(error);
+      } else {
+        console.error(error);
+      }
+    }
+  };
+
+  useEffect(() => {
+    fetchFruitsData();
+  }, []);
+
+  if (!fruits) return <p>Loading...</p>;
+
+  return (
+    <div>
+      <div className='flex m-2'>
+        {getCurrentData().map((item) => {
+          return <Image item={item} key={item.id} />;
+        })}
+      </div>
+      <PaginationControls currentPage={currentPage} setCurrentPage={setCurrentPage} pageCount={pageCount} />
+    </div>
+  );
+}
+
+export default Products;

src/components/Products/index.ts

@@ -0,0 +1 @@
+export { default } from './Products';