Merge pull request #3 from joekrump/component-syntax-updates

Component syntax updates

Author: joekrump

src/auth.js

@@ -1,4 +1,4 @@
-import APIClient from './http/requests'
+import APIClient from "./http/requests";
 
 module.exports = {
 

src/components/App.js

@@ -15,6 +15,7 @@ class App extends React.Component {
       auth.login(null, null, this.props.loginUser, this.props.dispatch)
     }
   }
+
   shouldComponentUpdate(nextProps, nextState) {
     if(nextProps.pageStatus !== this.props.pageStatus) {
       return true;
@@ -26,6 +27,7 @@ class App extends React.Component {
       return false
     }
   }
+
   renderContent() {
     if(this.props.loggedIn) {
       if(this.props.pageStatus === 401) {
@@ -37,6 +39,7 @@ class App extends React.Component {
       return (<Page location={this.props.location} />)
     }
   }
+  
   render() {
     return (
       <div id="app">

src/components/Pages/Page/Edit.js

@@ -5,9 +5,6 @@ import { replace } from 'react-router-redux'
 import APIClient from '../../../http/requests'
 import Editor from "../../Editor/Editor"
 import s from '../../Editor/styles/content-tools.scss';
-
-// Available templates
-import * as Templates from '../Templates/Pages';
 import TextField from 'material-ui/TextField';
 import Toggle from 'material-ui/Toggle';
 import EditDrawer from '../../Menu/EditDrawer';
@@ -18,6 +15,9 @@ import AppConfig from '../../../../app_config/app';
 import defaultImage from '../Templates/Pages/home-bg.jpg';
 import { getTemplateName } from '../../../helpers/PageHelper';
 
+// Available templates
+import * as Templates from '../Templates/Pages';
+
 class PageEdit extends React.Component {
 
   constructor(props) {
@@ -29,7 +29,7 @@ class PageEdit extends React.Component {
       editContext: this.props.editContext,
       full_path: '/',
       name: null,
-      resourceURL: props.resourceNamePlural + '/' + props.resourceId,
+      resourceURL: `${props.resourceNamePlural}/${props.resourceId}`,
       show_title: false,
       slug: props.slug ? props.slug : '',
       explicitSlug: props.slug ? true : false,
@@ -93,7 +93,7 @@ class PageEdit extends React.Component {
       resourceURL: this.props.submitUrl
     });
 
-    let client = new APIClient(this.props.dispatch)
+    const client = new APIClient(this.props.dispatch)
 
     if(this.props.editContext === 'edit'){
       // if the Context is Edit, then get the existing data for the PageTemplate so it may be loaded into the page.
@@ -435,17 +435,11 @@ const mapDispatchToProps = (dispatch) => {
         notificationType
       })
     },
-    updateEditorData: (newData) => {
-      dispatch({
-        type: 'UPDATE_ADMIN_EDITOR_DATA',
-        newData
-      })
-    },
-    deleteEditorData: () => {
-      dispatch({
-        type: 'DELETE_ADMIN_EDITOR_DATA'
-      })
-    },
+    updateEditorData: (newData) => dispatch({
+      type: 'UPDATE_ADMIN_EDITOR_DATA',
+      newData
+    }),
+    deleteEditorData: () => dispatch({ type: 'DELETE_ADMIN_EDITOR_DATA'}),
     dispatch
   }
 }

src/components/Pages/Page/Page.js

@@ -1,16 +1,14 @@
-import React from 'react';
-
-import * as Templates from '../Templates/Pages';
-
-import PageNotFound from '../Errors/404/404';
-import APIClient from '../../../http/requests';
-import FrontendPage from '../../Layout/FrontendPage';
-import { connect } from 'react-redux';
-import AppConfig from '../../../../app_config/app';
-import { push } from 'react-router-redux';
-import Helmet from 'react-helmet';
-import defaultImage from '../Templates/Pages/home-bg.jpg';
-import { getTemplateName } from '../../../helpers/PageHelper';
+import React from "react";
+import * as Templates from "../Templates/Pages";
+import PageNotFound from "../Errors/404/404";
+import APIClient from "../../../http/requests";
+import FrontendPage from "../../Layout/FrontendPage";
+import { connect } from "react-redux";
+import AppConfig from "../../../../app_config/app";
+import { push } from "react-router-redux";
+import Helmet from "react-helmet";
+import defaultImage from "../Templates/Pages/home-bg.jpg";
+import { getTemplateName } from "../../../helpers/PageHelper";
 
 class Page extends React.Component {
 
@@ -23,7 +21,7 @@ class Page extends React.Component {
   }
 
   isAdminPage() {
-    return (this.props.pathname.substring(1, 6).toLowerCase() === 'admin')
+    return (this.props.pathname.substring(1, 6).toLowerCase() === "admin")
   }
 
   componentWillMount() {
@@ -35,7 +33,7 @@ class Page extends React.Component {
   loadPageContent(pathname) {
     const client = new APIClient(this.props.dispatch);
 
-    client.get('page', false, {params: {fullpath: pathname}}).then((res) => {
+    client.get("page", false, {params: {fullpath: pathname}}).then((res) => {
       this.resolveDataFetch(res, this.setPreExistingPageData)
     }, this.rejectDataFetch).catch(this.rejectDataFetch)
   }
@@ -46,7 +44,7 @@ class Page extends React.Component {
 
   navigateViaRouter = (event) => {
     event.preventDefault();
-    this.props.dispatch(push(event.currentTarget.getAttribute('href')));
+    this.props.dispatch(push(event.currentTarget.getAttribute("href")));
   }
 
   setPreExistingPageData = (res) => {
@@ -72,13 +70,13 @@ class Page extends React.Component {
 
   addLinkBehaviorToAnchorElements(anchorElements) {
     anchorElements.forEach((anchorElement) => {
-      anchorElement.addEventListener('click', this.navigateViaRouter, false);
+      anchorElement.addEventListener("click", this.navigateViaRouter, false);
     })
   }
 
   getInteralLinks() {
-    if(typeof(document) !== 'undefined') {
-      const pageTemplate = document.getElementsByClassName('page');
+    if(typeof(document) !== "undefined") {
+      const pageTemplate = document.getElementsByClassName("page");
       let internalLinks = [];
       if(pageTemplate.length > 0) {
         let contentAnchors = pageTemplate[0].getElementsByTagName("a");
@@ -100,7 +98,7 @@ class Page extends React.Component {
     if(res.statusCode && res.statusCode >= 300) {
       this.props.updatePageStatusCode(res.statusCode);
     } else {
-      console.warn('Error: ', res)
+      console.warn("Error: ", res)
     }
   }
 
@@ -135,19 +133,19 @@ class Page extends React.Component {
 
   makeHelmetMeta() {
     let headerMeta = [
-      {property: 'og:title', content: this.state.name},
-      {property: 'og:url', content: this.getPageURL()},
+      {property: "og:title", content: this.state.name},
+      {property: "og:url", content: this.getPageURL()},
     ];
 
     if(this.state.image_url) {
-      headerMeta.push({property: 'og:image', content: this.state.image_url});
+      headerMeta.push({property: "og:image", content: this.state.image_url});
     }
 
     return headerMeta;
   }
 
   getPageURL() {
-    return (typeof(window) !== 'undefined') ? window.location.href : `${AppConfig.baseUrl}/${this.props.pathname}`;
+    return (typeof(window) !== "undefined") ? window.location.href : `${AppConfig.baseUrl}/${this.props.pathname}`;
   }
 
   getPageTitle() {
@@ -179,18 +177,19 @@ const mapDispatchToProps = (dispatch) => {
   return {
     updatePageStatusCode: (statusCode) => {
       dispatch ({
-        type: 'UPDATE_PAGE_STATUS_CODE',
+        type: "UPDATE_PAGE_STATUS_CODE",
         statusCode
       })
     },
     dispatch
   }
-}
+};
+
 const mapStateToProps = (state, ownProps) => {
   return {
     pathname: state.routing.locationBeforeTransitions.pathname,
     statusCode: state.page.statusCode
   }
-}
+};
 
-export default connect(mapStateToProps, mapDispatchToProps)(Page)
+export default connect(mapStateToProps, mapDispatchToProps)(Page);

src/components/Pages/Page/RoundSocialLinks.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './RoundSocialLinks.scss';
+import React from "react";
+import withStyles from "isomorphic-style-loader/lib/withStyles";
+import s from "./RoundSocialLinks.scss";
 
 import {
   ShareButtons,
   ShareCounts,
   generateShareIcon,
-} from 'react-share';
+} from "react-share";
 
 const {
   FacebookShareButton,
@@ -23,11 +23,11 @@ const {
   PinterestShareCount,
 } = ShareCounts;
 
-const FacebookIcon = generateShareIcon('facebook');
-const TwitterIcon = generateShareIcon('twitter');
-const GooglePlusIcon = generateShareIcon('google');
-const LinkedinIcon = generateShareIcon('linkedin');
-const PinterestIcon = generateShareIcon('pinterest');
+const FacebookIcon = generateShareIcon("facebook");
+const TwitterIcon = generateShareIcon("twitter");
+const GooglePlusIcon = generateShareIcon("google");
+const LinkedinIcon = generateShareIcon("linkedin");
+const PinterestIcon = generateShareIcon("pinterest");
 
 const RoundSocialLinks = (props) => (
   <div className={`social-container ${props.className}`}>
@@ -112,8 +112,7 @@ const RoundSocialLinks = (props) => (
         url={props.url}
         className="share-count" />
     </div>
-
   </div>
 );
 
-export default withStyles(s)(RoundSocialLinks);
+export default withStyles(s)(RoundSocialLinks);

src/components/Pages/Templates/Pages/ContactTemplate.js

@@ -6,8 +6,8 @@ import s from './ContactPageTemplate.scss';
 const ContactTemplate = (props) => (
   <div className="page contact">
     <div className="page-container">
-      <div data-editable data-name="name" className="big-box" onInput={props.handleNameChanged ? props.handleNameChanged : undefined}>
-        <h1 className="page-title" data-ce-placeholder="Page Title">{props.name ? props.name : ''}</h1>
+      <div data-editable data-name="name" onInput={props.handleNameChanged ? props.handleNameChanged : undefined}>
+        <h1 className="page-title big-box" data-ce-placeholder="Page Title">{props.name ? props.name : ''}</h1>
       </div>
       <div className="page-content" data-editable data-name="content" data-ce-placeholder="Content..." dangerouslySetInnerHTML={{__html: props.content}} />
     </div>