Use Context to serve the edition prop

packages/frontend/web/components/Footer.tsx

@@ -197,9 +197,8 @@ const bttPosition = css`
 
 const FooterLinks: React.FC<{
     nav: NavType;
-    edition: Edition;
     pageFooter: FooterType;
-}> = ({ pageFooter, nav, edition }) => {
+}> = ({ pageFooter, nav }) => {
     const linkGroups = pageFooter.footerLinks.map(linkGroup => {
         const linkList = linkGroup.map((l: FooterLink, index: number) => (
             <li key={`${l.url}${index}`}>
@@ -220,7 +219,6 @@ const FooterLinks: React.FC<{
         <div className={readerRevenueLinks}>
             <ReaderRevenueLinks
                 urls={nav.readerRevenueLinks.footer}
-                edition={edition}
                 dataLinkNamePrefix={'footer : '}
                 noResponsive={true}
             />
@@ -241,9 +239,8 @@ export const Footer: React.FC<{
     pillars: PillarType[];
     pillar: Pillar;
     nav: NavType;
-    edition: Edition;
     pageFooter: FooterType;
-}> = ({ pillars, pillar, nav, edition, pageFooter }) => (
+}> = ({ pillars, pillar, nav, pageFooter }) => (
     <footer className={footer}>
         <Container className={footerInner}>
             <div className={pillarWrap}>
@@ -268,11 +265,7 @@ export const Footer: React.FC<{
                     frameBorder="0"
                 />
 
-                <FooterLinks
-                    nav={nav}
-                    edition={edition}
-                    pageFooter={pageFooter}
-                />
+                <FooterLinks nav={nav} pageFooter={pageFooter} />
                 <div className={bttPosition}>
                     <BackToTop />
                 </div>

packages/frontend/web/components/Header/Header.tsx

@@ -18,9 +18,8 @@ const header = css`
 export const Header: React.FC<{
     nav: NavType;
     pillar: Pillar;
-    edition: Edition;
-}> = ({ nav, pillar, edition }) => (
+}> = ({ nav, pillar }) => (
     <header className={header}>
-        <Nav nav={nav} pillar={pillar} edition={edition} />
+        <Nav nav={nav} pillar={pillar} />
     </header>
 );

packages/frontend/web/components/Header/Nav/EditionDropdown.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { css } from 'emotion';
 
 import { Dropdown } from '@guardian/guui';
 import { desktop, wide } from '@guardian/pasteup/breakpoints';
 import { Link } from '@guardian/guui/components/Dropdown/Dropdown';
 import { palette } from '@guardian/pasteup/palette';
+import { EditionContext } from '@frontend/web/context/EditionContext';
 
 const editionDropdown = css`
     display: none;
@@ -71,9 +72,9 @@ const lookUpEditionLink = (edition: Edition): Link => {
 };
 
 export const EditionDropdown: React.FC<{
-    edition: Edition;
     dataLinkName: string;
-}> = ({ edition, dataLinkName }) => {
+}> = ({ dataLinkName }) => {
+    const edition = useContext(EditionContext);
     const activeEditionLink = lookUpEditionLink(edition);
     const links = [
         ukEditionLink,

packages/frontend/web/components/Header/Nav/Nav.tsx

@@ -54,7 +54,6 @@ const readerRevenueLinks = css`
 interface Props {
     nav: NavType;
     pillar: Pillar;
-    edition: Edition;
 }
 
 export class Nav extends Component<
@@ -83,7 +82,7 @@ export class Nav extends Component<
     }
 
     public render() {
-        const { nav, pillar, edition } = this.props;
+        const { nav, pillar } = this.props;
         const toggleMainMenu = () => {
             this.toggleMainMenu();
         };
@@ -101,7 +100,6 @@ export class Nav extends Component<
                     data-component="nav2"
                 >
                     <EditionDropdown
-                        edition={edition}
                         dataLinkName={'nav2 : topbar : edition-picker: toggle'}
                     />
                     <Logo />
@@ -113,7 +111,6 @@ export class Nav extends Component<
                     <div className={readerRevenueLinks}>
                         <ReaderRevenueLinks
                             urls={nav.readerRevenueLinks.header}
-                            edition={edition}
                             dataLinkNamePrefix={'nav2 : '}
                             noResponsive={false}
                         />

packages/frontend/web/components/Header/Nav/ReaderRevenueLinks.test.tsx

@@ -5,6 +5,7 @@ import {
     getCookie as getCookie_,
     addCookie as addCookie_,
 } from '@frontend/web/browser/cookie';
+import { EditionContext } from '@frontend/web/context/EditionContext';
 
 const getCookie: any = getCookie_;
 const addCookie: any = addCookie_;
@@ -22,7 +23,6 @@ describe('ReaderRevenueLinks', () => {
         subscribe: 'https://www.theguardian.com/subscribe',
         support: 'https://www.theguardian.com/support',
     };
-    const edition: Edition = 'UK';
 
     beforeEach(() => {
         addCookie.mockReset();
@@ -38,12 +38,13 @@ describe('ReaderRevenueLinks', () => {
         getCookie.mockReturnValue(contributionDate);
 
         const { container } = render(
-            <ReaderRevenueLinks
-                urls={urls}
-                edition={edition}
-                dataLinkNamePrefix={'nav2 : '}
-                noResponsive={false}
-            />,
+            <EditionContext.Provider value={'UK'}>
+                <ReaderRevenueLinks
+                    urls={urls}
+                    dataLinkNamePrefix={'nav2 : '}
+                    noResponsive={false}
+                />
+            </EditionContext.Provider>,
         );
 
         // expect nothing to be rendered
@@ -64,12 +65,13 @@ describe('ReaderRevenueLinks', () => {
             .mockReturnValueOnce('true');
 
         const { container } = render(
-            <ReaderRevenueLinks
-                urls={urls}
-                edition={edition}
-                dataLinkNamePrefix={'nav2 : '}
-                noResponsive={false}
-            />,
+            <EditionContext.Provider value={'UK'}>
+                <ReaderRevenueLinks
+                    urls={urls}
+                    dataLinkNamePrefix={'nav2 : '}
+                    noResponsive={false}
+                />
+            </EditionContext.Provider>,
         );
 
         // expect nothing to be rendered
@@ -91,12 +93,13 @@ describe('ReaderRevenueLinks', () => {
             .mockReturnValueOnce('false');
 
         const { container, getByText } = render(
-            <ReaderRevenueLinks
-                urls={urls}
-                edition={edition}
-                dataLinkNamePrefix={'nav2 : '}
-                noResponsive={false}
-            />,
+            <EditionContext.Provider value={'UK'}>
+                <ReaderRevenueLinks
+                    urls={urls}
+                    dataLinkNamePrefix={'nav2 : '}
+                    noResponsive={false}
+                />
+            </EditionContext.Provider>,
         );
 
         // expect something to be rendered

packages/frontend/web/components/Header/Nav/ReaderRevenueLinks.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { css, cx } from 'emotion';
 
 import { serif, sans, textSans, headline } from '@guardian/pasteup/typography';
@@ -14,6 +14,7 @@ import {
 
 import { getCookie } from '@frontend/web/browser/cookie';
 import { AsyncClientComponent } from '@frontend/web/components/lib/AsyncClientComponent';
+import { EditionContext } from '@frontend/web/context/EditionContext';
 
 const message = css`
     color: ${palette.highlight.main};
@@ -112,15 +113,16 @@ export const RRButton: React.FC<{
 };
 
 export const ReaderRevenueLinks: React.FC<{
-    edition: Edition;
     urls: {
         subscribe: string;
         support: string;
         contribute: string;
     };
     dataLinkNamePrefix: string;
     noResponsive: boolean;
-}> = ({ edition, urls, dataLinkNamePrefix, noResponsive }) => {
+}> = ({ urls, dataLinkNamePrefix, noResponsive }) => {
+    const edition = useContext(EditionContext);
+
     return (
         <AsyncClientComponent f={shouldShow}>
             {({ data }) => (

packages/frontend/web/context/EditionContext.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const EditionContext = React.createContext<Edition>('UK');

packages/frontend/web/pages/Article.tsx

@@ -162,11 +162,7 @@ export const Article: React.FC<{
                 />
             </div>
 
-            <Header
-                nav={data.NAV}
-                pillar={data.CAPI.pillar}
-                edition={data.CAPI.editionId}
-            />
+            <Header nav={data.NAV} pillar={data.CAPI.pillar} />
         </div>
 
         <main className={bodyAdStyles}>
@@ -208,7 +204,6 @@ export const Article: React.FC<{
 
         <Footer
             nav={data.NAV}
-            edition={data.CAPI.editionId}
             pageFooter={data.CAPI.pageFooter}
             pillar={data.CAPI.pillar}
             pillars={data.NAV.pillars}

packages/frontend/web/server/document.tsx

@@ -5,6 +5,7 @@ import { cache } from 'emotion';
 import { CacheProvider } from '@emotion/core';
 
 import { htmlTemplate } from './htmlTemplate';
+import { EditionContext } from '@frontend/web/context/EditionContext';
 import { Article } from '../pages/Article';
 import { getDist } from '@frontend/lib/assets';
 
@@ -23,7 +24,9 @@ export const document = ({ data }: Props) => {
         renderToString(
             // TODO: CacheProvider can be removed when we've moved over to using @emotion/core
             <CacheProvider value={cache}>
-                <Article data={{ CAPI, NAV, config }} />
+                <EditionContext.Provider value={data.CAPI.editionId}>
+                    <Article data={{ CAPI, NAV, config }} />
+                </EditionContext.Provider>
             </CacheProvider>,
         ),
     );