refactor: add error boundary around static page routing

elifesciences · Oct 26, 2018 · 4f2316b · 4f2316b
1 parent b388501
commit 4f2316b
Showing 1 changed file with 39 additions and 36 deletions.
diff --git a/app/components/pages/StaticPages/index.js b/app/components/pages/StaticPages/index.js
@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import { Box, Flex } from 'grid-styled'
 import { th } from '@pubsweet/ui-toolkit'
 
+import ErrorBoundary from '../../global/ErrorBoundary'
 import media from '../../global/layout/media'
 import NavLink from '../../ui/atoms/NavLink'
 
@@ -28,44 +29,46 @@ const SideNavLink = styled(NavLink)`
 
 const StaticPage = ({ navList }) => (
   <div>
-    <TopNavContainer>{/* TODO: dropdown goes here */}</TopNavContainer>
+    <ErrorBoundary>
+      <TopNavContainer>{/* TODO: dropdown goes here */}</TopNavContainer>
 
-    <Flex>
-      <SideNavContainer
-        ml={[0, 0, '8.33%']} // 1 column's worth of spacing (in a 12 column grid)
-        pr={3}
-        pt={18} // To match the top padding on the H1 in the 'main' component
-        width={[0, 3 / 12, 3 / 12, 2 / 12]}
-      >
-        <Box is="nav">
-          {navList &&
-            navList.map(navItem => (
-              <SideNavLink
-                data-test-id="side-nav-link"
-                key={navItem.link}
-                to={navItem.link}
-              >
-                {navItem.label}
-              </SideNavLink>
-            ))}
-        </Box>
-      </SideNavContainer>
+      <Flex>
+        <SideNavContainer
+          ml={[0, 0, '8.33%']} // 1 column's worth of spacing (in a 12 column grid)
+          pr={3}
+          pt={18} // To match the top padding on the H1 in the 'main' component
+          width={[0, 3 / 12, 3 / 12, 2 / 12]}
+        >
+          <Box is="nav">
+            {navList &&
+              navList.map(navItem => (
+                <SideNavLink
+                  data-test-id="side-nav-link"
+                  key={navItem.link}
+                  to={navItem.link}
+                >
+                  {navItem.label}
+                </SideNavLink>
+              ))}
+          </Box>
+        </SideNavContainer>
 
-      <MainContainer width={[1, 1, 7 / 12, 7 / 12, 8 / 12]}>
-        <Switch>
-          {navList &&
-            navList.map(navItem => (
-              <Route
-                component={navItem.component}
-                exact
-                key={navItem.link}
-                path={navItem.link}
-              />
-            ))}
-          <Redirect to={navList[0].link} />
-        </Switch>
-      </MainContainer>
-    </Flex>
+        <MainContainer width={[1, 1, 7 / 12, 7 / 12, 8 / 12]}>
+          <Switch>
+            {navList &&
+              navList.map(navItem => (
+                <Route
+                  component={navItem.component}
+                  exact
+                  key={navItem.link}
+                  path={navItem.link}
+                />
+              ))}
+            <Redirect to={navList[0].link} />
+          </Switch>
+        </MainContainer>
+      </Flex>
+    </ErrorBoundary>
   </div>
 )