Hoc loading error states

src/app/Layouts/defaultPageWrapper.jsx

@@ -0,0 +1,46 @@
+import React, { Fragment } from 'react';
+import { node, string, shape } from 'prop-types';
+import Helmet from 'react-helmet';
+import HeaderContainer from '../containers/Header';
+import FooterContainer from '../containers/Footer';
+import { ServiceContextProvider } from '../contexts/ServiceContext';
+import { RequestContextProvider } from '../contexts/RequestContext';
+import GlobalStyle from '../lib/globalStyles';
+import ConsentBanner from '../containers/ConsentBanner';
+
+const PageWrapper = ({ bbcOrigin, children, data }) => {
+  const { isAmp, service } = data;
+  return (
+    <Fragment>
+      <GlobalStyle />
+      <RequestContextProvider
+        platform={isAmp ? 'amp' : 'canonical'}
+        bbcOrigin={bbcOrigin}
+      >
+        <ServiceContextProvider service={service}>
+          <Helmet>
+            <link rel="manifest" href={`/${service}/articles/manifest.json`} />
+          </Helmet>
+          <ConsentBanner />
+          <HeaderContainer />
+          {children}
+          <FooterContainer />
+        </ServiceContextProvider>
+      </RequestContextProvider>
+    </Fragment>
+  );
+};
+
+PageWrapper.propTypes = {
+  bbcOrigin: string,
+  children: node.isRequired,
+  data: shape.isRequired,
+};
+
+PageWrapper.defaultProps = {
+  bbcOrigin: null,
+};
+
+PageWrapper.defaultProps = {};
+
+export default PageWrapper;

src/app/containers/App/App.jsx

@@ -18,7 +18,7 @@ export class App extends Component {
       loading: false,
       error: null,
       loadInitialDataPromise: null,
-    };  
+    };
   }
 
   async componentDidUpdate({ location: prevLocation }) {

src/app/containers/Article/__snapshots__/index.test.jsx.snap

@@ -1,324 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ArticleContainer Component 200 status code should render correctly for news 1`] = `
-<React.Fragment>
-  <GlobalStyleComponent />
-  <ServiceContextProvider
-    service="news"
+exports[`ArticleContainer Component Composing the Article Container using the page handlers should compose articleContainer with the Page Handler in the correct order 1`] = `
+<div
+  id="PageWrapperContainer"
+>
+  <div
+    id="LoadingContainer"
   >
-    <RequestContextProvider
-      bbcOrigin="https://www.bbc.co.uk"
-      platform="canonical"
+    <div
+      id="ErrorContainer"
     >
-      <HelmetWrapper
-        defer={true}
-        encodeSpecialCharacters={true}
+      <div
+        id="DataContainer"
       >
-        <link
-          href="/news/articles/manifest.json"
-          rel="manifest"
-        />
-      </HelmetWrapper>
-      <ConsentBanner />
-      <HeaderContainer />
-      <ArticleMain
-        articleData={
-          Object {
-            "content": Object {
-              "model": Object {
-                "blocks": Array [
-                  Object {
-                    "model": Object {
-                      "blocks": Array [
-                        Object {
-                          "model": Object {
-                            "blocks": Array [
-                              Object {
-                                "model": Object {
-                                  "blocks": Array [
-                                    Object {
-                                      "model": Object {
-                                        "attributes": Array [],
-                                        "text": "Article Headline",
-                                      },
-                                      "type": "fragment",
-                                    },
-                                  ],
-                                  "text": "Article Headline",
-                                },
-                                "type": "paragraph",
-                              },
-                            ],
-                          },
-                          "type": "text",
-                        },
-                      ],
-                    },
-                    "type": "headline",
-                  },
-                  Object {
-                    "model": Object {
-                      "blocks": Array [
-                        Object {
-                          "model": Object {
-                            "blocks": Array [
-                              Object {
-                                "model": Object {
-                                  "attributes": Array [],
-                                  "text": "A paragraph.",
-                                },
-                                "type": "fragment",
-                              },
-                            ],
-                            "text": "A paragraph.",
-                          },
-                          "type": "paragraph",
-                        },
-                      ],
-                    },
-                    "type": "text",
-                  },
-                ],
-              },
-            },
-            "metadata": Object {
-              "created": 1514808060000,
-              "createdBy": "News",
-              "firstPublished": 1514808060000,
-              "id": "urn:bbc:ares::article:c0000000001o",
-              "lastPublished": 1514811600000,
-              "lastUpdated": 1514815200000,
-              "locators": Object {
-                "optimoUrn": "urn:bbc:optimo:asset:c0000000001o",
-              },
-              "passport": Object {
-                "category": "news",
-                "genre": null,
-                "home": "http://www.bbc.co.uk/ontologies/passport/home/News",
-                "language": "en-gb",
-              },
-              "tags": Object {
-                "about": Array [
-                  Object {
-                    "curationType": Array [
-                      "vivo-stream",
-                    ],
-                    "thingId": "2351f2b2-ce36-4f44-996d-c3c4f7f90eaa",
-                    "thingLabel": "Royal Wedding 2018",
-                    "thingSameAs": Array [
-                      "http://dbpedia.org/resource/Queen_Victoria",
-                      "http://rdf.freebase.com/ns/m.0cw10",
-                    ],
-                    "thingType": Array [
-                      "Thing",
-                      "Event",
-                    ],
-                    "thingUri": "http://www.bbc.co.uk/things/2351f2b2-ce36-4f44-996d-c3c4f7f90eaa#id",
-                    "topicId": "cpwpy79d6dxt",
-                    "topicName": "Royal Wedding 2018",
-                  },
-                  Object {
-                    "curationType": Array [
-                      "vivo-stream",
-                    ],
-                    "thingId": "803eaeb9-c0c3-4f1b-9a66-90efac3df2dc",
-                    "thingLabel": "Duchess of Sussex",
-                    "thingSameAs": Array [],
-                    "thingType": Array [
-                      "Person",
-                    ],
-                    "thingUri": "http://www.bbc.co.uk/things/803eaeb9-c0c3-4f1b-9a66-90efac3df2dc#id",
-                    "topicId": "cg3mq45zq4xt",
-                    "topicName": "Duchess of Sussex",
-                  },
-                ],
-                "mentions": Array [
-                  Object {
-                    "thingId": "1efbf3e5-b330-49a1-b531-b507ab027c96",
-                    "thingLabel": "Queen Victoria",
-                    "thingType": Array [
-                      "Person",
-                      "Thing",
-                    ],
-                    "thingUri": "http://www.bbc.co.uk/things/1efbf3e5-b330-49a1-b531-b507ab027c96#id",
-                  },
-                ],
-              },
-              "type": "article",
-            },
-            "promo": Object {
-              "headlines": Object {
-                "promoHeadline": "Article Headline for Promo",
-                "seoHeadline": "Article Headline for SEO",
-              },
-              "id": "urn:bbc:ares::article:c0000000001o",
-              "locators": Object {
-                "optimoUrn": "urn:bbc:optimo:asset:c0000000001o",
-              },
-              "summary": "Article summary.",
-              "timestamp": 1514811600000,
-            },
-          }
-        }
-      />
-      <FooterContainer />
-    </RequestContextProvider>
-  </ServiceContextProvider>
-</React.Fragment>
-`;
-
-exports[`ArticleContainer Component 200 status code should render correctly for persian 1`] = `
-<React.Fragment>
-  <GlobalStyleComponent />
-  <ServiceContextProvider
-    service="persian"
-  >
-    <RequestContextProvider
-      bbcOrigin="https://www.bbc.co.uk"
-      platform="canonical"
-    >
-      <HelmetWrapper
-        defer={true}
-        encodeSpecialCharacters={true}
-      >
-        <link
-          href="/persian/articles/manifest.json"
-          rel="manifest"
-        />
-      </HelmetWrapper>
-      <ConsentBanner />
-      <HeaderContainer />
-      <ArticleMain
-        articleData={
-          Object {
-            "content": Object {
-              "model": Object {
-                "blocks": Array [
-                  Object {
-                    "model": Object {
-                      "blocks": Array [
-                        Object {
-                          "model": Object {
-                            "blocks": Array [
-                              Object {
-                                "model": Object {
-                                  "blocks": Array [
-                                    Object {
-                                      "model": Object {
-                                        "attributes": Array [],
-                                        "text": "سرصفحه مقاله",
-                                      },
-                                      "type": "fragment",
-                                    },
-                                  ],
-                                  "text": "سرصفحه مقاله",
-                                },
-                                "type": "paragraph",
-                              },
-                            ],
-                          },
-                          "type": "text",
-                        },
-                      ],
-                    },
-                    "type": "headline",
-                  },
-                  Object {
-                    "model": Object {
-                      "blocks": Array [
-                        Object {
-                          "model": Object {
-                            "blocks": Array [
-                              Object {
-                                "model": Object {
-                                  "attributes": Array [],
-                                  "text": "یک پاراگراف.",
-                                },
-                                "type": "fragment",
-                              },
-                            ],
-                            "text": "یک پاراگراف.",
-                          },
-                          "type": "paragraph",
-                        },
-                      ],
-                    },
-                    "type": "text",
-                  },
-                ],
-              },
-            },
-            "metadata": Object {
-              "created": 1514808060000,
-              "createdBy": "Persian",
-              "firstPublished": 1514808060000,
-              "id": "urn:bbc:ares::article:cyddjz5058wo",
-              "lastPublished": 1514811600000,
-              "lastUpdated": 1514815200000,
-              "locators": Object {
-                "optimoUrn": "urn:bbc:optimo:asset:cyddjz5058wo",
-              },
-              "passport": Object {
-                "category": "news",
-                "genre": null,
-                "home": "http://www.bbc.co.uk/ontologies/passport/home/Persian",
-                "language": "fa",
-              },
-              "tags": Object {
-                "about": null,
-                "mentions": null,
-              },
-              "type": "article",
-            },
-            "promo": Object {
-              "headlines": Object {
-                "promoHeadline": "سرصفحه مقاله برای ارتقاء",
-                "seoHeadline": "سرصفحه مقاله",
-              },
-              "id": "urn:bbc:ares::article:cyddjz5058wo",
-              "locators": Object {
-                "optimoUrn": "urn:bbc:optimo:asset:cyddjz5058wo",
-              },
-              "summary": "خلاصه مقاله",
-              "timestamp": 1514811600000,
-            },
-          }
-        }
-      />
-      <FooterContainer />
-    </RequestContextProvider>
-  </ServiceContextProvider>
-</React.Fragment>
-`;
-
-exports[`ArticleContainer Component no data or bbcOrigin should render correctly 1`] = `null`;
-
-exports[`ArticleContainer Component non-200 status code should render correctly 1`] = `
-<React.Fragment>
-  <GlobalStyleComponent />
-  <ServiceContextProvider
-    service="news"
-  >
-    <RequestContextProvider
-      bbcOrigin="https://www.bbc.co.uk"
-      platform="canonical"
-    >
-      <HelmetWrapper
-        defer={true}
-        encodeSpecialCharacters={true}
-      >
-        <link
-          href="/news/articles/manifest.json"
-          rel="manifest"
-        />
-      </HelmetWrapper>
-      <ConsentBanner />
-      <HeaderContainer />
-      <ErrorMain
-        status={451}
-      />
-      <FooterContainer />
-    </RequestContextProvider>
-  </ServiceContextProvider>
-</React.Fragment>
+        <div>
+          ArticleMain
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;