Merge pull request #928 from prezly/fix/care-5740-media-gallery-bookm…

…arks-show-null-where-gallery-has-no

[CARE-5740] Fix media gallery page meta description

package.json

@@ -31,12 +31,12 @@
     "@headlessui/react": "1.7.18",
     "@playwright/test": "^1.33.0",
     "@prezly/analytics-nextjs": "3.0.0",
-    "@prezly/content-renderer-react-js": "0.38.4",
-    "@prezly/sdk": "21.0.0",
+    "@prezly/content-renderer-react-js": "0.38.6",
+    "@prezly/sdk": "21.9.0",
     "@prezly/story-content-format": "0.65.1",
-    "@prezly/theme-kit-core": "7.4.0",
-    "@prezly/theme-kit-intl": "7.4.0",
-    "@prezly/theme-kit-nextjs": "7.4.2",
+    "@prezly/theme-kit-core": "7.5.1",
+    "@prezly/theme-kit-intl": "7.5.1",
+    "@prezly/theme-kit-nextjs": "7.5.1",
     "@prezly/uploadcare": "2.4.3",
     "@prezly/uploadcare-image": "0.3.2",
     "@react-hookz/web": "14.7.1",

pages/media/album/[uuid].tsx

@@ -1,8 +1,11 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { NewsroomGallery } from '@prezly/sdk';
 import { getAssetsUrl, getGalleryThumbnail } from '@prezly/theme-kit-core';
+import { translations } from '@prezly/theme-kit-intl';
 import type { GalleryAlbumPageProps } from '@prezly/theme-kit-nextjs/server';
 import { getGalleryAlbumPageServerSideProps } from '@prezly/theme-kit-nextjs/server';
 import dynamic from 'next/dynamic';
-import type { FunctionComponent } from 'react';
+import { useIntl } from 'react-intl';
 
 import Layout from '@/modules/Layout';
 import { importMessages, isTrackingEnabled } from '@/utils';
@@ -12,19 +15,21 @@ const Gallery = dynamic(() => import('@/modules/Gallery'), { ssr: true });
 
 type Props = BasePageProps & GalleryAlbumPageProps;
 
-const GalleryPage: FunctionComponent<Props> = ({ gallery }) => {
+export default function GalleryPage({ gallery }: Props) {
     const { name } = gallery;
     const galleryThumbnail = getGalleryThumbnail(gallery);
+    const metaDescription = useGalleryPageMetaDescription(gallery);
 
     return (
         <Layout
             title={name}
             imageUrl={galleryThumbnail ? getAssetsUrl(galleryThumbnail.uuid) : undefined}
+            description={metaDescription}
         >
             <Gallery gallery={gallery} />
         </Layout>
     );
-};
+}
 
 export const getServerSideProps = getGalleryAlbumPageServerSideProps<BasePageProps>(
     async (context, { newsroomContextProps }) => ({
@@ -33,4 +38,24 @@ export const getServerSideProps = getGalleryAlbumPageServerSideProps<BasePagePro
     }),
 );
 
-export default GalleryPage;
+function useGalleryPageMetaDescription(gallery: NewsroomGallery) {
+    const { formatMessage } = useIntl();
+    const description = gallery.description?.trim() ?? '';
+
+    if (gallery.type === NewsroomGallery.Type.IMAGE) {
+        const imagesCount = formatMessage(translations.mediaGallery.imagesCount, {
+            imagesCount: gallery.images_number,
+        });
+
+        return [imagesCount, description].filter(Boolean).join(' - ');
+    }
+
+    if (gallery.type === NewsroomGallery.Type.VIDEO) {
+        const videosCount = formatMessage(translations.mediaGallery.videosCount, {
+            videosCount: gallery.videos_number,
+        });
+        return [videosCount, description].filter(Boolean).join(' - ');
+    }
+
+    return description;
+}