Migrates terms of service and how to pages

amsnyder · Mar 18, 2019 · 1121303 · 1121303
1 parent 369748c
commit 1121303
Show file tree

Hide file tree

Showing 22 changed files with 200 additions and 256 deletions.
diff --git a/pages/app/Howto.js → layout/app/how-to/component.js b/pages/app/Howto.js → layout/app/how-to/component.js
@@ -1,33 +1,24 @@
-import React, { PureComponent }  from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import renderHTML from 'react-render-html';
-import { connect } from 'react-redux';
-import { getStaticData } from 'redactions/static_pages';
+
+// components
 import Layout from 'layout/layout/layout-app';
 
-class Howto extends PureComponent {
-  static async getInitialProps({ store }) {
-    // Get static data
-    await store.dispatch(getStaticData('how-to'));
-    return {};
-  }
+class LayoutHowTo extends PureComponent {
+  static propTypes = { data: PropTypes.object.isRequired }
 
   render() {
     const { data } = this.props;
-    const styles = {};
+    const styles = { ...(data && data.photo) && { backgroundImage: `url(${process.env.STATIC_SERVER_URL}${data.photo.cover})` } };
 
     if (!data) return null;
 
-    if (data && data.photo) {
-      styles.backgroundImage = `url(${process.env.STATIC_SERVER_URL}${data.photo.cover})`;
-    }
-
     return (
       <Layout
         title="How to"
+        // TO-DO: fill description
         description="How to description"
-        url={this.props.url}
-        user={this.props.user}
         className="l-static"
       >
         <section className="l-content">
@@ -50,7 +41,7 @@ class Howto extends PureComponent {
                   <div className="row align-center">
                     <div className="column small-12 medium-8">
                       <div className="c-terms">
-                        {renderHTML(data.content || '')}
+                        {renderHTML(data.content)}
                       </div>
                     </div>
                   </div>
@@ -64,17 +55,4 @@ class Howto extends PureComponent {
   }
 }
 
-Howto.propTypes = {
-  data: PropTypes.object,
-  getStaticData: PropTypes.func
-};
-
-const mapStateToProps = state => ({
-  data: state.staticPages['how-to']
-});
-
-const mapDispatchToProps = {
-  getStaticData
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Howto);
+export default LayoutHowTo;
diff --git a/layout/app/how-to/index.js b/layout/app/how-to/index.js
@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+
+// component
+import LayoutHowTo from './component';
+
+export default connect(
+  state => ({ data: state.staticPages['how-to'] }),
+  null
+)(LayoutHowTo);
diff --git a/pages/app/Terms.js → layout/app/terms-of-service/component.js b/pages/app/Terms.js → layout/app/terms-of-service/component.js
@@ -1,44 +1,32 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import renderHTML from 'react-render-html';
 
-import withRedux from 'next-redux-wrapper';
-import { initStore } from 'store';
-import { getStaticData } from 'redactions/static_pages';
-
-import Page from 'layout/page';
+// components
 import Layout from 'layout/layout/layout-app';
 
-class Terms extends Page {
-  static async getInitialProps(context) {
-    const props = await super.getInitialProps(context);
-
-    // Get static data
-    await context.store.dispatch(getStaticData('terms-of-service'));
-    return { ...props };
-  }
+class LayoutTermsOfService extends PureComponent {
+  static propTypes = { data: PropTypes.object.isRequired }
 
   render() {
     const { data } = this.props;
-    const styles = {};
+    const styles = { ...(data && data.photo) && { backgroundImage: `url(${process.env.STATIC_SERVER_URL}${data.photo.cover})` } };
 
     if (!data) return null;
 
-    if (data && data.photo) {
-      styles.backgroundImage = `url(${process.env.STATIC_SERVER_URL}${data.photo.cover})`;
-    }
-
     return (
       <Layout
         title="Terms of service"
+        // TO-DO: fill description
         description="Terms of service description"
-        url={this.props.url}
-        user={this.props.user}
         className="l-static"
       >
         <section className="l-content">
           <header className="l-content-header">
-            <div className="cover" style={styles}>
+            <div
+              className="cover"
+              style={styles}
+            >
               <div className="row">
                 <div className="column small-12">
                   <div className="content">
@@ -56,31 +44,17 @@ class Terms extends Page {
                   <div className="row align-center">
                     <div className="column small-12 medium-8">
                       <div className="c-terms">
-                        {renderHTML(data.content || '')}
+                        {renderHTML(data.content)}
                       </div>
                     </div>
                   </div>
                 </article>
-              </div>
-            }
+              </div>}
           </div>
         </section>
       </Layout>
     );
   }
 }
 
-Terms.propTypes = {
-  data: PropTypes.object,
-  getStaticData: PropTypes.func
-};
-
-const mapStateToProps = state => ({
-  data: state.staticPages['terms-of-service']
-});
-
-const mapDispatchToProps = {
-  getStaticData
-};
-
-export default withRedux(initStore, mapStateToProps, mapDispatchToProps)(Terms);
+export default LayoutTermsOfService;
diff --git a/layout/app/terms-of-service/index.js b/layout/app/terms-of-service/index.js
@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+
+import LayoutTermsOfService from './component';
+
+export default connect(
+  state => ({ data: state.staticPages['terms-of-service'] }),
+  null
+)(LayoutTermsOfService);
diff --git a/modules/index.js b/modules/index.js
@@ -1,10 +1,12 @@
 import { handleModule } from 'redux-tools';
 
 import dashboardsModule from './dashboards';
+import staticPagesModules from './static-pages';
 import topicsModule from './topics';
 
 export default {
   dashboards: handleModule(dashboardsModule),
+  staticPages: handleModule(staticPagesModules),
   topics: handleModule(topicsModule)
 };
 
diff --git a/modules/static-pages/actions.js b/modules/static-pages/actions.js
@@ -0,0 +1,32 @@
+import { createAction, createThunkAction } from 'redux-tools';
+
+// service
+import { fetchStaticPage } from 'services/static-page';
+
+// actions
+export const setContentPage = createAction('STATIC-PAGES__SET-CONTENT-PAGE');
+export const setLoading = createAction('STATIC-PAGES__SET-LOADING');
+export const setError = createAction('STATIC-PAGES__SET-ERROR');
+
+export const getStaticPage = createThunkAction('STATIC-PAGES__GET-STATIC-PAGE',
+  page => (dispatch) => {
+    dispatch(setLoading({ key: page, value: true }));
+    dispatch(setError(true));
+
+    return fetchStaticPage(page)
+      .then((contentPage) => {
+        dispatch(setContentPage({ key: page, value: contentPage }));
+        dispatch(setLoading(false));
+      })
+      .catch((err) => {
+        dispatch(setError(err));
+        dispatch(setLoading(false));
+      });
+  });
+
+export default {
+  setContentPage,
+  setLoading,
+  setError,
+  getStaticPage
+};
diff --git a/modules/static-pages/index.js b/modules/static-pages/index.js
@@ -0,0 +1,5 @@
+import * as actions from './actions';
+import * as reducers from './reducers';
+import initialState from './initial-state';
+
+export default { actions, reducers, initialState };
diff --git a/modules/static-pages/initial-state.js b/modules/static-pages/initial-state.js
@@ -0,0 +1,14 @@
+export default {
+  loading: true,
+  error: null,
+  about: {},
+  apps: {},
+  'contribute-data': {},
+  'develop-app': {},
+  getInvolved: {},
+  'how-to': {},
+  'join-community': {},
+  'submit-an-insight': {},
+  'terms-of-service': {},
+  topics: {}
+};
diff --git a/modules/static-pages/reducers.js b/modules/static-pages/reducers.js
@@ -0,0 +1,23 @@
+import * as actions from './actions';
+
+export default {
+  [actions.setContentPage]: (state, { payload }) =>
+    ({
+      ...state,
+      [payload.key]: {
+        ...state[payload.key],
+        ...payload.value
+      }
+    }),
+
+  [actions.setLoading]: (state, { payload }) =>
+    ({
+      ...state,
+      loading: payload
+    }),
+  [actions.setError]: (state, { payload }) =>
+    ({
+      ...state,
+      error: payload
+    })
+};
diff --git a/pages/app/Dashboards.js b/pages/app/Dashboards.js
diff --git a/pages/app/about/component.js b/pages/app/about/component.js
@@ -1,15 +1,15 @@
 import React, { PureComponent } from 'react';
 
 // actions
-import { getStaticData } from 'redactions/static_pages';
+import { getStaticPage } from 'modules/static-pages/actions';
 
 // components
 import AboutLayout from 'layout/app/about';
 
 class AboutPage extends PureComponent {
   static async getInitialProps({ store }) {
     // fetchs static data for about page
-    await store.dispatch(getStaticData('about'));
+    await store.dispatch(getStaticPage('about'));
 
     return {};
   }

diff --git a/pages/app/attribution-requirements/component.js b/pages/app/attribution-requirements/component.js
@@ -1,15 +1,15 @@
 import React, { PureComponent } from 'react';
 
 // actions
-import { getStaticData } from 'redactions/static_pages';
+import { getStaticPage } from 'modules/static-pages/actions';
 
 // components
 import LayoutAttributionRequirements from 'layout/app/attribution-requirements';
 
 class AttributionRequirementsPage extends PureComponent {
   static async getInitialProps({ store }) {
     // fetchs static data for attribution & requirements page
-    await store.dispatch(getStaticData('api-attribution-requirements'));
+    await store.dispatch(getStaticPage('api-attribution-requirements'));
     return {};
   }