Refactor: replace all next/image components with Cloudinary wrapper

src/components/Account/UserAvatar.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Image from 'next/image';
+import { CldImage } from 'next-cloudinary';
 import { z } from 'zod';
 import GetUserSchema from '@/services/User/schema/GetUserSchema';
 import { FaUser } from 'react-icons/fa';
@@ -25,11 +25,12 @@ const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
       </span>
     </div>
   ) : (
-    <Image
+    <CldImage
       src={userAvatar.path}
       alt="user avatar"
       width={1000}
       height={1000}
+      crop="fill"
       className="h-full w-full object-cover mask mask-circle"
     />
   );

src/components/BeerIndex/BeerCard.tsx

@@ -1,10 +1,11 @@
 import Link from 'next/link';
 import { FC, useContext } from 'react';
-import Image from 'next/image';
+
 import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { z } from 'zod';
 import UserContext from '@/contexts/UserContext';
 import useGetBeerPostLikeCount from '@/hooks/data-fetching/beer-likes/useBeerPostLikeCount';
+import { CldImage } from 'next-cloudinary';
 import BeerPostLikeButton from '../BeerById/BeerPostLikeButton';
 
 const BeerCard: FC<{ post: z.infer<typeof BeerPostQueryResult> }> = ({ post }) => {
@@ -16,9 +17,10 @@ const BeerCard: FC<{ post: z.infer<typeof BeerPostQueryResult> }> = ({ post }) =
       <figure className="h-96">
         <Link href={`/beers/${post.id}`} className="h-full object-cover">
           {post.beerImages.length > 0 && (
-            <Image
+            <CldImage
               src={post.beerImages[0].path}
               alt={post.name}
+              crop="fill"
               width="3000"
               height="3000"
               className="h-full object-cover"

src/components/BreweryIndex/BreweryCard.tsx

@@ -4,7 +4,8 @@ import BreweryPostQueryResult from '@/services/BreweryPost/schema/BreweryPostQue
 import { FC, useContext } from 'react';
 import Link from 'next/link';
 import { z } from 'zod';
-import Image from 'next/image';
+
+import { CldImage } from 'next-cloudinary';
 import BreweryPostLikeButton from './BreweryPostLikeButton';
 
 const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
@@ -17,11 +18,12 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
       <figure className="card-image h-96">
         <Link href={`/breweries/${brewery.id}`} className="h-full object-cover">
           {brewery.breweryImages.length > 0 && (
-            <Image
+            <CldImage
               src={brewery.breweryImages[0].path}
               alt={brewery.name}
               width="1029"
               height="110"
+              crop="fill"
               className="h-full object-cover"
             />
           )}

src/config/cloudinary/CloudinaryStorage.ts

@@ -40,11 +40,7 @@ class CloudinaryStorage implements StorageEngine {
    * @param file - The file to be removed.
    * @param callback - The callback function to be called if an error occurs.
    */
-  public _removeFile(
+  _removeFile(req: Request, file: Express.Multer.File, callback: (error: Error) => void) {
-    req: Request,
-    file: Express.Multer.File,
-    callback: (error: Error) => void,
-  ) {
     this.cloudinary.uploader.destroy(file.filename, { invalidate: true }, callback);
   }
 
@@ -55,7 +51,7 @@ class CloudinaryStorage implements StorageEngine {
    * @param file - The file to be uploaded.
    * @param callback - The callback function to be called after the file is uploaded.
    */
-  public _handleFile(
+  _handleFile(
     req: Request,
     file: Express.Multer.File,
     callback: (error?: unknown, info?: Partial<Express.Multer.File>) => void,

src/pages/beers/[id]/index.tsx

@@ -1,7 +1,5 @@
 import { NextPage, GetServerSideProps } from 'next';
 import Head from 'next/head';
-import Image from 'next/image';
-
 import getBeerPostById from '@/services/BeerPost/getBeerPostById';
 
 import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
@@ -13,6 +11,7 @@ import { Carousel } from 'react-responsive-carousel';
 import useMediaQuery from '@/hooks/utilities/useMediaQuery';
 import { Tab } from '@headlessui/react';
 import dynamic from 'next/dynamic';
+import { CldImage } from 'next-cloudinary';
 
 const [BeerInfoHeader, BeerPostCommentsSection, BeerRecommendations] = [
   dynamic(() => import('@/components/BeerById/BeerInfoHeader')),
@@ -45,10 +44,11 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
           {beerPost.beerImages.length
             ? beerPost.beerImages.map((image, index) => (
                 <div key={image.id} id={`image-${index}}`} className="w-full">
-                  <Image
+                  <CldImage
                     alt={image.alt}
                     src={image.path}
                     height={1080}
+                    crop="fill"
                     width={1920}
                     className="h-96 w-full object-cover lg:h-[42rem]"
                   />

src/pages/breweries/[id]/index.tsx

@@ -4,7 +4,7 @@ import { GetServerSideProps, NextPage } from 'next';
 
 import { z } from 'zod';
 import Head from 'next/head';
-import Image from 'next/image';
+
 import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
 import { Carousel } from 'react-responsive-carousel';
 import useMediaQuery from '@/hooks/utilities/useMediaQuery';
@@ -12,6 +12,7 @@ import { Tab } from '@headlessui/react';
 
 import dynamic from 'next/dynamic';
 import { MAPBOX_ACCESS_TOKEN } from '@/config/env';
+import { CldImage } from 'next-cloudinary';
 
 const [BreweryInfoHeader, BreweryBeersSection, BreweryCommentsSection, BreweryPostMap] = [
   dynamic(() => import('@/components/BreweryById/BreweryInfoHeader')),
@@ -47,9 +48,10 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost, mapboxToken
           {breweryPost.breweryImages.length
             ? breweryPost.breweryImages.map((image, index) => (
                 <div key={image.id} id={`image-${index}}`} className="w-full">
-                  <Image
+                  <CldImage
                     alt={image.alt}
                     src={image.path}
+                    crop="fill"
                     height={1080}
                     width={1920}
                     className="h-96 w-full object-cover lg:h-[42rem]"

src/pages/login/index.tsx

@@ -1,13 +1,13 @@
 import { NextPage } from 'next';
 
 import LoginForm from '@/components/Login/LoginForm';
-import Image from 'next/image';
 
 import { FaUserCircle } from 'react-icons/fa';
 import Head from 'next/head';
 import Link from 'next/link';
 
 import useRedirectWhenLoggedIn from '@/hooks/auth/useRedirectIfLoggedIn';
+import { CldImage } from 'next-cloudinary';
 
 const LoginPage: NextPage = () => {
   useRedirectWhenLoggedIn();
@@ -20,11 +20,11 @@ const LoginPage: NextPage = () => {
 
       <div className="flex h-full flex-row">
         <div className="hidden h-full flex-col items-center justify-center bg-base-100 lg:flex lg:w-[55%]">
-          <Image
+          <CldImage
-            src="https://picsum.photos/5000/5000"
+            src="https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg"
             alt="Login Image"
-            width={4920}
+            width={5000}
-            height={4080}
+            height={5000}
             className="h-full w-full object-cover"
           />
         </div>