From 3fd002c6ec09f0c6392a54c04c8f108dc857413f Mon Sep 17 00:00:00 2001
From: Aleksandar Petkov <sashko506@gmail.com>
Date: Sun, 10 Sep 2023 17:37:56 +0300
Subject: [PATCH] Use next/image component for campaign images (#1580)

* ActiveCampaignCard: Use next/image to display card image

* CampaignCard: Use next/image component for card image

* ActiveCampaignCard: Fix layout on smaller widths

* CompletedCampaignsSection: Use next/image component for card image

* Run linting
---
 .../campaigns/CampaignCard/CampaignCard.tsx   | 39 ++++++++---------
 .../ActiveCampaignCard/ActiveCampaignCard.tsx | 43 +++++++++++--------
 .../CompletedCampaignsSection.tsx             | 15 +++++--
 3 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx
index 60baf923a..b53f0c42e 100644
--- a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx
+++ b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { useTranslation, i18n } from 'next-i18next'
 import { CampaignResponse } from 'gql/campaigns'
 
-import { CardMedia } from '@mui/material'
+import { Box, CardMedia } from '@mui/material'
 
 import { routes } from 'common/routes'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
@@ -23,6 +23,7 @@ import {
   SumNumber,
   SumWrapper,
 } from '../../index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled'
+import Image from 'next/image'
 
 type Props = { campaign: CampaignResponse; index: number }
 
@@ -47,26 +48,24 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
 
   return (
     <Root data-testid={`campaign-card-${index}`}>
-      <Link href={routes.campaigns.viewCampaignBySlug(slug)} sx={{ position: 'relative' }}>
-        <CardMedia
-          component="img"
-          height="100%"
-          image={campaignImagesUrl}
-          alt={title}
+      <Link href={routes.campaigns.viewCampaignBySlug(slug)}>
+        <Box
+          position={'relative'}
           sx={{
-            maxHeight: theme.spacing(42.5),
-
-            [theme.breakpoints.up('lg')]: {
-              aspectRatio: '2',
-              height: theme.spacing(22.3),
-              maxHeight: 'inherit',
-            },
-
-            [theme.breakpoints.up(1430)]: {
-              height: theme.spacing(27.9),
-            },
-          }}
-        />
+            width: '100%',
+            aspectRatio: 1.5,
+            maxHeight: theme.spacing(27.9),
+          }}>
+          <Image
+            priority
+            src={campaignImagesUrl}
+            alt={title}
+            fill
+            sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
+            quality={index === 0 ? 100 : 75}
+            style={{ objectFit: 'cover' }}
+          />
+        </Box>
         {campaignState === CampaignState.complete && percentage >= 100 ? (
           <SuccessfullCampaignTag />
         ) : (
diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
index 0ae48ca8c..03dd2f50c 100644
--- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
+++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
@@ -1,7 +1,7 @@
 import { useTranslation, i18n } from 'next-i18next'
 import { CampaignResponse } from 'gql/campaigns'
 
-import { CardMedia } from '@mui/material'
+import { Box, CardMedia } from '@mui/material'
 
 import Link from 'components/common/Link'
 import CampaignProgress from 'components/client/campaigns/CampaignProgress'
@@ -9,6 +9,7 @@ import theme from 'common/theme'
 import { routes } from 'common/routes'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
 import { moneyPublic } from 'common/util/money'
+import Image from 'next/image'
 
 import {
   CampaignTitle,
@@ -34,26 +35,32 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
 
   return (
     <Root data-testid={`completed-campaign-${index}`}>
-      <Link href={routes.campaigns.viewCampaignBySlug(slug)} sx={{ position: 'relative' }}>
-        <CardMedia
-          component="img"
-          height="100%"
-          image={campaignImagesUrl}
-          alt={title}
+      <Link href={routes.campaigns.viewCampaignBySlug(slug)}>
+        <Box
+          position={'relative'}
           sx={{
-            maxHeight: theme.spacing(42.5),
-
+            // aspectRatio: 4 / 3,
+            // [theme.breakpoints.up('lg')]: {
+            //   aspectRatio: 0,
+            //   height: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
+            // },
+            width: '100%',
+            aspectRatio: 1.5,
             [theme.breakpoints.up('lg')]: {
-              aspectRatio: '2',
-              height: theme.spacing(22.3),
-              maxHeight: 'inherit',
-            },
-
-            [theme.breakpoints.up(1430)]: {
-              height: theme.spacing(27.9),
+              maxHeight: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
+              aspectRatio: index === 0 ? 1.24 : 1.55,
             },
-          }}
-        />
+          }}>
+          <Image
+            priority
+            src={campaignImagesUrl}
+            alt={title}
+            fill
+            sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
+            quality={index === 0 ? 100 : 75}
+            style={{ objectFit: 'cover' }}
+          />
+        </Box>
         <StyledContent>
           <SumWrapper>
             <Sum>
diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
index be3077cef..44fe64d6d 100644
--- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
+++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
@@ -26,6 +26,8 @@ import {
   SuccessfullCampiagnText,
 } from './CompletedCampaignsSection.styled'
 
+import Image from 'next/image'
+
 export default function CompletedCampaignsSection() {
   const { t } = useTranslation('campaigns')
   const { data } = useCampaignList()
@@ -51,10 +53,15 @@ export default function CompletedCampaignsSection() {
             <CompletedCampaignLink
               onMouseDown={onLinkMouseDown}
               href={routes.campaigns.viewCampaignBySlug(campaign.slug)}
-              sx={{
-                background: `url(${campaignListPictureUrl(campaign)})`,
-              }}
-            />
+              sx={{ position: 'relative', aspectRatio: 1, height: (theme) => theme.spacing(37.5) }}>
+              <Image
+                fill
+                alt={campaign.title}
+                src={campaignListPictureUrl(campaign)}
+                sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
+                style={{ objectFit: 'cover' }}
+              />
+            </CompletedCampaignLink>
             <CompletedSumWrapper>
               <Sum>
                 {i18n.language === 'bg'