Skip to content

InstagramBlockComponent as an Island #3824

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oliverlloyd merged 1 commit into from
Jan 12, 2022
Merged

InstagramBlockComponent as an Island #3824

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions dotcom-rendering/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -880,11 +880,6 @@ interface VineBlockLoadable extends ComponentNameChunkMap {
addWhen: VineBlockElement['_type'];
}

interface InstagramBlockLoadable extends ComponentNameChunkMap {
chunkName: 'InstagramBlockComponent';
addWhen: InstagramBlockElement['_type'];
}

// There are docs on loadable in ./docs/loadable-components.md
type LoadableComponents = [
YoutubeBlockLoadable,
Expand All @@ -897,7 +892,6 @@ type LoadableComponents = [
SpotifyBlockLoadable,
FacebookVideoBlockLoadable,
VineBlockLoadable,
InstagramBlockLoadable,
];

interface CarouselImagesMap {
Expand Down
44 changes: 0 additions & 44 deletions dotcom-rendering/src/web/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,26 +458,6 @@ export const App = ({ CAPI, ophanRecord }: Props) => {
},
);

const InstagramBlockComponent = loadable(
() => {
if (
CAPI.elementsToHydrate.filter(
(element) =>
element._type ===
'model.dotcomrendering.pageElements.InstagramBlockElement',
).length > 0
) {
return import(
'@frontend/web/components/InstagramBlockComponent'
);
}
return Promise.reject();
},
{
resolveComponent: (module) => module.InstagramBlockComponent,
},
);

// We use this function to filter the elementsToHydrate array by a particular
// type so that we can hydrate them. We use T to force the type and keep TS
// content because *we* know that if _type equals a thing then the type is
Expand Down Expand Up @@ -531,10 +511,6 @@ export const App = ({ CAPI, ophanRecord }: Props) => {
CAPI.elementsToHydrate,
'model.dotcomrendering.pageElements.EmbedBlockElement',
);
const instas = elementsByType<InstagramBlockElement>(
CAPI.elementsToHydrate,
'model.dotcomrendering.pageElements.InstagramBlockElement',
);
const maps = elementsByType<MapBlockElement>(
CAPI.elementsToHydrate,
'model.dotcomrendering.pageElements.MapBlockElement',
Expand Down Expand Up @@ -908,26 +884,6 @@ export const App = ({ CAPI, ophanRecord }: Props) => {
)}
</HydrateOnce>
))}
{instas.map((insta, index) => (
<HydrateOnce rootId={insta.elementId}>
<ClickToView
role={insta.role}
isTracking={insta.isThirdPartyTracking}
source={insta.source}
sourceDomain={insta.sourceDomain}
onAccept={() =>
updateIframeHeight(
`iframe[name="instagram-embed-${index}"]`,
)
}
>
<InstagramBlockComponent
element={insta}
index={index}
/>
</ClickToView>
</HydrateOnce>
))}
{maps.map((map) => (
<HydrateOnce rootId={map.elementId}>
<ClickToView
Expand Down
25 changes: 7 additions & 18 deletions dotcom-rendering/src/web/components/ClickToView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { VimeoBlockComponent } from './VimeoBlockComponent';
import { DocumentBlockComponent } from './DocumentBlockComponent';
import { SoundcloudBlockComponent } from './SoundcloudBlockComponent';
import { TweetBlockComponent } from './TweetBlockComponent';
import { InstagramBlockComponent } from './InstagramBlockComponent';
import { InstagramBlockComponent } from './InstagramBlockComponent.importable';

import { ClickToView } from './ClickToView';

Expand Down Expand Up @@ -1039,23 +1039,12 @@ export const InstagramBlockComponentStory = () => {
</a>
</p>
<Figure isMainMedia={false} role="inline">
<ClickToView
isTracking={true}
source={instagramInstramEmbed.source}
sourceDomain={instagramInstramEmbed.sourceDomain}
role="inline"
onAccept={() =>
updateIframeHeight(
'iframe[name="instagram-embed-1"]',
)
}
>
<InstagramBlockComponent
key={1}
element={instagramInstramEmbed}
index={1}
/>
</ClickToView>
<InstagramBlockComponent
key={1}
element={instagramInstramEmbed}
index={1}
isMainMedia={false}

@oliverlloyd oliverlloyd Jan 12, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added this prop so we can pass it to ClickToView

/>
</Figure>
<p css={paragraphStyle}>The end.</p>,
</div>
Expand Down
42 changes: 42 additions & 0 deletions dotcom-rendering/src/web/components/InstagramBlockComponent.importable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { css } from '@emotion/react';
import { updateIframeHeight } from '../browser/updateIframeHeight';

@oliverlloyd oliverlloyd Jan 12, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New import

import { ClickToView } from './ClickToView';

const fullWidthStyles = css`
width: 100%;
`;

/**
* Note the iframe created in this component is dependent on the embedIFrame function being
* called to be size correctly.
* src/web/browser/embedIframe/embedIframe.ts
*/
export const InstagramBlockComponent: React.FC<{
element: InstagramBlockElement;
index: number;
isMainMedia: boolean;
}> = ({ element, index, isMainMedia }) => {
return (
<ClickToView
role={element.role}
isTracking={element.isThirdPartyTracking}
isMainMedia={isMainMedia}
source={element.source}
sourceDomain={element.sourceDomain}
onAccept={() =>
updateIframeHeight(`iframe[name="instagram-embed-${index}"]`)
}
>
Comment on lines +20 to +29

@oliverlloyd oliverlloyd Jan 12, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is new code

<iframe
css={fullWidthStyles}
className="js-embed__iframe"
name={`instagram-embed-${index}`}
data-cy="instagram-embed"
title={`Instagram Post ${index}`}
srcDoc={`${element.html}
<script src="https://interactive.guim.co.uk/libs/iframe-messenger/iframeMessenger.js"></script>
<gu-script>iframeMessenger.enableAutoResize();</gu-script>`}
/>
</ClickToView>
);
};
28 changes: 0 additions & 28 deletions dotcom-rendering/src/web/components/InstagramBlockComponent.tsx
View file
Open in desktop

This file was deleted.

14 changes: 5 additions & 9 deletions dotcom-rendering/src/web/lib/renderElement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { UnsafeEmbedBlockComponent } from '@root/src/web/components/UnsafeEmbedB
import { GuVideoBlockComponent } from '@root/src/web/components/GuVideoBlockComponent';
import { HighlightBlockComponent } from '@root/src/web/components/HighlightBlockComponent';
import { ImageBlockComponent } from '@root/src/web/components/ImageBlockComponent';
import { InstagramBlockComponent } from '@root/src/web/components/InstagramBlockComponent';
import { InstagramBlockComponent } from '@root/src/web/components/InstagramBlockComponent.importable';
import { InteractiveBlockComponent } from '@root/src/web/components/InteractiveBlockComponent';
import { ItemLinkBlockElement } from '@root/src/web/components/ItemLinkBlockElement';
import { InteractiveContentsBlockComponent } from '@root/src/web/components/InteractiveContentsBlockComponent';
Expand Down Expand Up @@ -60,6 +60,7 @@ import {
isInteractive,
interactiveLegacyFigureClasses,
} from '../layouts/lib/interactiveLegacyStyling';
import { Island } from '../components/Island';

type Props = {
format: ArticleFormat;
Expand Down Expand Up @@ -327,19 +328,14 @@ export const renderElement = ({
case 'model.dotcomrendering.pageElements.InstagramBlockElement':
return [
true,
<ClickToView
role={element.role}
isTracking={element.isThirdPartyTracking}
isMainMedia={isMainMedia}
source={element.source}
sourceDomain={element.sourceDomain}
>
<Island deferUntil="visible">
<InstagramBlockComponent
key={index}
element={element}
index={index}
isMainMedia={isMainMedia}
/>
</ClickToView>,
</Island>,
];
case 'model.dotcomrendering.pageElements.InteractiveAtomBlockElement':
if (format.design === ArticleDesign.Interactive) {
Expand Down
4 changes: 0 additions & 4 deletions dotcom-rendering/src/web/server/document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,10 +135,6 @@ export const document = ({ data }: Props): string => {
chunkName: 'VineBlockComponent',
addWhen: 'model.dotcomrendering.pageElements.VineBlockElement',
},
{
chunkName: 'InstagramBlockComponent',
addWhen: 'model.dotcomrendering.pageElements.InstagramBlockElement',
},
];
// We want to only insert script tags for the elements or main media elements on this page view
// so we need to check what elements we have and use the mapping to the the chunk name
Expand Down