WIP Add settings page

package.json

@@ -8,20 +8,22 @@
     "axios": "^0.18.0",
     "bootstrap": "^3.3.7",
     "classnames": "^2.2.5",
+    "final-form": "^4.11.0",
     "font-awesome": "^4.7.0",
     "jquery": "^3.3.1",
+    "json-api-normalizer": "^0.4.10",
     "node-sass-chokidar": "^0.0.3",
     "npm-run-all": "^4.1.2",
     "prop-types": "^15.6.1",
     "react": "^16.2.0",
     "react-bootstrap": "^0.32.1",
     "react-dom": "^16.2.0",
+    "react-final-form": "^4.0.2",
     "react-redux": "^5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "2.0.5",
     "redux": "^3.7.2",
-    "redux-form": "^7.3.0",
     "redux-thunk": "^2.2.0"
   },
   "scripts": {

src/App.js

@@ -14,6 +14,7 @@ import CompanyNewPage from 'containers/CompanyNewPage'
 import CompanyEditPage from 'containers/CompanyEditPage'
 import CompanyDetailsPage from 'containers/CompanyDetailsPage'
 import PlaceDetailsPage from 'containers/PlaceDetailsPage'
+import SettingsPage from 'containers/SettingsPage'
 import NotFound from 'components/NotFound'
 
 class App extends Component {
@@ -33,6 +34,7 @@ class App extends Component {
           <Route path="/companies/:uuid" component={CompanyDetailsPage} />
           <Route path="/companies" component={CompanyListPage} />
           <Route path="/places/:uuid" component={PlaceDetailsPage} />
+          <Route path="/settings/:uuid/edit" component={SettingsPage} />
           <Route path="/sign_out" component={SignOutPage} />
           <Route path="/" exact component={() => <h1>Dashboard</h1>} />
           <Route component={NotFound} />

src/components/AdminForm.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Field, reduxForm } from 'redux-form'
+import { Form, Field } from 'react-final-form'
 import { Link } from 'react-router-dom'
 import Input from 'components/Input'
 
@@ -38,12 +38,22 @@ const adminForm = props => {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="form-horizontal">
+    <Form onSubmit={handleSubmit} className="form-horizontal">
       {renderError(errors)}
-      <Field component={Input} type="text" name="firstName" label="First name" />
+      <Field
+        component={Input}
+        type="text"
+        name="firstName"
+        label="First name"
+      />
       <Field component={Input} type="text" name="lastName" label="Last name" />
       <Field component={Input} type="email" name="email" label="Email" />
-      <Field component={Input} type="password" name="password" label="Password" />
+      <Field
+        component={Input}
+        type="password"
+        name="password"
+        label="Password"
+      />
       <div className="hr-line-dashed" />
       <div className="form-group">
         <div className="col-md-8 col-md-offset-2">
@@ -59,11 +69,8 @@ const adminForm = props => {
           </button>
         </div>
       </div>
-    </form>
+    </Form>
   )
 }
 
-export default reduxForm({
-  form: 'adminForm',
-  validate
-})(adminForm)
+export default adminForm

src/components/CompanyForm.js

@@ -1,22 +1,9 @@
 import React from 'react'
-import { Field, reduxForm } from 'redux-form'
+import { Form, Field } from 'react-final-form'
 import { Link } from 'react-router-dom'
 import Input from 'components/Input'
 import Select from 'components/Select'
 
-const validate = values => {
-  const errors = {}
-
-  if (!values.name || values.name.trim() === '') {
-    errors.name = 'Enter a company name'
-  }
-  if (!values.ownerId || values.ownerId.trim() === '') {
-    errors.ownerId = 'Choose a company owner'
-  }
-
-  return errors
-}
-
 const companyForm = props => {
   const { handleSubmit, pristine, submitting, admins, errors } = props
 
@@ -41,37 +28,51 @@ const companyForm = props => {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="form-horizontal">
-      {renderError(errors)}
-      <Field component={Input} type="text" name="name" label="Name" />
-      <div className="hr-line-dashed" />
-      <Field
-        component={Select}
-        name="ownerId"
-        label="Owner"
-        defaultOption="Choose a company owner..."
-        options={ownerOptions}
-      />
-      <div className="hr-line-dashed" />
-      <div className="form-group">
-        <div className="col-md-8 col-md-offset-2">
-          <Link to="/companies" className="btn btn-white">
-            Cancel
-          </Link>&nbsp;
-          <button
-            type="submit"
-            className="btn btn-primary"
-            disabled={pristine || submitting}
-          >
-            Submit
-          </button>
-        </div>
-      </div>
-    </form>
+    <Form
+      onSubmit={handleSubmit}
+      validate={values => {
+        const errors = {}
+
+        if (!values.name || values.name.trim() === '') {
+          errors.name = 'Enter a company name'
+        }
+        if (!values.ownerId || values.ownerId.trim() === '') {
+          errors.ownerId = 'Choose a company owner'
+        }
+
+        return errors
+      }}
+      className="form-horizontal"
+      render={({ handleSubmit, pristine, submitting }) => (
+        <form onSubmit={handleSubmit} className="m-t">
+          <Field component={Input} type="text" name="name" label="Name" />
+          <div className="hr-line-dashed" />
+          <Field
+            component={Select}
+            name="ownerId"
+            label="Owner"
+            defaultOption="Choose a company owner..."
+            options={ownerOptions}
+          />
+          <div className="hr-line-dashed" />
+          <div className="form-group">
+            <div className="col-md-8 col-md-offset-2">
+              <Link to="/companies" className="btn btn-white">
+                Cancel
+              </Link>&nbsp;
+              <button
+                type="submit"
+                className="btn btn-primary"
+                disabled={pristine || submitting}
+              >
+                Submit
+              </button>
+            </div>
+          </div>
+        </form>
+      )}
+    />
   )
 }
 
-export default reduxForm({
-  form: 'companyForm',
-  validate
-})(companyForm)
+export default companyForm

src/components/CompanyListItem.js

@@ -23,6 +23,9 @@ const companyListItem = props => {
         <small>{attributes.createdAt}</small>
       </td>
       <td className="project-actions">
+        <Link to={`/settings/${id}/edit`} className="btn btn-sm btn-white">
+          <i className="fa fa-cog" /> Settings
+        </Link>&nbsp;
         <Link to={`/companies/${id}`} className="btn btn-sm btn-white">
           <i className="fa fa-folder" /> View
         </Link>&nbsp;

src/components/CompanyNew.js

@@ -30,6 +30,8 @@ class CompanyNew extends Component {
       formErrors = this.props.error
     }
 
+    console.log(formErrors)
+
     return (
       <div>
         <h1>New Company</h1>
@@ -44,7 +46,7 @@ class CompanyNew extends Component {
                 </div>
                 <div className="ibox-content">
                   <CompanyForm
-                    onSubmit={this.handleSubmit}
+                    handleSubmit={this.handleSubmit}
                     admins={this.props.admins}
                     errors={formErrors}
                   />

src/components/NotFound.js

@@ -6,7 +6,9 @@ const notFound = () => (
     <h3 className="font-bold">Page Not Found</h3>
 
     <div className="error-desc">
-      Sorry, but the page you are looking for has note been found. Try checking the URL for error, then hit the refresh button on your browser or try found something else in our app.
+      Sorry, but the page you are looking for has note been found. Try checking
+      the URL for error, then hit the refresh button on your browser or try
+      found something else in our app.
     </div>
   </div>
 )

src/components/Settings.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+// import { Redirect } from 'react-router-dom'
+import SettingsForm from 'components/SettingsForm'
+
+class Settings extends Component {
+  componentWillUnmount () {
+    this.props.onResetSettings()
+  }
+
+  componentDidMount () {
+    this.props.onFetchSettings(this.props.token, this.props.match.params.uuid)
+  }
+
+  handleSubmit = values => {
+    this.props.onUpdateSettings(
+      this.props.token,
+      this.props.match.params.uuid,
+      values
+    )
+  }
+
+  render () {
+    let attributes = null
+    let formErrors = null
+    let initialValues = null
+    // let redirect = null
+
+    if (!this.props.loading && this.props.settings) {
+      attributes = this.props.settings.settings[this.props.match.params.uuid].attributes
+      initialValues = { ...this.props.settings.settings[this.props.match.params.uuid].attributes }
+    }
+
+    if (!this.props.loading && this.props.error) {
+      formErrors = this.props.error
+    }
+
+    return (
+      <div>
+        <h1>Settings</h1>
+
+        <div className="row">
+          <div className="wrapper wrapper-content animated fadeInUp">
+            <div className="col-md-12">
+              <div className="ibox float-e-margins">
+                <div className="ibox-title">
+                  <h5>Edit settings</h5>
+                </div>
+                <div className="ibox-content">
+                  <SettingsForm
+                    onSubmit={this.handleSubmit}
+                    providers={attributes}
+                    initialValues={initialValues}
+                    errors={formErrors}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Settings

src/components/SettingsForm.js

@@ -0,0 +1,94 @@
+import React from 'react'
+import { Form, Field } from 'react-final-form'
+import { Link } from 'react-router-dom'
+import Input from 'components/Input'
+import Select from 'components/Select'
+// import SettingsProviderForm from 'components/SettingsProviderForm'
+
+const settingsForm = props => {
+  const { handleSubmit, pristine, submitting, errors, providers } = props
+
+  const displayProviderForms = providerName => {
+    const initialValues = providers.providers.find(
+      provider => provider.name === providerName
+    )
+
+    const actionOptions = providers.eligibleActions[providerName].map(action => (
+      <option value={action} key={action}>
+        {action}
+      </option>
+    ))
+
+    return (
+      <div key={providerName}>
+        <h2>{providerName}</h2>
+        <Field
+          component={Input}
+          type="text"
+          name={`${providerName}.name`}
+          input={{ defaultValue: providerName }}
+        />
+        <Field
+          component={Input}
+          type="text"
+          name={`${providerName}.apiKey`}
+          label="Api key"
+          input={{ value: initialValues ? initialValues.apiKey : undefined }}
+        />
+        <Field
+          component={Input}
+          type="text"
+          name={`${providerName}.apiSecret`}
+          label="Api secret"
+          input={{ value: initialValues ? initialValues.apiSecret : undefined }}
+        />
+        <Field
+          component={Select}
+          name={`${providerName}.action`}
+          label="Action"
+          defaultOption="Choose a provider action..."
+          options={actionOptions}
+        />
+        <div className="hr-line-dashed" />
+      </div>
+    )
+  }
+
+  // const 2displayProviderForms = attributes => {
+  //   return attributes.availableProviders.map(providerName => (
+  //     <SettingsProviderForm
+  //       key={providerName}
+  //       form={providerName}
+  //       providerName={providerName}
+  //       actions={attributes.eligibleActions[providerName]}
+  //       initialValues={attributes.providers.find(
+  //         provider => provider.name === providerName
+  //       )}
+  //     />
+  //   ))
+  // }
+
+  return (
+    <Form onSubmit={handleSubmit} className="form-horizontal">
+      {providers
+          ? providers.availableProviders.map(providerName => displayProviderForms(providerName))
+          : null}
+      <div className="form-group">
+        <div className="col-md-8 col-md-offset-2">
+          <Link to="/companies" className="btn btn-white">
+            Cancel
+          </Link>&nbsp;
+          <button
+            type="submit"
+            className="btn btn-primary"
+            disabled={submitting}
+          >
+            Submit
+          </button>
+        </div>
+      </div>
+    </Form>
+  )
+}
+
+export default settingsForm