fix(bgcolor): refactor for bgcolor

* make all pages children of ProtectedContent * ProtectedContent introduces 'public' property * ProtectedContent wraps children in Body with style property pass-through * Fix couple jest tests after rebase
uc-cdis · Dec 5, 2017 · 0f29097 · 0f29097
1 parent 030dbc6
commit 0f29097
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 109 deletions.
diff --git a/src/Explorer/ExplorerComponent.jsx b/src/Explorer/ExplorerComponent.jsx
@@ -4,14 +4,13 @@ import { computeLastPageSizes } from '../utils';
 import { GQLHelper } from '../gqlHelper';
 import { getReduxStore } from '../reduxStore';
 import { ReduxExplorerTabPanel, ReduxSideBar } from './ReduxExplorer';
-import { BodyBackground } from './style';
 
 const gqlHelper = GQLHelper.getGQLHelper();
 
 class ExplorerComponent extends Component {
   /**
    * Subscribe to Redux updates at mount time
-   */ 
+   */
   componentWillMount() {
     getReduxStore().then(
       (store) => {
@@ -145,11 +144,11 @@ class ExplorerComponent extends Component {
 
   render() {
     this.updateFilesMap();
-    const flexBox = {
+    const style = {
       display: 'flex',
     };
     return (
-      <div style={flexBox}>
+      <div style={style}>
         <ReduxSideBar />
         <ReduxExplorerTabPanel />
       </div>

diff --git a/src/Explorer/ReduxExplorer.test.jsx b/src/Explorer/ReduxExplorer.test.jsx
@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import { ThemeProvider } from 'styled-components';
+import { StaticRouter } from 'react-router-dom';
 
 import { getReduxStore } from '../reduxStore';
 import { theme } from '../theme';
@@ -18,7 +19,9 @@ function renderComponent(ComponentClass, props) {
         <Provider store={store}>
           <ThemeProvider theme={theme}>
             <MuiThemeProvider>
-              <ComponentClass {...props} />
+              <StaticRouter location={{ pathname: '/files' }}>
+                <ComponentClass {...props} />
+              </StaticRouter>
             </MuiThemeProvider>
           </ThemeProvider>
         </Provider>,

diff --git a/src/Explorer/style.js b/src/Explorer/style.js
@@ -114,8 +114,6 @@ export const ExplorerTabBox = styled.div`
   display:${props => (props.active ? 'block' : 'none')};
 `;
 
-export const BodyBackground = '#ecebeb';
-
 export const ExplorerTableRow = styled.tr`
   ${TableRow};
   overflow: visible;

diff --git a/src/Login/ProtectedContent.jsx b/src/Login/ProtectedContent.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Redirect } from 'react-router-dom';
+import styled from 'styled-components';
 
 import { fetchUser, fetchOAuthURL, fetchJsonOrText, fetchProjects } from '../actions';
 import Spinner from '../components/Spinner';
@@ -10,6 +11,11 @@ import ReduxAuthTimeoutPopup from '../Popup/ReduxAuthTimeoutPopup';
 let lastAuthMs = 0;
 let lastTokenRefreshMs = 0;
 
+const Body = styled.div`
+  background: ${props => props.background};
+  padding: ${props => props.padding || '50px 100px'};
+`;
+
 /**
  * Redux listener - just clears auth-cache on logout
  */
@@ -47,7 +53,9 @@ export function intersection(aList, bList) {
  * @param component required child component
  * @param location from react-router
  * @param history from react-router
- * @param params from react-router.match
+ * @param match from react-router.match
+ * @param public default false - set true to disable auth-guard
+ * @param background passed through to <Box background> wrapper for page-level background
  * @param filter {() => Promise} optional filter to apply before rendering the child component
  */
 class ProtectedContent extends React.Component {
@@ -115,7 +123,7 @@ class ProtectedContent extends React.Component {
           }
           return newState;
         },
-    );
+      );
   };
 
   /**
@@ -195,45 +203,54 @@ class ProtectedContent extends React.Component {
    * in the various ways we want it to be.
    */
   componentDidMount() {
-    getReduxStore().then(
-      store =>
-        Promise.all(
-          [
-            store.dispatch({ type: 'CLEAR_COUNTS' }), // clear some counters
-            store.dispatch({ type: 'CLEAR_QUERY_NODES' }),
-          ],
-        ).then(
-          () => this.checkLoginStatus(store)
-            .then(newState => this.checkQuizStatus(newState))
-            .then(newState => this.checkApiToken(store, newState)),
-        ).then(
-          (newState) => {
-            const filterPromise = (newState.authenticated && typeof this.props.filter === 'function') ? this.props.filter() : Promise.resolve('ok');
-            const finish = () => this.setState(newState); // finally update the component state
-            return filterPromise.then(finish, finish);
-          },
-        ),
-    );
+    if (!this.props.public) {
+      getReduxStore().then(
+        store =>
+          Promise.all(
+            [
+              store.dispatch({ type: 'CLEAR_COUNTS' }), // clear some counters
+              store.dispatch({ type: 'CLEAR_QUERY_NODES' }),
+            ],
+          ).then(
+            () => this.checkLoginStatus(store)
+              .then(newState => this.checkQuizStatus(newState))
+              .then(newState => this.checkApiToken(store, newState)),
+          ).then(
+            (newState) => {
+              const filterPromise = (newState.authenticated && typeof this.props.filter === 'function') ? this.props.filter() : Promise.resolve('ok');
+              const finish = () => this.setState(newState); // finally update the component state
+              return filterPromise.then(finish, finish);
+            },
+          ),
+      );
+    }
   }
 
   render() {
     const Component = this.props.component;
+    let params = {}; // router params
+    if (this.props.match) {
+      params = this.props.match.params || {};
+    }
+
     window.scrollTo(0, 0);
     if (this.state.redirectTo) {
       return (<Redirect to={this.state.redirectTo} />);
-    } else if (this.state.authenticated) {
-      let params = {};
-      if (this.props.match) {
-        params = this.props.match.params || {};
-      }
+    } else if ( this.props.public ) {
+      return (
+        <Body {...this.props}>
+          <Component params={params} location={this.props.location} history={this.props.history} />
+        </Body>
+      );
+    } else if (this.state.authenticated ) {
       return (
-        <div>
+        <Body {...this.props}>
           <ReduxAuthTimeoutPopup />
           <Component params={params} location={this.props.location} history={this.props.history} />
-        </div>
-      ); // pass through react-router matcher params ...
+        </Body>
+      );
     }
-    return (<Spinner />);
+    return (<Body {...this.props}><Spinner /></Body>);
   }
 }
 

diff --git a/src/components/Footer.test.jsx b/src/components/Footer.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { StaticRouter } from 'react-router-dom';
 
 import Footer from './Footer';
 
@@ -8,7 +9,11 @@ describe('The Footer component', () => {
     Object.assign(Footer.defaultProps,
       { dictionaryVersion: 'test.test.test', apiVersion: 'api.api.api' },
     );
-    const footer = mount(<Footer />);
+    const footer = mount(
+      <StaticRouter location={{ pathname: '/dd' }}>
+        <Footer />
+      </StaticRouter>,
+    );
     const span = footer.find('span');
     expect(span.length).toBe(2);
     expect(span.at(1).text()).toMatch(/Dictionary vtest.test.test, API vapi.api.api/);

diff --git a/src/index.js b/src/index.js
@@ -21,11 +21,11 @@ import UserProfile, { fetchAccess } from './UserProfile/ReduxUserProfile';
 import CertificateQuiz from './Certificate/ReduxQuiz';
 import GraphQLQuery from './GraphQLEditor/ReduxGqlEditor';
 import { basename } from './localconf';
-import { OuterWrapper, Box, Body, Margin, theme } from './theme';
+import { OuterWrapper, Box, Margin, theme } from './theme';
 import { asyncSetInterval } from './utils';
 import { getReduxStore } from './reduxStore';
 import Nav from './Nav/ReduxNavBar';
-import Footer, { setFooterDefaults } from './components/Footer';
+import Footer from './components/Footer';
 import ReduxQueryNode, { submitSearchForm } from './QueryNode/ReduxQueryNode';
 
 
@@ -46,8 +46,10 @@ async function init() {
       store.dispatch(fetchDictionary),
       fetchVersionInfo().then(({ status, data }) => {
         if (status === 200) {
-          setFooterDefaults({ dictionaryVersion: data.dictionary.version,
-            apiVersion: data.version });
+          Object.assign(Footer.defaultProps,
+            { dictionaryVersion: data.dictionary.version,
+              apiVersion: data.version },
+          );
         }
       }),
     ],
@@ -62,70 +64,68 @@ async function init() {
             <OuterWrapper>
               <Box background={background}>
                 <Nav />
-                <Body background={background}>
-                  <Switch>
-                    <Route path="/login" component={Login} />
-                    <Route
-                      exact
-                      path="/"
-                      component={
-                        props => <ProtectedContent component={AmbiHomepage} {...props} />
+                <Switch>
+                  <Route path="/login" component={Login} />
+                  <Route
+                    exact
+                    path="/"
+                    component={
+                      props => <ProtectedContent component={AmbiHomepage} {...props} />
+                    }
+                  />
+                  <Route
+                    path="/query"
+                    component={
+                      props => <ProtectedContent component={GraphQLQuery} {...props} />
+                    }
+                  />
+                  <Route
+                    path="/identity"
+                    component={
+                      props => <ProtectedContent filter={() => store.dispatch(fetchAccess())} component={UserProfile} {...props} />
+                    }
+                  />
+                  <Route
+                    path="/quiz"
+                    component={props => <ProtectedContent component={CertificateQuiz} {...props} />}
+                  />
+                  <Route
+                    path="/dd/:node"
+                    component={props => <ProtectedContent public component={DataDictionaryNode} {...props} />}
+                  />
+                  <Route
+                    path="/dd"
+                    component={props => <ProtectedContent public component={DataDictionary} {...props} />}
+                  />
+                  <Route
+                    path="/files"
+                    component={props => <ProtectedContent background={'#ecebeb'} component={ExplorerPage} {...props} />}
+                  />
+                  <Route
+                    path="/:project/search"
+                    component={
+                      (props) => {
+                        const queryFilter = () => {
+                          const location = props.location;
+                          const queryParams = querystring.parse(location.search ? location.search.replace(/^\?+/, '') : '');
+                          if (Object.keys(queryParams).length > 0) {
+                            // Linking directly to a search result,
+                            // so kick-off search here (rather than on button click)
+                            return store.dispatch(
+                              submitSearchForm({ project: props.match.params.project, ...queryParams }),
+                            );
+                          }
+                          return Promise.resolve('ok');
+                        };
+                        return (<ProtectedContent filter={queryFilter} component={ReduxQueryNode} {...props} />);
                       }
-                    />
-                    <Route
-                      path="/query"
-                      component={
-                        props => <ProtectedContent component={GraphQLQuery} {...props} />
-                      }
-                    />
-                    <Route
-                      path="/identity"
-                      component={
-                        props => <ProtectedContent filter={() => store.dispatch(fetchAccess())} component={UserProfile} {...props} />
-                      }
-                    />
-                    <Route
-                      path="/quiz"
-                      component={props => <ProtectedContent component={CertificateQuiz} {...props} />}
-                    />
-                    <Route
-                      path="/dd/:node"
-                      component={props => <DataDictionaryNode params={props.match.params} {...props} />}
-                    />
-                    <Route
-                      path="/dd"
-                      component={DataDictionary}
-                    />
-                    <Route
-                      path="/files"
-                      component={props => <ProtectedContent component={ExplorerPage} {...props} />}
-                    />
-                    <Route
-                      path="/:project/search"
-                      component={
-                        (props) => {
-                          const queryFilter = () => {
-                            const location = props.location;
-                            const queryParams = querystring.parse(location.search ? location.search.replace(/^\?+/,'') : '');
-                            if (Object.keys(queryParams).length > 0) {
-                              // Linking directly to a search result, 
-                              // so kick-off search here (rather than on button click)
-                              return store.dispatch(
-                                submitSearchForm({ project: props.match.params.project, ...queryParams }),
-                              );
-                            }
-                            return Promise.resolve('ok');
-                          };
-                          return (<ProtectedContent filter={queryFilter} component={ReduxQueryNode} {...props} />);
-                        }
-                      }
-                    />
-                    <Route
-                      path="/:project"
-                      component={props => <ProtectedContent component={ProjectSubmission} {...props} />}
-                    />
-                  </Switch>
-                </Body>
+                    }
+                  />
+                  <Route
+                    path="/:project"
+                    component={props => <ProtectedContent component={ProjectSubmission} {...props} />}
+                  />
+                </Switch>
                 <Margin background={background} />
               </Box>
               <Footer />

diff --git a/src/theme.js b/src/theme.js
@@ -58,10 +58,6 @@ export const Box = styled.div`
 export const OuterWrapper = styled.div`
   height: 100%;  
 `;
-export const Body = styled.div`
-  background: ${props => props.background};
-  padding: 50px 100px;
-`;
 
 export const Margin = styled.div`
   height: 100px;