Merge pull request #610 from Alt-Org/nikolas/feature/603-implement-directus-to-gallery-page

Rutjake · web-flow · commit 589926644473 · 2026-01-05T14:50:18.000+02:00
Nikolas/feature/603 implement directus to gallery page
diff --git a/frontend-next-migration/src/entities/Gallery/api/galleryApi.ts b/frontend-next-migration/src/entities/Gallery/api/galleryApi.ts
@@ -46,11 +46,13 @@ const galleryApi = directusApi.injectEndpoints({
                             'category.translations.*',
                             'full.translations.*',
                             'preview.translations.*',
+                            'translations.*',
                         ],
                         deep: {
                             category: { translations: true },
                             preview: { translations: true },
                             full: { translations: true },
+                            translations: true,
                         },
                     }),
                 );
diff --git a/frontend-next-migration/src/entities/Gallery/api/translations.ts b/frontend-next-migration/src/entities/Gallery/api/translations.ts
@@ -1,4 +1,8 @@
-import { PhotoVersionTranslations, CategoryTranslations } from '../types/gallery';
+import {
+    PhotoVersionTranslations,
+    CategoryTranslations,
+    PhotoObjectTranslations,
+} from '../types/gallery';
 
 export const getLanguageCode = (language: string): string => {
     return language === 'en' ? 'en-US' : language === 'fi' ? 'fi-FI' : 'default';
@@ -27,3 +31,20 @@ export const getPhotoVersionTranslation = (
 ) => {
     return getTranslation(translations, languageCode, 'altText', '');
 };
+
+export const getPhotoObjectTexts = (
+    translations: PhotoObjectTranslations[] = [],
+    languageCode: string,
+) => {
+    if (!translations || translations.length === 0) {
+        return { title: '', author: '', description: '' };
+    }
+
+    const tr = translations.find((t) => t.languages_code === languageCode) ?? translations[0];
+
+    return {
+        title: tr.title ?? '',
+        author: tr.author ?? '',
+        description: tr.description ?? '',
+    };
+};
diff --git a/frontend-next-migration/src/entities/Gallery/api/useGetDirectusGalleryImages.test.ts b/frontend-next-migration/src/entities/Gallery/api/useGetDirectusGalleryImages.test.ts
@@ -16,6 +16,7 @@ jest.mock('../api/galleryCategoriesApi', () => ({
 jest.mock('../api/translations', () => ({
     getPhotoVersionTranslation: jest.fn(),
     getCategoryTranslation: jest.fn(),
+    getPhotoObjectTexts: jest.fn(() => ({ title: '', author: '', description: '' })),
 }));
 
 jest.mock('@/shared/const/envHelper', () => ({
diff --git a/frontend-next-migration/src/entities/Gallery/api/useGetDirectusGalleryImages.ts b/frontend-next-migration/src/entities/Gallery/api/useGetDirectusGalleryImages.ts
@@ -1,7 +1,7 @@
 import { envHelper } from '@/shared/const/envHelper';
 import { useMemo } from 'react';
 import { Category, PhotoObject, PhotoVersion } from '../types/gallery';
-import { getPhotoVersionTranslation } from '../api/translations';
+import { getPhotoVersionTranslation, getPhotoObjectTexts } from '../api/translations';
 import { useGetGalleryCategoriesQuery } from '../api/galleryCategoriesApi';
 import { useGetPhotoObjectsQuery, useGetPhotoVersionsQuery } from '../api/galleryApi';
 
@@ -62,34 +62,52 @@ export const useGetDirectusGalleryImages = (lng: string) => {
             height: item.height,
             altText: getPhotoVersionTranslation(item.translations || [], lng),
         }));
-    }, [pvData]);
+    }, [pvData, lng]);
 
     const photoObjects: PhotoObject[] = useMemo(() => {
         if (!poData) return [];
-        return poData.map((item) => ({
-            id: item.id,
-            category: {
-                id: item.category.id,
-                translations: item.category.translations,
-            },
-            versions: {
-                preview: {
-                    id: item.preview.id,
-                    image: `${directusBaseUrl}/assets/${item.preview.image}`,
-                    width: item.preview.width,
-                    height: item.preview.height,
-                    altText: getPhotoVersionTranslation(item.preview.translations || [], lng),
-                },
-                full: {
-                    id: item.full.id,
-                    image: `${directusBaseUrl}/assets/${item.full.image}`,
-                    width: item.full.width,
-                    height: item.full.height,
-                    altText: getPhotoVersionTranslation(item.full.translations || [], lng),
-                },
-            },
-        }));
-    }, [poData, directusBaseUrl]);
+        return poData.map((item) => {
+            const texts = getPhotoObjectTexts(item.translations || [], lng);
+
+            return {
+                id: item.id,
+                title: texts.title || item.title,
+                author: texts.author || item.author,
+                description: texts.description || item.description,
+                category: item.category
+                    ? {
+                          id: item.category.id,
+                          translations: item.category.translations,
+                      }
+                    : undefined,
+                versions:
+                    item.preview && item.full
+                        ? {
+                              preview: {
+                                  id: item.preview.id,
+                                  image: `${directusBaseUrl}/assets/${item.preview.image}`,
+                                  width: item.preview.width,
+                                  height: item.preview.height,
+                                  altText: getPhotoVersionTranslation(
+                                      item.preview.translations || [],
+                                      lng,
+                                  ),
+                              },
+                              full: {
+                                  id: item.full.id,
+                                  image: `${directusBaseUrl}/assets/${item.full.image}`,
+                                  width: item.full.width,
+                                  height: item.full.height,
+                                  altText: getPhotoVersionTranslation(
+                                      item.full.translations || [],
+                                      lng,
+                                  ),
+                              },
+                          }
+                        : undefined,
+            };
+        });
+    }, [poData, directusBaseUrl, lng]);
 
     return { photoVersions, categories, photoObjects, error, isLoading };
 };
diff --git a/frontend-next-migration/src/entities/Gallery/types/gallery.d.ts b/frontend-next-migration/src/entities/Gallery/types/gallery.d.ts
@@ -29,6 +29,15 @@ export interface PhotoVersionTranslations {
     altText: string;
 }
 
+export interface PhotoObjectTranslations {
+    id: string;
+    languages_code: string;
+    photo_object_id: string;
+    title?: string;
+    author?: string;
+    description?: string;
+}
+
 export interface Category {
     id: string;
     translations: CategoryTranslations[];
@@ -44,11 +53,12 @@ export interface PhotoVersion {
 
 export interface PhotoObject {
     title?: string;
+    author?: string;
     description?: string;
-    supDescription?: string;
     frames?: string[][];
     id?: string;
     category?: Category;
+    translations?: PhotoObjectTranslations[];
     versions?: {
         preview: PhotoVersion;
         full: PhotoVersion;
diff --git a/frontend-next-migration/src/preparedPages/PictureGalleryPages/ui/PictureGalleryPage.tsx b/frontend-next-migration/src/preparedPages/PictureGalleryPages/ui/PictureGalleryPage.tsx
@@ -1,10 +1,12 @@
 'use client';
 import React, { useState, useMemo } from 'react';
-import firstImg from '@/shared/assets/images/gallery/Frame 523.png';
-import secindtImg from '@/shared/assets/images/gallery/Frame 524.png';
-import thirdtImg from '@/shared/assets/images/gallery/Frame 525.png';
 import { AnimationGallerySection } from '@/widgets/SectionGallery/ui/SectionGalleryV2/SectionGallery';
-import { PhotoObject } from '@/entities/Gallery';
+import {
+    getLanguageCode,
+    PhotoObject,
+    useGetDirectusGalleryImages,
+    getCategoryTranslation,
+} from '@/entities/Gallery';
 import { Container } from '@/shared/ui/Container';
 import cls from './PictureGalleryPage.module.scss';
 import { useClientTranslation } from '@/shared/i18n';
@@ -14,7 +16,7 @@ import { PageTitle } from '@/shared/ui/PageTitle';
 import { classNames } from '@/shared/lib/classNames/classNames';
 // import buttonImg from '@/shared/assets/images/gallery/Frame 526.png';
 // import { SectionGalleryV2 } from '@/widgets/SectionGallery';
-// import { useParams } from 'next/navigation';
+import { useParams } from 'next/navigation';
 // import { useGetDirectusGalleryImages, getLanguageCode, getCategoryTranslation, } from '@/entities/Gallery';
 
 export interface Props {
@@ -51,51 +53,71 @@ export interface Props {
     if (isLoading) <p>Loading...</p>;
     */
 
-// Dummy data for filteredImages to avoid errors
-const images: PhotoObject[] = [
-    {
-        title: 'Valveenvälttelijä',
-        description:
-            'Tekijä: Netti-C Samu (tähän kohtaan tekijän oikea nimi tai haluttu taiteilijanimi)',
-        supDescription: 'Tähän lisää tekstiä jos tekijä haluaa selittää prosessistaan.',
-        frames: [[firstImg.src, secindtImg.src, thirdtImg.src]],
-    },
-    {
-        title: 'Valveenvälttelijä',
-        description:
-            'Tekijä: Netti-C Samu (tähän kohtaan tekijän oikea nimi tai haluttu taiteilijanimi)',
-        supDescription: 'Tähän lisää tekstiä jos tekijä haluaa selittää prosessistaan.',
-        frames: [[firstImg.src, secindtImg.src, thirdtImg.src]],
-    },
-    {
-        title: 'Valveenvälttelijä',
-        description:
-            'Tekijä: Netti-C Samu (tähän kohtaan tekijän oikea nimi tai haluttu taiteilijanimi)',
-        supDescription: 'Tähän lisää tekstiä jos tekijä haluaa selittää prosessistaan.',
-        frames: [[firstImg.src, secindtImg.src, thirdtImg.src]],
-    },
-];
-
 const PictureGalleryPage = () => {
     const { t } = useClientTranslation('picture-galleries');
     const { isMobileSize, isDesktopSize, isWidescreenSize } = useSizes();
     const [searchQuery, setSearchQuery] = useState('');
+
+    const params = useParams();
+    const lng = params.lng as string;
+    const categorySlug = params.category as string | undefined;
+
+    const languageCode = getLanguageCode(lng);
+    const { photoObjects, isLoading, error } = useGetDirectusGalleryImages(languageCode);
+
     const isBigDevice = isDesktopSize || isWidescreenSize;
+    const allCategory = lng === 'en' ? 'all' : 'kaikki';
 
     const showCreativity = useMemo(
         () => !isMobileSize && searchQuery.length === 0,
         [isMobileSize, searchQuery],
     );
 
-    // Filter images by search query matching title, description or supDescription (case-insensitive)
-    const filteredImages = useMemo(() => {
+    // filter images by category from URL params
+    const categoryFilteredImages: PhotoObject[] = useMemo(() => {
+        if (!photoObjects) return [];
+        if (!categorySlug || categorySlug === allCategory) {
+            return photoObjects;
+        }
+
+        return photoObjects.filter((photo) => {
+            if (!photo.category) return false;
+            const translatedCategory = getCategoryTranslation(
+                photo.category.translations,
+                languageCode,
+            );
+            return translatedCategory === categorySlug;
+        });
+    }, [photoObjects, categorySlug, allCategory, languageCode]);
+
+    const filteredImages: PhotoObject[] = useMemo(() => {
         const query = searchQuery.trim().toLowerCase();
-        if (!query) return images;
-        return images.filter((photo) => {
-            const fields = [photo.title, photo.description, photo.supDescription];
+        if (!query) return categoryFilteredImages;
+        return categoryFilteredImages.filter((photo) => {
+            const fields = [photo.title, photo.author, photo.description];
             return fields.some((find) => (find || '').toLowerCase().includes(query));
         });
-    }, [searchQuery]);
+    }, [searchQuery, categoryFilteredImages]);
+
+    if (isLoading) {
+        return (
+            <div className={cls.Wrapper}>
+                <Container className={cls.Container}>
+                    <p>{t('loading') ?? 'Loading...'}</p>
+                </Container>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className={cls.Wrapper}>
+                <Container className={cls.Container}>
+                    <p>{t('error-text') ?? 'Error loading gallery.'}</p>
+                </Container>
+            </div>
+        );
+    }
 
     return (
         <div className={cls.Wrapper}>
@@ -130,9 +152,14 @@ const PictureGalleryPage = () => {
                     animations={filteredImages.map((photo) => ({
                         // Adjust these mappings as needed based on your PhotoObject and FrameSet definitions
                         title: photo.title || '',
+                        author: photo.author || '',
                         description: photo.description || '',
-                        supDescription: photo.supDescription || '',
-                        frames: photo.frames || [],
+                        frames:
+                            photo.frames && photo.frames.length > 0
+                                ? photo.frames
+                                : photo.versions?.preview
+                                  ? [[photo.versions.preview.image]]
+                                  : [],
                         // Add other FrameSet properties if required
                     }))}
                 />
diff --git a/frontend-next-migration/src/widgets/SectionGallery/ui/SectionGalleryV2/SectionGallery.tsx b/frontend-next-migration/src/widgets/SectionGallery/ui/SectionGalleryV2/SectionGallery.tsx
@@ -7,8 +7,8 @@ import Image from 'next/image';
 
 interface FrameSet {
     title: string;
+    author: string;
     description: string;
-    supDescription: string;
     frames: string[][]; // each row is an array of image paths
 }
 
@@ -35,8 +35,8 @@ export const AnimationGallerySection = ({ animations }: AnimationGalleryProps) =
                 >
                     <div className={cls.textBlock}>
                         <h1 className={cls.title}>{set.title}</h1>
+                        <p className={cls.author}>{set.author}</p>
                         <p className={cls.description}>{set.description}</p>
-                        <p className={cls.supdescription}>{set.supDescription}</p>
                     </div>
                     <div className={cls.framesContainer}>
                         {set.frames.map((row, rowIndex) => (
@@ -52,8 +52,8 @@ export const AnimationGallerySection = ({ animations }: AnimationGalleryProps) =
                                         <Image
                                             src={imgSrc}
                                             alt={`Frame ${imgIndex}`}
-                                            width={1000}
-                                            height={100}
+                                            fill
+                                            sizes="(max-width: 768px) 100vw, 33vw"
                                             className={cls.frameImage}
                                         />
                                     </div>
diff --git a/frontend-next-migration/src/widgets/SectionGallery/ui/SectionGalleryV2/SectionGallery2.module.scss b/frontend-next-migration/src/widgets/SectionGallery/ui/SectionGalleryV2/SectionGallery2.module.scss
