Fetch default epic copy dynamically

Fetch the copy for the default epic from an API endpoint once when we boot the app. At this point we're still missing the following, which we'll follow up on in future PRs: * Elegant handling/retrying if we fail to fetch the content * We don't have full support for all possible placeholders yet (I think the full list is %%CURRENCY_SYMBOL%%, %%COUNTRY_NAME%% and %%ARTICLE_COUNT%%) * We do support interpolating the currency symbol, but we just use a hardcoded value. In future we'll want to bring across the logic from frontend where we resolve this based on the geolocation.
guardian · Jan 22, 2020 · 0c34a4b · 0c34a4b
1 parent f56a37f
commit 0c34a4b
Show file tree

Hide file tree

Showing 6 changed files with 245 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "emotion": "^10.0.27",
     "emotion-server": "^10.0.27",
     "express": "^4.17.1",
+    "node-fetch": "^2.6.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
@@ -34,7 +35,9 @@
     "@types/aws-serverless-express": "^3.3.2",
     "@types/cors": "^2.8.6",
     "@types/express": "^4.17.2",
+    "@types/fetch-mock": "^7.3.2",
     "@types/jest": "^24.0.25",
+    "@types/node-fetch": "^2.5.4",
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
     "@typescript-eslint/eslint-plugin": "^2.16.0",
@@ -45,6 +48,7 @@
     "eslint-config-prettier": "^6.9.0",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.0",
+    "fetch-mock": "^8.3.1",
     "inquirer": "^7.0.3",
     "jest": "^24.9.0",
     "prettier": "^1.19.1",

diff --git a/src/api/contributionsApi.test.ts b/src/api/contributionsApi.test.ts
@@ -0,0 +1,39 @@
+import { fetchDefaultEpicContent } from './contributionsApi';
+
+jest.mock('node-fetch', () => require('fetch-mock').sandbox());
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const fetchMock = require('node-fetch');
+
+describe('fetchDefaultEpic', () => {
+    it('fetches and returns the data in the expected format', async () => {
+        const url =
+            'https://interactive.guim.co.uk/docsdata/1fy0JolB1bf1IEFLHGHfUYWx-niad7vR9K954OpTOvjE.json';
+
+        const response = {
+            sheets: {
+                control: [
+                    {
+                        heading: 'Since you’re here...',
+                        paragraphs: 'First paragraph',
+                        highlightedText: 'Highlighted Text',
+                    },
+                    {
+                        heading: '',
+                        paragraphs: 'Second paragraph',
+                        highlightedText: '',
+                    },
+                ],
+            },
+        };
+
+        fetchMock.get(url, response);
+
+        const epicData = await fetchDefaultEpicContent();
+
+        expect(epicData).toEqual({
+            heading: 'Since you’re here...',
+            paragraphs: ['First paragraph', 'Second paragraph'],
+            highlighted: ['Highlighted Text'],
+        });
+    });
+});
diff --git a/src/api/contributionsApi.ts b/src/api/contributionsApi.ts
@@ -0,0 +1,34 @@
+import fetch from 'node-fetch';
+
+const defaultEpicUrl =
+    'https://interactive.guim.co.uk/docsdata/1fy0JolB1bf1IEFLHGHfUYWx-niad7vR9K954OpTOvjE.json';
+
+export type DefaultEpicContent = {
+    heading?: string;
+    paragraphs: string[];
+    highlighted: string[];
+};
+
+export const fetchDefaultEpicContent = async (): Promise<DefaultEpicContent> => {
+    const response = await fetch(defaultEpicUrl);
+    if (!response.ok) {
+        throw new Error(
+            `Encountered a non-ok response when fetching default epic: ${response.status}`,
+        );
+    }
+    const data = await response.json();
+    const control = data?.sheets?.control;
+
+    return control.reduce(
+        (
+            acc: DefaultEpicContent,
+            item: { heading: string; paragraphs: string; highlightedText: string },
+        ) => {
+            if (!acc.heading && item.heading) acc.heading = item.heading;
+            if (item.paragraphs) acc.paragraphs.push(item.paragraphs);
+            if (item.highlightedText) acc.highlighted.push(item.highlightedText);
+            return acc;
+        },
+        { paragraphs: [], highlighted: [] },
+    );
+};
diff --git a/src/components/DefaultEpic.tsx b/src/components/DefaultEpic.tsx
@@ -5,6 +5,11 @@ import { palette } from '@guardian/src-foundations';
 import { space } from '@guardian/src-foundations';
 import { CallToAction } from './CallToAction';
 
+const currencySymbol = '£';
+
+const replacePlaceholders = (content: string): string =>
+    content.replace(/%%CURRENCY_SYMBOL%%/g, currencySymbol);
+
 // Spacing values below are multiples of 4.
 // See https://www.theguardian.design/2a1e5182b/p/449bd5
 const wrapperStyles = css`
@@ -56,51 +61,69 @@ const imageStyles = css`
     margin: ${space[1]}px 0;
 `;
 
-export const DefaultEpic: React.FC<{}> = ({}) => {
-    return (
-        <section className={wrapperStyles}>
-            <h2 className={headingStyles}>Since you're here...</h2>
-            <p className={bodyStyles}>
-                ... we have a small favour to ask. More people, like you, are reading and supporting
-                the Guardian’s independent, investigative journalism than ever before. And unlike
-                many news organisations, we made the choice to keep our reporting open for all,
-                regardless of where they live or what they can afford to pay.
-            </p>
-            <p className={bodyStyles}>
-                The Guardian will engage with the most critical issues of our time – from the
-                escalating climate catastrophe to widespread inequality to the influence of big tech
-                on our lives. At a time when factual information is a necessity, we believe that
-                each of us, around the world, deserves access to accurate reporting with integrity
-                at its heart.
-            </p>
-            <p className={bodyStyles}>
-                Our editorial independence means we set our own agenda and voice our own opinions.
-                Guardian journalism is free from commercial and political bias and not influenced by
-                billionaire owners or shareholders. This means we can give a voice to those less
-                heard, explore where others turn away, and rigorously challenge those in power.
-            </p>
-            <p className={bodyStyles}>
-                We hope you will consider supporting us today. We need your support to keep
-                delivering quality journalism that’s open and independent. Every reader
-                contribution, however big or small, is so valuable.{' '}
-                <strong className={highlightWrapperStyles}>
-                    <span className={highlightStyles}>
-                        Support The Guardian from as little as £1 - and it only takes a minute.
-                        Thank you.
-                    </span>
-                </strong>
-            </p>
-            <div className={buttonWrapperStyles}>
-                <CallToAction
-                    url="https://support.theguardian.com/uk/contribute"
-                    linkText="Support The Guardian"
-                />
-                <img
-                    src="https://assets.guim.co.uk/images/acquisitions/2db3a266287f452355b68d4240df8087/payment-methods.png"
-                    alt="Accepted payment methods: Visa, Mastercard, American Express and PayPal"
-                    className={imageStyles}
-                />
-            </div>
-        </section>
-    );
+type Props = {
+    heading?: string;
+    paragraphs: string[];
+    highlighted: string[];
+};
+
+type HighlightedProps = {
+    highlighted: string[];
 };
+
+type BodyProps = {
+    paragraphs: string[];
+    highlighted: string[];
+};
+
+const Highlighted: React.FC<HighlightedProps> = ({ highlighted }: HighlightedProps) => (
+    <strong className={highlightWrapperStyles}>
+        {' '}
+        {highlighted.map((highlightText, idx) => (
+            <span
+                key={idx}
+                className={highlightStyles}
+                dangerouslySetInnerHTML={{ __html: replacePlaceholders(highlightText) }}
+            />
+        ))}
+    </strong>
+);
+
+const EpicBody: React.FC<BodyProps> = ({ highlighted, paragraphs }: BodyProps) => (
+    <>
+        {paragraphs.map((paragraph, idx) => (
+            <p key={idx} className={bodyStyles}>
+                <span dangerouslySetInnerHTML={{ __html: replacePlaceholders(paragraph) }} />
+
+                {highlighted.length > 0 && idx === paragraphs.length - 1 && (
+                    <Highlighted highlighted={highlighted} />
+                )}
+            </p>
+        ))}
+    </>
+);
+
+export const DefaultEpic: React.FC<Props> = ({ heading, paragraphs, highlighted }: Props) => (
+    <section className={wrapperStyles}>
+        {heading && (
+            <h2
+                className={headingStyles}
+                dangerouslySetInnerHTML={{ __html: replacePlaceholders(heading) }}
+            />
+        )}
+
+        <EpicBody paragraphs={paragraphs} highlighted={highlighted} />
+
+        <div className={buttonWrapperStyles}>
+            <CallToAction
+                url="https://support.theguardian.com/uk/contribute"
+                linkText="Support The Guardian"
+            />
+            <img
+                src="https://assets.guim.co.uk/images/acquisitions/2db3a266287f452355b68d4240df8087/payment-methods.png"
+                alt="Accepted payment methods: Visa, Mastercard, American Express and PayPal"
+                className={imageStyles}
+            />
+        </div>
+    </section>
+);
diff --git a/src/server.tsx b/src/server.tsx
@@ -5,33 +5,48 @@ import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { extractCritical } from 'emotion-server';
 import { renderHtmlDocument } from './utils/renderHtmlDocument';
+import { fetchDefaultEpicContent, DefaultEpicContent } from './api/contributionsApi';
 import { DefaultEpic } from './components/DefaultEpic';
 import cors from 'cors';
 
-const app = express();
-app.use(express.json({ limit: '50mb' }));
+const bootApp = (content: DefaultEpicContent): void => {
+    const app = express();
+    app.use(express.json({ limit: '50mb' }));
 
-// Note allows *all* cors. We may want to tighten this later.
-app.use(cors());
-app.options('*', cors());
+    // Note allows *all* cors. We may want to tighten this later.
+    app.use(cors());
+    app.options('*', cors());
 
-app.get('/', (req, res) => {
-    const { html, css } = extractCritical(renderToStaticMarkup(<DefaultEpic />));
-    if (typeof req.query.showPreview !== 'undefined') {
-        const htmlContent = renderHtmlDocument({ html, css });
-        res.send(htmlContent);
+    app.get('/', (req, res) => {
+        const { html, css } = extractCritical(
+            renderToStaticMarkup(
+                <DefaultEpic
+                    heading={content.heading}
+                    paragraphs={content.paragraphs}
+                    highlighted={content.highlighted}
+                />,
+            ),
+        );
+        if (typeof req.query.showPreview !== 'undefined') {
+            const htmlContent = renderHtmlDocument({ html, css });
+            res.send(htmlContent);
+        } else {
+            res.send({ html, css });
+        }
+    });
+
+    // If local then don't wrap in serverless
+    const PORT = process.env.PORT || 3030;
+    if (process.env.NODE_ENV === 'development') {
+        app.listen(PORT, () => console.log(`Listening on port ${PORT}`));
     } else {
-        res.send({ html, css });
+        const server = awsServerlessExpress.createServer(app);
+        exports.handler = (event: any, context: Context) => {
+            awsServerlessExpress.proxy(server, event, context);
+        };
     }
-});
+};
 
-// If local then don't wrap in serverless
-const PORT = process.env.PORT || 3030;
-if (process.env.NODE_ENV === 'development') {
-    app.listen(PORT, () => console.log(`Listening on port ${PORT}`));
-} else {
-    const server = awsServerlessExpress.createServer(app);
-    exports.handler = (event: any, context: Context) => {
-        awsServerlessExpress.proxy(server, event, context);
-    };
-}
+fetchDefaultEpicContent()
+    .then(bootApp)
+    .catch(error => console.error(`App failed to boot: ${error}`));