Image carousel revive (#763)

* feat: revive image carousel

* Display gallery on home page

---------

Co-authored-by: Horváth István <[email protected]>

Author: berenteb

frontend/src/api/contexts/config/types.ts

@@ -23,6 +23,7 @@ export interface Components {
   extraPage: ExtraPage
   groupselection: GroupSelection
   home: Home
+  gallery: Gallery
   impressum: Impressum
   leaderboard: Leaderboard
   location: Location
@@ -108,6 +109,11 @@ export interface Home {
   youtubeVideoIds: string
   showEvents: boolean
   showNews: boolean
+  showGalleryImages: boolean
+}
+
+export interface Gallery {
+  title: string
 }
 
 export interface News {

frontend/src/api/hooks/gallery/useHomeGallery.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query'
+import { QueryKeys } from '../queryKeys.ts'
+import axios from 'axios'
+import { ApiPaths } from '../../../util/paths.ts'
+import { GalleryView } from '../../../util/views/gallery.view.ts'
+
+export const useHomeGallery = () => {
+  return useQuery<GalleryView, Error>({
+    queryKey: [QueryKeys.HOME_GALLERY],
+    queryFn: async () => {
+      const response = await axios.get<GalleryView>(ApiPaths.HOME_GALLERY)
+      return response.data
+    }
+  })
+}

frontend/src/api/hooks/queryKeys.ts

@@ -29,5 +29,6 @@ export enum QueryKeys {
   ORGANIZATION = 'ORGANIZATION',
   ACCESS_KEY = 'ACCESS_KEY',
   HOME_NEWS = 'HOME_NEWS',
-  DEBTS = 'DEBTS'
+  DEBTS = 'DEBTS',
+  HOME_GALLERY = 'HOME_GALLERY'
 }

frontend/src/pages/home/components/ImageCarousel.tsx

@@ -1,14 +1,14 @@
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
-import { Box, Button, ButtonGroup, Flex, Image, useColorModeValue } from '@chakra-ui/react'
+import { Box, Button, ButtonGroup, Flex, IconButton, Image } from '@chakra-ui/react'
 import { useState } from 'react'
-import { MapImageView } from '../../../util/views/mapImage.view'
 
 type ImageCarouselProps = {
-  images: MapImageView[]
+  images: string[]
 }
 
 export const ImageCarousel = ({ images }: ImageCarouselProps) => {
   const [currentImageIndex, setCurrentImageIndex] = useState<number>(0)
+
   const previousImage = () => {
     const previousIndex = currentImageIndex - 1
     setCurrentImageIndex(previousIndex < 0 ? images.length - 1 : previousIndex)
@@ -18,28 +18,31 @@ export const ImageCarousel = ({ images }: ImageCarouselProps) => {
     setCurrentImageIndex(nextIndex > images.length - 1 ? 0 : nextIndex)
   }
   if (images.length === 0) return null
+
   return (
-    <Box marginTop={10}>
-      {images.map((image, index) => (
-        <Image
-          key={index}
-          src={useColorModeValue(image.light, image.dark)}
-          w="100%"
-          maxH="50rem"
-          objectFit="contain"
-          display={index === currentImageIndex ? 'block' : 'none'}
-        />
-      ))}
-      <Flex marginTop={5} justify="space-between">
+    <Flex flexDirection="column" marginTop={10} overflowX="clip">
+      <Flex
+        width={`${images.length * 100}%`}
+        flexDirection="row"
+        transform={`translateX(-${(currentImageIndex / images.length) * 100}%)`}
+        transition="transform .5s"
+      >
+        {images.map((image) => (
+          <Box flex={1} key={image} alignItems="center" display="flex">
+            <Image src={image} w="100%" maxH="50rem" objectFit="contain" objectPosition="center" />
+          </Box>
+        ))}
+      </Flex>
+      <Flex paddingTop={5} alignItems="center" justify="space-between">
         <DirectionButton direction={Directions.LEFT} onClick={previousImage} />
-        <ButtonGroup>
+        <ButtonGroup display="flex" alignItems="center">
           {images.map((_image, index) => (
             <CurrentImageIndicatorDot key={index} index={index} currentIndex={currentImageIndex} onClick={setCurrentImageIndex} />
           ))}
         </ButtonGroup>
         <DirectionButton direction={Directions.RIGHT} onClick={nextImage} />
       </Flex>
-    </Box>
+    </Flex>
   )
 }
 
@@ -51,17 +54,17 @@ type CurrentImageIndicatorDotProps = {
 
 const CurrentImageIndicatorDot = ({ index, currentIndex, onClick }: CurrentImageIndicatorDotProps) => (
   <Button
-    height={10}
-    width={10}
+    height="10px"
+    width="10px"
     padding={0}
     borderWidth={2}
     borderStyle="solid"
-    borderColor="gray.500"
+    borderColor="brand.500"
     borderRadius="full"
     cursor="pointer"
     transition="border-width .1s"
     _hover={{ borderWidth: 10 }}
-    backgroundColor={index === currentIndex ? 'gray.500' : 'transparent'}
+    backgroundColor={index === currentIndex ? 'brand.500' : 'transparent'}
     onClick={() => {
       onClick(index)
     }}
@@ -78,7 +81,12 @@ enum Directions {
 }
 
 const DirectionButton = ({ direction, onClick }: DirectionButtonProps) => (
-  <Button onClick={onClick} fontSize="6xl" padding={0} variant="ghost" color="gray.500">
-    {direction === Directions.LEFT ? <ChevronLeftIcon /> : <ChevronRightIcon />}
-  </Button>
+  <IconButton
+    icon={direction === Directions.LEFT ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+    colorScheme="brand"
+    onClick={onClick}
+    padding={0}
+    variant="ghost"
+    aria-label={direction === Directions.LEFT ? 'Előző kép' : 'következő kép'}
+  />
 )

frontend/src/pages/home/home.page.tsx

@@ -14,11 +14,14 @@ import { NewsArticleView } from '../../util/views/news.view'
 import Clock from '../countdown/components/clock'
 import NewsListItem from '../news/components/NewsListItem'
 import { EmbeddedVideo } from './components/EmbeddedVideo'
+import { ImageCarousel } from './components/ImageCarousel.tsx'
 import { Schedule } from './components/Schedule'
+import { useHomeGallery } from '../../api/hooks/gallery/useHomeGallery.ts'
 
 const HomePage = () => {
   const homeNews = useHomeNews()
   const eventList = useEventListQuery()
+  const homeGallery = useHomeGallery()
   const config = useConfigContext()
   const countdownConfig = config?.components.countdown
   const homeConfig = config?.components.home
@@ -128,6 +131,10 @@ const HomePage = () => {
           </VStack>
         </VStack>
       )}
+
+      {homeConfig.showGalleryImages && config.components.gallery && homeGallery.data && (
+        <ImageCarousel images={homeGallery.data?.photos?.map((item) => item.url) ?? []} />
+      )}
     </CmschPage>
   )
 }

frontend/src/util/paths.ts

@@ -88,6 +88,7 @@ export enum ApiPaths {
   ORGANIZATION = '/api/organization',
   ACCESS_KEY = '/api/access-key',
   HOME_NEWS = '/api/home/news',
+  HOME_GALLERY = '/api/gallery/home',
   ADD_PUSH_NOTIFICATION_TOKEN = '/api/pushnotification/add-token',
   DELETE_PUSH_NOTIFICATION_TOKEN = '/api/pushnotification/delete-token',
   MY_TEAM = '/api/team/my',

frontend/src/util/views/gallery.view.ts

@@ -0,0 +1,10 @@
+export type GalleryView = {
+  photos: GalleryItemView[]
+}
+
+export type GalleryItemView = {
+  title: string
+  highlighted: boolean
+  showOnHomePage: boolean
+  url: string
+}