big changees to how formdata registeres fields

.eslintrc

@@ -11,13 +11,19 @@
   "parserOptions": {
     "sourceType": "module"
   },
-  "extends": ["standard", "standard-react"],
+  "extends": [
+    "standard",
+    "standard-react",
+    "plugin:prettier/recommended",
+    "prettier/react"
+  ],
   "plugins": ["react"],
   "rules": {
     // don't force es6 functions to include space before paren
     "space-before-function-paren": 0,
     "react/react-in-jsx-scope": 0,
     // allow specifying true explicitly for boolean props
-    "react/jsx-boolean-value": 0
+    "react/jsx-boolean-value": 0,
+    "max-len": ["error", { "code": 120 }]
   }
 }

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "semi": false
+}

package.json

@@ -38,15 +38,18 @@
     "cross-env": "^5.1.4",
     "css-loader": "^3.1.0",
     "eslint": "^6.1.0",
+    "eslint-config-prettier": "^6.0.0",
     "eslint-config-standard": "^13.0.1",
     "eslint-config-standard-react": "^8.0.0",
     "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-promise": "^4.0.0",
     "eslint-plugin-react": "^7.10.0",
     "eslint-plugin-standard": "^4.0.0",
     "gh-pages": "^2.0.1",
     "markdown-to-jsx": "^6.10.2",
+    "prettier": "1.18.2",
     "react-tagsinput": "^3.19.0",
     "rollup": "^1.17.0",
     "rollup-plugin-babel": "^4.3.3",

src/Field.js

@@ -9,7 +9,14 @@ import Markdown from './fields/Markdown'
 import Toggle from './fields/Toggle'
 import { FormContext } from './state/State'
 
-const COMPLEX_FIELDS = { select: Select, password: Password, tags: Tags, markdown: Markdown, textarea: TextArea, toggle: Toggle }
+const COMPLEX_FIELDS = {
+  select: Select,
+  password: Password,
+  tags: Tags,
+  markdown: Markdown,
+  textarea: TextArea,
+  toggle: Toggle,
+}
 
 const Field = ({
   required,
@@ -23,9 +30,7 @@ const Field = ({
   ...rest
 }) => {
   const { formState, update, registerField } = useContext(FormContext)
-  // console.log('formState', formState)
   const fieldId = kebabCase(children)
-  console.log('fieldId', fieldId)
 
   useEffect(() => {
     registerField({ id: fieldId, value: defaultValue })
@@ -34,25 +39,31 @@ const Field = ({
   return (
     <div className={`field-wrapper ${fieldId}`}>
       <label htmlFor={`fresh-${fieldId}`}>
-
         <span>
           {label && children} {required && '*'}
         </span>
         {Object.keys(COMPLEX_FIELDS).includes(type) ? (
-          COMPLEX_FIELDS[type]({ options, children, className, fieldId, type, ...rest })
+          COMPLEX_FIELDS[type]({
+            options,
+            children,
+            className,
+            fieldId,
+            type,
+            ...rest,
+          })
         ) : (
           <input
             required={required}
             className={className}
             id={`fresh-${fieldId}`}
             type={type}
             value={formState[fieldId]?.value || ''}
-            onChange={e => update({ id: children, value: e.target.value })}
+            onChange={e => update({ id: fieldId, value: e.target.value })}
             {...rest}
           />
         )}
       </label>
-      {error && <div className='error'>{error}</div>}
+      {error && <div className="error">{error}</div>}
     </div>
   )
 }
@@ -64,7 +75,7 @@ Field.propTypes = {
   defaultValue: PropTypes.string,
   options: PropTypes.array,
   required: PropTypes.bool,
-  label: PropTypes.bool
+  label: PropTypes.bool,
 }
 
 Field.defaultProps = {
@@ -74,7 +85,7 @@ Field.defaultProps = {
   options: [],
   required: false,
   label: true,
-  defaultValue: null
+  defaultValue: null,
 }
 
 export default Field

src/fields/Markdown.js

@@ -1,19 +1,18 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import Markdown from 'markdown-to-jsx'
+import useSpecialField from '../hooks/useSpecialField'
 
-import { FormContext } from '../state/State'
-
-export const TextArea = ({ defaultValue = [], children, key }) => {
-  const { formState, update } = useContext(FormContext)
+export const TextArea = ({ defaultValue = '', children, fieldId }) => {
+  const { fieldState, update } = useSpecialField({ fieldId, defaultValue })
   return (
     <div style={{ display: 'flex' }}>
       <textarea
         style={{ width: '50%' }}
-        value={formState[children] || ''}
+        value={fieldState || ''}
         defaultValue={defaultValue}
-        onChange={e => update({ id: children, value: e.target.value })}
+        onChange={e => update({ id: fieldId, value: e.target.value })}
       />
-      <Markdown style={{ width: '50%' }} children={formState[children] || ''} />
+      <Markdown style={{ width: '50%' }} children={fieldState || ''} />
     </div>
   )
 }

src/fields/Select.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import useSpecialField from '../hooks/useSpecialField'
 
-const Select = ({ options, children, fieldId, defaultValue = 0, key, ...rest }) => {
+const Select = ({ options, children, fieldId, defaultValue = 0, ...rest }) => {
   const { fieldState, update } = useSpecialField({ fieldId, defaultValue })
   return (
     <select
@@ -22,7 +22,8 @@ const Select = ({ options, children, fieldId, defaultValue = 0, key, ...rest })
 
 Select.propTypes = {
   options: PropTypes.array.isRequired,
-  children: PropTypes.string
+  children: PropTypes.string,
+  fieldId: PropTypes.string.isRequired
 }
 
 Select.defaultProps = {

src/fields/TextArea.js

@@ -1,13 +1,13 @@
-import React, { useContext } from 'react'
-import { FormContext } from '../state/State'
+import React from 'react'
+import useSpecialField from '../hooks/useSpecialField'
 
-export const TextArea = ({ defaultValue = [], children }) => {
-  const { formState, update } = useContext(FormContext)
+export const TextArea = ({ defaultValue = '', fieldId, children }) => {
+  const { fieldState, update } = useSpecialField({ fieldId, defaultValue })
   return (
     <textarea
-      value={formState[children] || ''}
+      value={fieldState || ''}
       defaultValue={defaultValue}
-      onChange={e => update({ id: children, value: e.target.value })}
+      onChange={e => update({ id: fieldId, value: e.target.value })}
     />
   )
 }

src/fields/Toggle.js

@@ -1,16 +1,24 @@
 import PropTypes from 'prop-types'
-import React, { useContext } from 'react'
-import { FormContext } from '../state/State'
+import React from 'react'
+import useSpecialField from '../hooks/useSpecialField'
 import style from './toggle.css'
 
-const Toggle = ({ on, onClick, enabled, className, children }) => {
-  const { formState, update } = useContext(FormContext)
+const Toggle = ({
+  on,
+  onClick,
+  enabled,
+  className,
+  children,
+  fieldId,
+  defaultValue = false,
+}) => {
+  const { fieldState, update } = useSpecialField({ fieldId, defaultValue })
   return (
     <div className={style.switch}>
-      <input checked={formState[children]} type='checkbox' />
+      <input checked={fieldState} type="checkbox" />
       <span
         className={style.slider}
-        onClick={e => update({ id: children, value: !formState[children] })}
+        onClick={e => update({ id: fieldId, value: !fieldState })}
       />
     </div>
   )
@@ -20,11 +28,11 @@ Toggle.propTypes = {
   on: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
   enabled: PropTypes.bool,
-  className: PropTypes.string
+  className: PropTypes.string,
 }
 
 Toggle.defaultProps = {
-  className: ''
+  className: '',
 }
 
 export default Toggle

yarn.lock

@@ -1636,6 +1636,13 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+eslint-config-prettier@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz#f429a53bde9fc7660e6353910fd996d6284d3c25"
+  integrity sha512-vDrcCFE3+2ixNT5H83g28bO/uYAwibJxerXPj+E7op4qzBCsAV36QfvdAyVOoNxKAH2Os/e01T/2x++V0LPukA==
+  dependencies:
+    get-stdin "^6.0.0"
+
 eslint-config-standard-jsx@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/eslint-config-standard-jsx/-/eslint-config-standard-jsx-7.0.0.tgz#05c737d9eab524860fe6853cfd535045c3e07e5b"
@@ -1706,6 +1713,13 @@ eslint-plugin-node@^9.1.0:
     resolve "^1.10.1"
     semver "^6.1.0"
 
+eslint-plugin-prettier@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.0.tgz#8695188f95daa93b0dc54b249347ca3b79c4686d"
+  integrity sha512-XWX2yVuwVNLOUhQijAkXz+rMPPoCr7WFiAl8ig6I7Xn+pPVhDhzg4DxHpmbeb0iqjO9UronEA3Tb09ChnFVHHA==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-promise@^4.0.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz#845fd8b2260ad8f82564c1222fce44ad71d9418a"
@@ -1859,6 +1873,11 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
@@ -1979,6 +1998,11 @@ generic-names@^1.0.3:
   dependencies:
     loader-utils "^0.2.16"
 
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
+
 gh-pages@^2.0.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-2.1.0.tgz#dcf519825d77d3a3ee78763076f4158403fc88c4"
@@ -3288,6 +3312,18 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier@1.18.2:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
+  integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
+
 private@^0.1.6:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"