EPMGCIP-125/feature/add-image-gallery (#4)

Co-authored-by: Siarhei Balonikau <[email protected]>

package.json

@@ -17,11 +17,16 @@
     "@contentful/rich-text-html-renderer": "^16.3.4",
     "@contentful/rich-text-react-renderer": "^15.19.4",
     "graphql": "^16.8.1",
+    "fslightbox-react": "^1.7.6",
+    "i": "^0.3.7",
     "i18next": "^23.8.1",
+    "npm": "^10.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.1",
-    "react-router-dom": "^6.21.3"
+    "react-router-dom": "^6.21.3",
+    "react-slick": "^0.30.1",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.2",
@@ -34,9 +39,11 @@
     "@parcel/watcher": "^2.4.0",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
+    "@types/fslightbox-react": "^1.7.7",
     "@types/jest": "^29.5.11",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
+    "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
     "@vitejs/plugin-react": "^4.2.1",

setupTests.ts

@@ -1 +1,7 @@
-
+window.matchMedia = jest.fn().mockImplementation((query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: jest.fn(),
+  removeListener: jest.fn(),
+}))

src/App.test.tsx

@@ -30,6 +30,16 @@ const mocks = [
                   },
                 },
               },
+              imagesCollection: {
+                items: [
+                  {
+                    url: './picture.png',
+                    sys: {
+                      id: '1',
+                    },
+                  },
+                ],
+              },
             },
           ],
         },

src/App.tsx

@@ -3,7 +3,6 @@ import Exhibit from './components/pages/Exhibit/Exhibit.tsx'
 
 function App() {
   const slug = window.location.pathname.split('/').pop()
-
   return (
     <MainTemplate data-testId='app-component'>
       <Exhibit slug={slug || ''} />

src/components/organisms/Header/Header.module.scss

@@ -10,6 +10,6 @@
 }
 
 .logo {
-  width: 44px;
+  width: 68px;
   padding-top: 4px;
 }

src/components/organisms/ImageGallery/ImageGallery.module.css

@@ -0,0 +1,23 @@
+.image {
+  width: 100%;
+  height: 380px;
+  object-fit: cover;
+  object-position: center;
+}
+
+.imageWrapper {
+  margin: 0 8px;
+  border-radius: 28px;
+  overflow: hidden;
+}
+
+.lightboxButton {
+  width: 100%;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
+.lightboxButton:focus {
+  outline: none;
+}

src/components/organisms/ImageGallery/ImageGallery.test.tsx

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react'
+import ImageGallery from './ImageGallery.tsx'
+import '@testing-library/jest-dom'
+
+const images = [
+  {
+    url: './picture1.png',
+    id: '1',
+  },
+  {
+    url: './picture2.png',
+    id: '2',
+  },
+]
+
+describe('ImageGallery', () => {
+  it('renders without crashing', async () => {
+    const { getByTestId } = render(<ImageGallery images={images} />)
+
+    expect(getByTestId('image-gallery-image-0')).toBeInTheDocument()
+  })
+})

src/components/organisms/ImageGallery/ImageGallery.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react'
+import Slider from 'react-slick'
+import FsLightbox from 'fslightbox-react'
+import 'slick-carousel/slick/slick.css'
+import 'slick-carousel/slick/slick-theme.css'
+import styles from './ImageGallery.module.css'
+import BREAKPOINT_TABLE from '../../../constants/breakpoints.ts'
+
+interface Props {
+  images: {
+    url: string
+    id: string
+  }[]
+}
+
+function ImageGallery({ images }: Props) {
+  const [lightboxController, setLightboxController] = useState({
+    toggler: false,
+    slide: 1,
+  })
+  const lighboxImages = images.map((i) => i.url)
+
+  function openLightbox(number: number) {
+    setLightboxController({
+      toggler: !lightboxController.toggler,
+      slide: number,
+    })
+  }
+
+  const imagesList = images.map((image, index) => (
+    <div key={image.id}>
+      <div className={styles.imageWrapper}>
+        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+        <button
+          className={styles.lightboxButton}
+          type='button'
+          onClick={() => openLightbox(index + 1)}
+        >
+          <img
+            data-testid={`image-gallery-image-${index}`}
+            className={styles.image}
+            src={image.url}
+            alt=''
+          />
+        </button>
+      </div>
+    </div>
+  ))
+
+  return (
+    <>
+      <Slider
+        swipeToSlide
+        infinite={false}
+        centerPadding='28px'
+        slidesToShow={3}
+        responsive={[
+          {
+            breakpoint: BREAKPOINT_TABLE,
+            settings: {
+              slidesToShow: 1,
+              centerMode: true,
+            },
+          },
+        ]}
+      >
+        {imagesList}
+      </Slider>
+
+      <FsLightbox
+        toggler={lightboxController.toggler}
+        sources={lighboxImages}
+        slide={lightboxController.slide}
+      />
+    </>
+  )
+}
+
+export default ImageGallery

src/components/pages/Exhibit/Exhibit.gql

@@ -16,6 +16,14 @@ query GetExhibit($slug: String!) {
           }
         }
       }
+      imagesCollection(limit: 5) {
+        items {
+          url
+          sys {
+            id
+          }
+        }
+      }
     }
   }
 }

src/components/pages/Exhibit/Exhibit.module.scss

@@ -1,33 +1,47 @@
 @import '../../../variables.scss';
 
 .exhibit {
-  padding: 40px $indentMobilePageBorder;
+  padding: 40px 0;
   font-size: $fontSizeDefault;
-
-  @media (min-width: $breakpointTablet) {
-    padding: 40px $indentTabletPageBorder;
-  }
 }
 
 .title {
   margin: 0 0 12px 0;
+  padding: 0 $indentMobilePageBorder;
   text-align: center;
   font-weight: bold;
   font-size: $fontSizeExtraLarge;
+
+  @media (min-width: $breakpointTablet) {
+    padding: 0 $indentTabletPageBorder;
+  }
 }
 
 .author {
-  padding-bottom: 24px;
+  padding: 0 $indentMobilePageBorder 32px $indentMobilePageBorder;
   text-align: center;
   font-size: $fontSizeDefault;
+
+  @media (min-width: $breakpointTablet) {
+    padding: 0 $indentTabletPageBorder 32px $indentTabletPageBorder;
+  }
 }
 
 .description {
-  padding-bottom: 24px;
+  padding: 0 $indentMobilePageBorder 24px $indentMobilePageBorder;
+
+  @media (min-width: $breakpointTablet) {
+    padding: 0 $indentTabletPageBorder 24px $indentTabletPageBorder;
+  }
 }
 
 .descriptionName {
   padding-bottom: 8px;
   font-size: $fontSizeSmall;
   font-weight: bold;
 }
+
+.gallery {
+  padding-bottom: 40px;
+  overflow: hidden;
+}

src/components/pages/Exhibit/Exhibit.test.tsx

@@ -30,6 +30,16 @@ const mocks = [
                   },
                 },
               },
+              imagesCollection: {
+                items: [
+                  {
+                    url: './picture.png',
+                    sys: {
+                      id: '1',
+                    },
+                  },
+                ],
+              },
             },
           ],
         },

src/components/pages/Exhibit/Exhibit.tsx

@@ -3,6 +3,7 @@ import { useGetExhibitQuery } from '../../../../__generated__/schema.tsx'
 import Error from '../../atoms/Error/Error.tsx'
 import styles from './Exhibit.module.scss'
 import Loading from '../../atoms/Loading/Loading.tsx'
+import ImageGallery from '../../organisms/ImageGallery/ImageGallery.tsx'
 
 interface Props {
   slug: string
@@ -14,6 +15,12 @@ export default function Exhibit({ slug }: Props) {
   })
   const exhibit = data?.exhibitCollection?.items[0]
 
+  const images =
+    exhibit?.imagesCollection?.items.map((i) => ({
+      url: i?.url || '',
+      id: i?.sys.id || '',
+    })) || []
+
   if (error || (!exhibit && !loading)) {
     return <Error message='Exhibit can not found' />
   }
@@ -30,6 +37,12 @@ export default function Exhibit({ slug }: Props) {
         <div className={styles.author}>{exhibit?.authorEn}</div>
       )}
 
+      {images.length > 0 && (
+        <div className={styles.gallery}>
+          <ImageGallery images={images} />
+        </div>
+      )}
+
       {exhibit?.yearOfCreation && (
         <div className={styles.description}>
           <div className={styles.descriptionName}>Year</div>

src/constants/breakpoints.ts

@@ -0,0 +1,2 @@
+const BREAKPOINT_TABLE = 834
+export default BREAKPOINT_TABLE