fix: fix checkbox handling

nearform · Dec 4, 2020 · 760e289 · 760e289
1 parent a35aa50
commit 760e289
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 26 deletions.
diff --git a/packages/brokeneck-desktop/package.json b/packages/brokeneck-desktop/package.json
@@ -30,7 +30,7 @@
     "prettier": "^2.2.1"
   },
   "lint-staged": {
-    "**/*.{js}": [
+    "**/*.js": [
       "eslint --fix"
     ]
   }

diff --git a/packages/brokeneck-fastify/lib/plugins/auth/azure/index.js b/packages/brokeneck-fastify/lib/plugins/auth/azure/index.js
@@ -26,8 +26,8 @@ async function azure(fastify, options) {
       userPrincipalName: String!
       mailNickname: String!
       password: String!
-      accountEnabled: Boolean
-      forceChangePasswordNextLogin: Boolean
+      accountEnabled: Boolean!
+      forceChangePasswordNextLogin: Boolean!
     }
 
     extend input GroupInput {

diff --git a/packages/brokeneck-fastify/package.json b/packages/brokeneck-fastify/package.json
@@ -51,7 +51,7 @@
     "tap": "^14.11.0"
   },
   "lint-staged": {
-    "**/*.{js}": [
+    "**/*.js": [
       "eslint --fix"
     ]
   }

diff --git a/packages/brokeneck-html/package.json b/packages/brokeneck-html/package.json
@@ -37,7 +37,7 @@
     "lint-staged": "^10.5.2"
   },
   "lint-staged": {
-    "**/*.{js}": [
+    "**/*.js": [
       "eslint --fix"
     ]
   },

diff --git a/packages/brokeneck-react/package.json b/packages/brokeneck-react/package.json
@@ -65,7 +65,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4"
   },
   "lint-staged": {
-    "**/*.{js}": [
+    "**/*.js": [
       "eslint --fix"
     ]
   }

diff --git a/packages/brokeneck-react/src/components/FormField.js b/packages/brokeneck-react/src/components/FormField.js
@@ -2,7 +2,11 @@ import React from 'react'
 import T from 'prop-types'
 import { Box, Checkbox, FormControlLabel, TextField } from '@material-ui/core'
 
-export default function FormField({ field, handleChange, formValues }) {
+export default function FormField({
+  field: { initialValue, ...field },
+  handleChange,
+  formValues
+}) {
   switch (field.type) {
     case 'checkbox':
       return (
@@ -12,7 +16,11 @@ export default function FormField({ field, handleChange, formValues }) {
             label={field.label}
             control={
               <Checkbox
-                checked={field.value}
+                checked={
+                  field.name in formValues
+                    ? formValues[field.name]
+                    : initialValue
+                }
                 onChange={handleChange}
                 {...field}
               />
@@ -29,7 +37,9 @@ export default function FormField({ field, handleChange, formValues }) {
             fullWidth
             margin="dense"
             onChange={handleChange}
-            value={formValues[field.name] || ''}
+            value={
+              field.name in formValues ? formValues[field.name] : initialValue
+            }
             {...field}
           />
         </Box>
@@ -42,7 +52,7 @@ FormField.propTypes = {
     name: T.string.isRequired,
     label: T.string.isRequired,
     type: T.string.isRequired,
-    value: T.any
+    initialValue: T.any.isRequired
   }).isRequired,
   handleChange: T.func.isRequired,
   formValues: T.object.isRequired

diff --git a/packages/brokeneck-react/src/hooks/useAddUserToGroupDialog.js b/packages/brokeneck-react/src/hooks/useAddUserToGroupDialog.js
@@ -38,7 +38,7 @@ export default function useAddUserToGroupDialog(userId, onConfirm) {
         name: groupFields.id,
         label: groupFields.description,
         select: true,
-        required: true,
+        ...groupFields.metadata[groupFields.id],
         children: loading ? (
           <CircularProgress />
         ) : (

diff --git a/packages/brokeneck-react/src/hooks/useAddUsersToGroupDialog.js b/packages/brokeneck-react/src/hooks/useAddUsersToGroupDialog.js
@@ -38,7 +38,7 @@ export default function useAddUsersToGroupDialog(groupId, onConfirm) {
         name: userFields.id,
         label: userFields.description,
         select: true,
-        required: true,
+        ...userFields.metadata[userFields.id],
         children: loading ? (
           <CircularProgress />
         ) : (

diff --git a/packages/brokeneck-react/src/hooks/useCreateGroupDialog.js b/packages/brokeneck-react/src/hooks/useCreateGroupDialog.js
@@ -31,8 +31,7 @@ export default function useCreateGroupDialog(onConfirm) {
     fields: inputFields.all.map(field => ({
       name: field,
       label: field,
-      required: inputFields.metadata[field].required,
-      type: inputFields.metadata[field].type
+      ...inputFields.metadata[field]
     }))
   })
 }
diff --git a/packages/brokeneck-react/src/hooks/useCreateUserDialog.js b/packages/brokeneck-react/src/hooks/useCreateUserDialog.js
@@ -31,8 +31,7 @@ export default function useCreateUserDialog(onConfirm) {
     fields: inputFields.all.map(field => ({
       name: field,
       label: field,
-      required: inputFields.metadata[field].required,
-      type: inputFields.metadata[field].type
+      ...inputFields.metadata[field]
     }))
   })
 }
diff --git a/packages/brokeneck-react/src/hooks/useDialog.js b/packages/brokeneck-react/src/hooks/useDialog.js
@@ -28,8 +28,13 @@ export default function useDialog({
     onClose()
   }
 
-  const handleChange = e =>
-    setFormValues(s => ({ ...s, [e.target.name]: e.target.value }))
+  const handleChange = e => {
+    return setFormValues(s => ({
+      ...s,
+      [e.target.name]:
+        e.target[e.target.type === 'checkbox' ? 'checked' : 'value']
+    }))
+  }
 
   const handleConfirm = async e => {
     e.preventDefault()
@@ -56,6 +61,7 @@ export default function useDialog({
         <DialogContent>
           {text && <DialogContentText>{text}</DialogContentText>}
           {fields.map(field => {
+            console.log(field)
             return (
               <FormField
                 key={field.name}

diff --git a/packages/brokeneck-react/src/hooks/useFields.js b/packages/brokeneck-react/src/hooks/useFields.js
@@ -4,8 +4,10 @@ function getFieldTypeName(field) {
   return field.type.ofType?.name || field.type.name
 }
 
+const CHECKBOX = 'checkbox'
+
 function getMetadataFieldType(field) {
-  if (getFieldTypeName(field) === 'Boolean') return 'checkbox'
+  if (getFieldTypeName(field) === 'Boolean') return CHECKBOX
   if (/password/i.test(field.name)) return 'password'
 
   return 'text'
@@ -30,16 +32,18 @@ export default function useFields(typeName) {
 
   const all = [id, ...strings, ...booleans].filter(Boolean)
 
-  const metadata = all.reduce(
-    (acc, field) => ({
+  const metadata = all.reduce((acc, field) => {
+    const type = getMetadataFieldType(field)
+
+    return {
       ...acc,
       [field.name]: {
-        required: field.type.kind === 'NON_NULL',
-        type: getMetadataFieldType(field)
+        required: type !== CHECKBOX && field.type.kind === 'NON_NULL',
+        type,
+        initialValue: type === CHECKBOX ? false : ''
       }
-    }),
-    {}
-  )
+    }
+  }, {})
 
   // description is either the first string field, if mandatory, or the id
   // this is to cope with auth0 which has a non-readable id field and a mandatory additional field