es6 modules notation and reformat.

formspree/js/Portal.js

@@ -3,7 +3,7 @@
 const React = require('react')
 const createPortal = require('react-dom').createPortal
 
-module.exports = class Portal extends React.Component {
+export default class Portal extends React.Component {
   render() {
     return createPortal(
       this.props.children,

formspree/js/forms/CreateForm.js

@@ -7,9 +7,9 @@ const React = require('react')
 const toastr = window.toastr
 const fetch = window.fetch
 
-const modals = require('../modals')
+import Modal from '../Modal'
 
-module.exports = class CreateForm extends React.Component {
+export default class CreateForm extends React.Component {
   constructor(props) {
     super(props)
 

formspree/js/forms/Dashboard.js

@@ -3,10 +3,10 @@
 const React = require('react')
 const {BrowserRouter: Router, Route} = require('react-router-dom')
 
-const FormList = require('./FormList')
-const FormPage = require('./FormPage')
+import FormList from './FormList'
+import FormPage from './FormPage'
 
-module.exports = class Dashboard extends React.Component {
+export default class Dashboard extends React.Component {
   render() {
     return (
       <Router>

formspree/js/forms/FormList.js

@@ -6,10 +6,10 @@ const React = require('react')
 const cs = require('class-set')
 const {Link} = require('react-router-dom')
 
-const CreateForm = require('./CreateForm')
-const Portal = require('../Portal')
+import CreateForm from './CreateForm'
+import Portal from '../Portal'
 
-module.exports = class FormList extends React.Component {
+export default class FormList extends React.Component {
   constructor(props) {
     super(props)
 

formspree/js/forms/FormPage/FormDescription.js

@@ -2,9 +2,7 @@
 
 const React = require('react') // eslint-disable-line no-unused-vars
 
-module.exports = FormDescription
-
-function FormDescription({prefix, form}) {
+export default function FormDescription({prefix, form}) {
   return (
     <h2 className="form-description">
       {prefix}{' '}

formspree/js/forms/FormPage/Integration.js

@@ -3,12 +3,11 @@
 const React = require('react')
 const CodeMirror = require('react-codemirror2')
 const cs = require('class-set')
+const {Link} = require('react-router-dom')
 require('codemirror/mode/xml/xml')
 require('codemirror/mode/javascript/javascript')
 
-const {Link} = require('react-router-dom')
-
-module.exports = class FormIntegration extends React.Component {
+export default class FormIntegration extends React.Component {
   constructor(props) {
     super(props)
 

formspree/js/forms/FormPage/Settings.js

@@ -4,9 +4,9 @@ const toastr = window.toastr
 const fetch = window.fetch
 const React = require('react')
 
-const SettingsSwitch = require('./SettingsSwitch')
+import SettingsSwitch from './SettingsSwitch'
 
-module.exports = class FormSettings extends React.Component {
+export default class FormSettings extends React.Component {
   constructor(props) {
     super(props)
 
@@ -27,18 +27,16 @@ module.exports = class FormSettings extends React.Component {
     return (
       <>
         <div className="container" id="settings">
-          <SettingsSwitch 
-            title="Form Enabled" 
+          <SettingsSwitch
+            title="Form Enabled"
             fieldName="disabled"
             description="You can disable this form to cause it to stop receiving new
               submissions temporarily or permanently."
             onChangeFn={() => this.update}
             checkedFn={() =>
-              'disabled' in tmp 
-                ? !tmp.disabled 
-                : !form.disabled
+              'disabled' in tmp ? !tmp.disabled : !form.disabled
             }
-          ></SettingsSwitch>
+          />
           <SettingsSwitch
             title="reCAPTCHA"
             fieldName="captcha_disabled"
@@ -50,7 +48,7 @@ module.exports = class FormSettings extends React.Component {
                 ? !tmp.captcha_disabled
                 : !form.captcha_disabled
             }
-          ></SettingsSwitch>
+          />
           <SettingsSwitch
             title="Email Notifications"
             fieldName="disable_email"
@@ -58,11 +56,9 @@ module.exports = class FormSettings extends React.Component {
               download the submissions from the dashboard."
             onChangeFn={() => this.update}
             checkedFn={() =>
-              'disable_email' in tmp
-                ? !tmp.disable_email
-                : !form.disable_email
+              'disable_email' in tmp ? !tmp.disable_email : !form.disable_email
             }
-          ></SettingsSwitch>
+          />
           <SettingsSwitch
             title="Submission Archive"
             fieldName="disable_storage"
@@ -74,8 +70,8 @@ module.exports = class FormSettings extends React.Component {
                 ? !tmp.disable_storage
                 : !form.disable_storage
             }
-          ></SettingsSwitch>
-          
+          />
+
           <div className="row">
             <div className={this.state.deleting ? 'col-1-2' : 'col-5-6'}>
               <h4>
@@ -92,8 +88,8 @@ module.exports = class FormSettings extends React.Component {
                   </span>
                 ) : (
                   <span>
-                    Deleting the form will erase all traces of this form on
-                    our databases, including all the submissions.
+                    Deleting the form will erase all traces of this form on our
+                    databases, including all the submissions.
                   </span>
                 )}
               </p>

formspree/js/forms/FormPage/SettingsSwitch.js

@@ -2,34 +2,36 @@
 
 const React = require('react') // eslint-disable-line no-unused-vars
 
-module.exports = SettingsSwitch
-
-function SettingsSwitch({title, fieldName, description, checkedFn, onChangeFn}) {
+export default function SettingsSwitch({
+  title,
+  fieldName,
+  description,
+  checkedFn,
+  onChangeFn
+}) {
   return (
     <>
-    <div className="row">
-      <div className="col-1-1">
-        <h4>{title}</h4>
+      <div className="row">
+        <div className="col-1-1">
+          <h4>{title}</h4>
+        </div>
+        <div className="switch-row">
+          <label className="switch">
+            <input
+              type="checkbox"
+              onChange={onChangeFn()}
+              checked={checkedFn()}
+              name={fieldName}
+            />
+            <span className="slider" />
+          </label>
+        </div>
       </div>
-      <div className="switch-row">
-        <label className="switch">
-          <input
-            type="checkbox"
-            onChange={onChangeFn()}
-            checked={checkedFn()}
-            name={fieldName}
-          />
-          <span className="slider" />
-        </label>
+      <div className="row">
+        <div className="col-1-1">
+          <p className="description">{description}</p>
+        </div>
       </div>
-    </div>
-    <div className="row">
-      <div className="col-1-1">
-        <p className="description">
-          {description}
-        </p>
-      </div>
-    </div>
     </>
   )
 }

formspree/js/forms/FormPage/Submissions.js

@@ -4,7 +4,7 @@ const toastr = window.toastr
 const fetch = window.fetch
 const React = require('react')
 
-module.exports = class FormSubmissions extends React.Component {
+export default class FormSubmissions extends React.Component {
   constructor(props) {
     super(props)
 

formspree/js/forms/FormPage/Whitelabel.js

@@ -14,7 +14,7 @@ const MODAL_REVERT = 'revert'
 const MODAL_PREVIEW = 'preview'
 const MODAL_SYNTAX = 'syntax'
 
-module.exports = class FormSettings extends React.Component {
+export default class FormSettings extends React.Component {
   constructor(props) {
     super(props)
 

formspree/js/forms/FormPage/index.js

@@ -5,14 +5,14 @@ const fetch = window.fetch
 const React = require('react')
 const {Route, Link, NavLink, Redirect} = require('react-router-dom')
 
-const Portal = require('../../Portal')
-const Integration = require('./Integration')
-const Submissions = require('./Submissions')
-const Settings = require('./Settings')
-const Whitelabel = require('./Whitelabel')
-const FormDescription = require('./FormDescription')
+import Portal from '../../Portal'
+import Integration from './Integration'
+import Submissions from './Submissions'
+import Settings from './Settings'
+import Whitelabel from './Whitelabel'
+import FormDescription from './FormDescription'
 
-module.exports = class FormPage extends React.Component {
+export default class FormPage extends React.Component {
   constructor(props) {
     super(props)
 
@@ -37,9 +37,9 @@ module.exports = class FormPage extends React.Component {
         </Portal>
         <Portal to="#header .center">
           <h1>Form Details</h1>
-          {this.state.form &&
+          {this.state.form && (
             <FormDescription prefix="For " form={this.state.form} />
-          }
+          )}
         </Portal>
         <Route
           exact

formspree/js/forms/main.js

@@ -4,7 +4,7 @@ const render = require('react-dom').render
 const React = require('react') // eslint-disable-line no-unused-vars
 const Modal = require('react-modal')
 
-const Dashboard = require('./Dashboard')
+import Dashboard from './Dashboard'
 
 if (document.querySelector('body.forms.dashboard')) {
   let el = document.querySelector('.container.block')