Lint warning fixes

clearn up form and widget code. Form is now a pure component

cleaned up syntax in PaymentForm

broke down APIClient into smaller methods

refactored error messages into components

if dispatch is not provided, then return early

broke down permission methods and removed unnecessary functions

apiClient set on object not on state

formatting updates

cleaning up formatting

more linting fixes

Author: joekrump

.eslintrc.json

@@ -8,8 +8,8 @@
   },
   "extends": "airbnb",
   "plugins": [
-      "react",
-      "jsx-a11y",
-      "import"
+    "react",
+    "jsx-a11y",
+    "import"
   ]
 }

src/auth.js

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

src/components/Dashboard/ActiveUsersWidget.js

@@ -4,7 +4,7 @@ import Gravatar from '../Menu/AdminMenu/Gravatar';
 import { List, ListItem } from 'material-ui/List';
 import LensIcon from 'material-ui/svg-icons/image/lens';
 import { lightGreenA400 } from 'material-ui/styles/colors';
-import APIClient from '../../http/requests';
+import { APIClient } from '../../http/requests';
 import CircularProgress from 'material-ui/CircularProgress';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Widget.scss';
@@ -17,24 +17,26 @@ class ActiveUsersWidget extends React.Component {
       data: [],
     };
   }
+
   componentDidMount() {
     const client = new APIClient(this.props.dispatch);
     client.get('users/active').then((res) => {
       if (res.statusCode !== 200) {
-      // Couldn't get the active users for some reason. Likely something wrong with the API server.
+        console.warn('error', res);
       } else {
         client.updateToken(res.header.authorization);
         this.setState({ data: res.body.data });
       }
     }).catch((res) => {
-      console.log('error', res);
+      console.warn('error', res);
     });
   }
+
   render() {
     let usersSection = null;
 
     if (this.state.data && (this.state.data.length > 0)) {
-      usersSection = this.state.data.map((user, i) => {
+      const userListItems = this.state.data.map((user, i) => {
         return (
           <ListItem
             key={`user-${i}`}
@@ -51,7 +53,7 @@ class ActiveUsersWidget extends React.Component {
           <h2 className="widget-title">{this.props.name}</h2>
           {this.state.data.length === 0 ? (<CircularProgress />) :
             <List>
-              {usersSection}
+              { userListItems }
             </List>
           }
         </div>
@@ -62,6 +64,5 @@ class ActiveUsersWidget extends React.Component {
   }
 }
 
-export default withStyles(s)(
-  connect()(ActiveUsersWidget) // call connect so that we have access to dispatch in props.
-);
+// call connect so that we have access to dispatch in props
+export default withStyles(s)(connect()(ActiveUsersWidget));

src/components/Dashboard/Widget.js

@@ -5,8 +5,6 @@ import Paper from 'material-ui/Paper';
 const Widget = (props) => ({
 
   render() {
-    
-    // Will be blank if there are no other users online, otherwise will show widget.
     return ( 
       <Paper zDepth={2} className="widget-wrapper">
         {props.children}

src/components/Editor/Editor.js

@@ -1,5 +1,5 @@
 // src/components/Editor/Editor.js
-import APIClient from '../../http/requests'
+import { APIClient } from '../../http/requests'
 import ContentTools from 'ContentTools';
 import {ImageUploader, buildCloudinaryURL, parseCloudinaryURL} from './ImageUploader';
 

src/components/Editor/Quote.js

@@ -21,9 +21,7 @@ const makeQuote = (_super) => {
   ContentTools.ToolShelf.stow(Quote, 'quote');
 
   Quote.label = 'Quote';
-
   Quote.icon = 'subheading';
-
   Quote.tagName = 'quote';
 
   return Quote;

src/components/Form/AddButton.js

@@ -2,16 +2,15 @@ import FloatingActionButton from 'material-ui/FloatingActionButton';
 import ContentAdd from 'material-ui/svg-icons/content/add';
 
 const AddButton = (props) => {
-
-  handleAddClick(e){
+  handleAddClick(e) {
     e.preventDefault();
-    
-  },
+  }
+
   return (
     <FloatingActionButton onClick={handleAddClick}>
       <ContentAdd />
     </FloatingActionButton>
-  )
-}
+  );
+};
 
 export default AddButton;

src/components/Form/Form.js

@@ -1,14 +1,10 @@
 // src/components/Form/Form.js
 import React from 'react';
 
-const Form = () => ({
-  render() {
-    return (
-      <form onSubmit={this.props.onSubmit}>
-        {this.props.children}
-      </form>
-    );
-  }
-});
+const Form = (props) => (
+  <form onSubmit={props.onSubmit}>
+    { props.children }
+  </form>
+);
 
 export { Form };

src/components/Form/SubmitButton.js

@@ -3,7 +3,7 @@ import React from 'react';
 import RaisedButton from 'material-ui/RaisedButton';
 import SendIcon from 'material-ui/svg-icons/content/send';
 
-const SubmitButton = (props) => (
+const SubmitButton = props => (
   <RaisedButton
     className="submit-btn"
     primary

src/components/Form/TextInput.js

@@ -7,7 +7,7 @@ import { updateFormValidationStatus } from '../../redux/actions/form';
 
 const style = {
   display: 'block'
-}
+};
 
 const TextInput = () => ({
   updateValue(value) {
@@ -104,7 +104,7 @@ const mapStateToProps = (state, ownProps) => {
     value: state.forms[ownProps.formName].fields[ownProps.name].value,
     errors: state.forms[ownProps.formName].fields[ownProps.name].errors
   }
-}
+};
 
 const mapDispatchToProps = (dispatch) => {
   return {
@@ -123,11 +123,11 @@ const mapDispatchToProps = (dispatch) => {
       dispatch(updateFormValidationStatus(valid, formName));
     }
   };
-}
+};
 
 const TextInputRedux = connect(
   mapStateToProps,
   mapDispatchToProps
-)(TextInput)
+)(TextInput);
 
-export {TextInputRedux as TextInput}
+export { TextInputRedux as TextInput };

src/components/Form/index.js

@@ -1,3 +1,3 @@
 export { Form } from './Form';
 export { TextInput } from './TextInput';
-export {default as SubmitButton} from './SubmitButton';
+export { default as SubmitButton } from './SubmitButton';

src/components/Forms/ContactForm.js

@@ -1,6 +1,6 @@
 // src/componetns/Forms/ContactForm.js
 import React from 'react';
-import APIClient from '../../http/requests'
+import { APIClient } from '../../http/requests'
 import { connect } from 'react-redux';
 
 // mui components
@@ -9,12 +9,11 @@ import { Form, TextInput, SubmitButton } from '../Form/index';
 import validations from '../../form-validation/validations'
 import NotificationSnackbar from '../Notifications/Snackbar/Snackbar'
 
+const formName = "contactForm";
 const listItemStyle = {
   padding: "0 16px"
 };
 
-const formName = "contactForm";
-
 class ContactForm extends React.Component {
 
   componentDidMount(){
@@ -45,14 +44,13 @@ class ContactForm extends React.Component {
 
   submitToServer(){
     const client = new APIClient(this.props.dispatch)
-    var formInputValues = {};
+    const httpMethod = 'post';
+    let formInputValues = {};
 
     Object.keys(this.props.formFields).forEach((key) => {
       formInputValues[key] = this.props.formFields[key].value;
     })
 
-    let httpMethod = 'post';
-
     client[httpMethod]('contact', false, {data: formInputValues})
      .then(this.submitResolve, this.submitReject)
      .catch(this.handleRequestException)

src/components/Forms/PaymentForm/ErrorDiv.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { redA700 } from 'material-ui/styles/colors';
+
+const ErrorDiv = (props) => (
+  <div className="payment-content">
+    <h3 style={{color: redA700}} className="payment-header">{props.title}</h3>
+    <p>{ props.message }</p>
+  </div>
+);
+
+export default ErrorDiv;

src/components/Forms/PaymentForm/LoadingError.js

@@ -0,0 +1,11 @@
+import React from "react";
+import ErrorDiv from "./ErrorDiv";
+
+const LoadingError = () => (
+  <ErrorDiv 
+    title="Error While Loading Payment System"
+    message="Please try refreshing the page."
+  />
+);
+
+export default LoadingError;