Implement fullscreen image slider when image is clicked (#1676)

Currently we don't have a gallery component, and when image is uploaded with role==gallery those images remain unusable on larger screens, due to their small size
This commit makes it so a full-screen gallery like is opened whenever an image with role==gallery is clicked.

src/common/util/campaignImageUrls.ts

@@ -1,6 +1,6 @@
 import getConfig from 'next/config'
 import { CampaignFile, CampaignResponse } from 'gql/campaigns'
-import { CampaignFileRole } from 'components/common/campaign-file/roles'
+import { CampaignFileRole, ImageSlider } from 'components/common/campaign-file/roles'
 
 const { publicRuntimeConfig } = getConfig()
 
@@ -18,16 +18,21 @@ function findFileWithRole(campaign: CampaignResponse, role: CampaignFileRole) {
 /**
  * Finds all files with given role
  */
-function filterFilesWithRole(campaign: CampaignResponse, role: CampaignFileRole) {
-  return campaign?.campaignFiles?.filter((file) => file.role == role)
-}
-
-export function campaignSliderUrls(campaign: CampaignResponse): string[] {
-  const files = filterFilesWithRole(campaign, CampaignFileRole.campaignPhoto)
-  if (files && files.length > 0) {
-    return files.map((file) => fileUrl(file))
-  }
-  return []
+function filterFilesWithRole(campaign: CampaignResponse, role: CampaignFileRole[]) {
+  return campaign.campaignFiles.filter((file) => role.includes(file.role))
+}
+
+export function campaignSliderUrls(campaign: CampaignResponse): ImageSlider[] {
+  const sliderImageRoles = [CampaignFileRole.campaignPhoto, CampaignFileRole.gallery]
+  const files = filterFilesWithRole(campaign, sliderImageRoles)
+  const fileExtensionRemoverRegex = /.\w*$/
+  return files.map((file) => {
+    return {
+      id: file.id,
+      src: `${publicRuntimeConfig.API_URL}/campaign-file/${file.id}`,
+      fileName: file.filename.replace(fileExtensionRemoverRegex, ''),
+    }
+  })
 }
 
 export function campaignListPictureUrl(campaign: CampaignResponse): string {

src/common/util/newsFilesUrls.ts

@@ -20,12 +20,14 @@ export function GetArticleDocuments(files: CampaignNewsFile[]) {
 }
 
 export function GetArticleGalleryPhotos(files: CampaignNewsFile[]) {
+  const fileExtensionRemoverRegex = /.\w*$/
   return files
     .filter((file) => file.role === CampaignFileRole.gallery)
     .map((file) => {
       return {
         id: file.id,
-        imgSource: `${publicRuntimeConfig.API_URL}/campaign-news-file/${file.id}`,
+        src: `${publicRuntimeConfig.API_URL}/campaign-news-file/${file.id}`,
+        fileName: file.filename.replace(fileExtensionRemoverRegex, ''),
       }
     })
 }

src/components/client/campaign-news/CampaignNewsList.tsx

@@ -17,6 +17,8 @@ import { QuillStypeWrapper } from 'components/common/QuillStyleWrapper'
 import { scrollToTop } from './utils/scrollToTop'
 import { getArticleHeight } from './utils/getArticleHeight'
 
+import withFullScreenSlider from 'components/common/withFullScreenSlider'
+
 const PREFIX = 'CampaignNewsSection'
 const classes = {
   defaultPadding: `${PREFIX}-defaultPadding`,
@@ -81,7 +83,7 @@ export default function CampaignNewsList({ articles }: Props) {
   const { t, i18n } = useTranslation('news')
   const INITIAL_HEIGHT_LIMIT = 400
   const [isExpanded, expandContent] = useShowMoreContent()
-
+  const WithFullScreenSlider = withFullScreenSlider(Image)
   return (
     <>
       {articles?.map((article, index: number) => {
@@ -154,13 +156,25 @@ export default function CampaignNewsList({ articles }: Props) {
                   </Grid>
                 </Grid>
                 {article.newsFiles.length > 0 && (
-                  <Grid container item gap={1} xs={'auto'} style={{ maxWidth: '100%' }}>
-                    {images.map((file) => (
-                      <Grid item key={file.id}>
-                        <Image src={file.imgSource} width={220} height={120} alt={file.id} />
-                      </Grid>
-                    ))}
-                  </Grid>
+                  <>
+                    <Grid container item gap={1} xs={'auto'} style={{ maxWidth: '100%' }}>
+                      {images.map((file, index) => {
+                        return (
+                          <Grid item key={file.id}>
+                            <WithFullScreenSlider
+                              images={images}
+                              src={file.src}
+                              width={220}
+                              height={140}
+                              alt={file.fileName}
+                              index={index}
+                              style={{ objectFit: 'scale-down' }}
+                            />
+                          </Grid>
+                        )
+                      })}
+                    </Grid>
+                  </>
                 )}
               </Grid>
               {getArticleHeight(article.id) > INITIAL_HEIGHT_LIMIT && (

src/components/client/campaign-news/SingleArticlePage.tsx

@@ -143,7 +143,7 @@ export default function SingleArticlePage({ slug }: Props) {
             <Grid container item gap={1} xs={'auto'} style={{ maxWidth: '100%' }}>
               {images.map((file) => (
                 <Grid item key={file.id}>
-                  <Image src={file.imgSource} width={220} height={120} alt={file.id} />
+                  <Image src={file.src} width={220} height={120} alt={file.id} />
                 </Grid>
               ))}
             </Grid>

src/components/client/campaigns/CampaignDetails.tsx

@@ -12,7 +12,7 @@ import SecurityIcon from '@mui/icons-material/Security'
 import { styled } from '@mui/material/styles'
 
 import DonationWishes from './DonationWishes'
-import CampaignSlider from './CampaignSlider'
+import CampaignImageSlider from 'components/common/CampaignImageSlider'
 import CampaignInfo from './CampaignInfo/CampaignInfo'
 import CampaignInfoGraphics from './CampaignInfoGraphics'
 import CampaignInfoOperator from './CampaignInfoOperator'
@@ -128,7 +128,7 @@ export default function CampaignDetails({ campaign }: Props) {
           <ReactQuill readOnly theme="bubble" value={campaign.description} />
         </Grid>
         <Grid item xs={12}>
-          <CampaignSlider sliderImages={sliderImages} />
+          <CampaignImageSlider sliderImages={sliderImages} />
         </Grid>
         <Grid item xs={12}>
           <Divider />

src/components/client/campaigns/CampaignNewsSection.tsx

@@ -28,6 +28,7 @@ import { sanitizeHTML } from 'common/util/htmlUtils'
 import { QuillStypeWrapper } from 'components/common/QuillStyleWrapper'
 import { scrollToTop } from '../campaign-news/utils/scrollToTop'
 import { getArticleHeight } from '../campaign-news/utils/getArticleHeight'
+import withFullScreenSlider from 'components/common/withFullScreenSlider'
 
 const PREFIX = 'NewsTimeline'
 
@@ -160,6 +161,7 @@ type Props = {
 export default function CampaignNewsSection({ campaign, canCreateArticle }: Props) {
   const { t, i18n } = useTranslation('news')
   const { small }: { small: boolean } = useMobile()
+  const WithFullScreenSlider = withFullScreenSlider(Image)
 
   const INITIAL_HEIGHT_LIMIT = 200
   const [isExpanded, expandContent] = useShowMoreContent()
@@ -297,16 +299,20 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop
                             ))}
                           </Grid>
                           <Grid container item gap={1}>
-                            {images.map((file) => (
-                              <Grid item key={file.id}>
-                                <Image
-                                  src={file.imgSource}
-                                  width={164}
-                                  height={120}
-                                  alt={file.id}
-                                />
-                              </Grid>
-                            ))}
+                            {images.map((file, index) => {
+                              return (
+                                <Grid item key={file.id}>
+                                  <WithFullScreenSlider
+                                    images={images}
+                                    src={file.src}
+                                    width={164}
+                                    height={120}
+                                    alt={file.id}
+                                    index={index}
+                                  />
+                                </Grid>
+                              )
+                            })}
                           </Grid>
                         </Grid>
                       )}

src/components/client/campaigns/StatisticsPage.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'next-i18next'
 
 import { useViewCampaign } from 'common/hooks/campaigns'
 import Layout from 'components/client/layout/Layout'
-import CenteredSpinner from 'components/common/CenteredSpinner'
 import NotFoundPage from 'pages/404'
 import CumulativeDonationsChart from './CampaignStatistics/CumulativeDonationsChart'
 import GroupedDonationsChart from './CampaignStatistics/GroupedDonationsChart'
@@ -19,13 +18,7 @@ type Props = { slug: string }
 export default function StatisticsPage({ slug }: Props) {
   const { t } = useTranslation()
   const { data: campaignResponse, isLoading, isError } = useViewCampaign(slug)
-  if (isLoading || !campaignResponse)
-    return (
-      <>
-        {/* {isLoading && <CenteredSpinner size={'2rem'} />} */}
-        {isError && <NotFoundPage />}
-      </>
-    )
+  if (isLoading || !campaignResponse) return <>{isError && <NotFoundPage />}</>
 
   const campaign = campaignResponse.campaign
   const campaignTitle = campaign.title