Skip to content

Commit

Permalink
refactor(LightboxJavascript): make it server safe
Browse files Browse the repository at this point in the history
  • Loading branch information
mxdvl committed Oct 31, 2023
1 parent af6efb7 commit fdbab95
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 20 deletions.
15 changes: 15 additions & 0 deletions dotcom-rendering/src/components/Island.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { EnhancePinnedPost } from './EnhancePinnedPost.importable';
import { InteractiveSupportButton } from './InteractiveSupportButton.importable';
import { Island } from './Island';
import { LightboxHash } from './LightboxHash.importable';
import { LightboxJavascript } from './LightboxJavascript.importable';
import { LiveBlogEpic } from './LiveBlogEpic.importable';
import { Liveness } from './Liveness.importable';
import { Metrics } from './Metrics.importable';
Expand Down Expand Up @@ -153,6 +154,20 @@ describe('Island: server-side rendering', () => {
expect(() => renderToString(<LightboxHash />)).not.toThrow();
});

test('LightboxJavascript', () => {
expect(() =>
renderToString(
<LightboxJavascript
format={{
theme: Pillar.Culture,
design: ArticleDesign.PhotoEssay,
display: ArticleDisplay.Showcase,
}}
images={[]}
/>,
),
).not.toThrow();
});
test('Liveness', () => {
expect(() =>
renderToString(
Expand Down
48 changes: 28 additions & 20 deletions dotcom-rendering/src/components/LightboxJavascript.importable.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { log, storage } from '@guardian/libs';
import { isNonNullable, log, storage } from '@guardian/libs';
import libDebounce from 'lodash.debounce';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import screenfull from 'screenfull';
import type { ImageForLightbox } from '../types/content';
Expand Down Expand Up @@ -490,9 +490,12 @@ export const LightboxJavascript = ({
format: ArticleFormat;
images: ImageForLightbox[];
}) => {
const lightbox = document.querySelector<HTMLElement>('#gu-lightbox');
const [root, setRoot] = useState<HTMLUListElement>();

useEffect(() => {
if (!lightbox) return;
const lightbox = document.querySelector<HTMLElement>('#gu-lightbox');
if (!isNonNullable(lightbox)) return;

/**
* We only want to initialise the lightbox once so we check to see if it is already marked as ready
*/
Expand All @@ -501,25 +504,30 @@ export const LightboxJavascript = ({
return;
}
initialiseLightbox(lightbox);
}, [lightbox]);

/**
* Hydration has been requested so the first step is to render the list of images and put them into
* the DOM
*
* LightboxLayout provides a marker for where these images should go `ul#lightbox-images`. We look for
* this and then use createPortal to insert LightboxImages into this location.
*
* Why do we do this here, and not on the server?
* Because the size of the html generated by LightboxImages is very large (because the Picture element
* is so verbose) and we don't want every page view to have to download it, only those that are opening
* lightbox
*/
const imageRoot = lightbox?.querySelector('ul#lightbox-images');
if (!imageRoot) return null;
/**
* Hydration has been requested so the first step is to render the list of images and put them into
* the DOM
*
* LightboxLayout provides a marker for where these images should go `ul#lightbox-images`. We look for
* this and then use createPortal to insert LightboxImages into this location.
*
* Why do we do this here, and not on the server?
* Because the size of the html generated by LightboxImages is very large (because the Picture element
* is so verbose) and we don't want every page view to have to download it, only those that are opening
* lightbox
*/
const ul =
lightbox.querySelector<HTMLUListElement>('ul#lightbox-images');

if (isNonNullable(ul)) setRoot(ul);
}, []);

if (!root) return null;

log('dotcom', '💡 Generating HTML for lightbox images...');
return ReactDOM.createPortal(
<LightboxImages format={format} images={images} />,
imageRoot,
root,
);
};

0 comments on commit fdbab95

Please sign in to comment.