Skip to content

Add support for nested objects #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Joanata wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Add support for nested objects #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9a78466
Add lodash dependency
Jun 26, 2020
161dce6
Update validate util
Jun 26, 2020
cfb3502
Update useFieldState hook
Jun 26, 2020
a7f028a
Update useForm hook
Jun 26, 2020
d0ad045
Update utils test
Jun 26, 2020
0077ce1
Update hooks test
Jun 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,8 @@
"testRegex": "(test/.*\\.test.js)$"
},
"dependencies": {
"ajv": "^6.10.2"
"ajv": "^6.10.2",
"lodash": "^4.17.15"
},
"devDependencies": {
"@babel/cli": "^7.7.0",
Expand Down
7 changes: 4 additions & 3 deletions src/hooks/use-field-state.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
* Module dependencies.
*/

import { get } from 'lodash';
import { useDebugValue } from 'react';
import { useFormState } from 'context/form-state-context';

Expand All @@ -15,9 +16,9 @@ export default function useFieldState(field: string) {
const { fields } = useFormState();
const { errors, meta, values } = fields ?? {};
const fieldState = {
error: errors?.[field] ?? null,
meta: meta?.[field] ?? {},
value: values?.[field]
error: get(errors, field, null),
meta: get(meta, field, {}),
value: get(values, field)
};

useDebugValue(fieldState);
Expand Down
124 changes: 91 additions & 33 deletions src/hooks/use-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* Module dependencies.
*/

import { identity } from 'lodash';
import { get, identity, isEmpty, set } from 'lodash';
import { useCallback, useEffect, useMemo, useReducer } from 'react';
import baseValidate, {
type FieldError,
Expand Down Expand Up @@ -99,13 +99,13 @@ const valuesReducer = (state, action) => {
case actionTypes.SET_FIELD_VALUE:
return {
...state,
[payload.field]: payload.value
...set({}, payload.field, payload.value)
};

case actionTypes.REGISTER_FIELD:
return {
...state,
[payload.field]: state[payload.field]
...set({}, payload.field, get(state, payload.field))
};

case actionTypes.RESET:
Expand All @@ -116,6 +116,28 @@ const valuesReducer = (state, action) => {
}
};

/**
* Field meta keys.
*/

const fieldMetaKeys = ['active', 'dirty', 'touched'];

/**
* Get nested keys.
*/

function getNestedKeys(state: Object, allKeys: Array<string>): Array<string> {
return Object.keys(state).reduce((acc, key) => {
if (fieldMetaKeys.includes(key)) {
Copy link
Contributor

@bsonntag bsonntag Jun 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about this... What if you have a field in the form named active?

What do you think about keeping the meta object as a flat object with keys with dots? Like this:

meta: {
  'foo.bar': {
    active: false,
    // etc
  }
}

Let's discuss this on Monday, ok?

return acc;
}

acc.push(key);

return getNestedKeys(state[key], acc);
}, allKeys);
}

/**
* Meta reducer.
*/
Expand All @@ -127,61 +149,67 @@ const metaReducer = (state, action) => {
case actionTypes.BLUR:
return {
...state,
[payload.field]: {
...state[payload.field],
...set({}, payload.field, {
...get(state, payload.field),
active: false,
touched: true
}
})
};

case actionTypes.SET_FIELD_VALUE:
return {
...state,
[payload.field]: {
...state[payload.field],
...set({}, payload.field, {
...get(state, payload.field),
dirty: true
}
})
};

case actionTypes.FOCUS:
return {
...state,
[payload.field]: {
...state[payload.field],
...set({}, payload.field, {
...get(state, payload.field),
active: true
}
})
};

case actionTypes.REGISTER_FIELD:
return {
...state,
[payload.field]: {
...set({}, payload.field, {
...get(state, payload.field),
active: false,
dirty: false,
touched: false,
...state[payload.field]
}
touched: false
})
};

case actionTypes.SUBMIT_START:
return Object.keys(state).reduce((result, key) => ({
...result,
[key]: {
...state?.[key],
case actionTypes.SUBMIT_START: {
const path = getNestedKeys(state, []).join('.');

return {
...set({}, path, {
...get(state, path),
active: false,
dirty: false,
touched: true
}
}), {});
})
};
}

case actionTypes.RESET:
return Object.keys(state).reduce((result, key) => ({
...result,
[key]: {
...state?.[key],
case actionTypes.RESET: {
const path = getNestedKeys(state, []).join('.');

return {
...set({}, path, {
...get(state, path),
active: false,
dirty: false,
touched: false
}
}), {});
})
};
}

default:
return state;
Expand Down Expand Up @@ -290,10 +318,40 @@ const formReducer = (validate: Object => FieldErrors, stateReducer: (state: Form
},
isSubmitting,
meta: {
active: fieldsMetaValues.some(({ active }) => active),
dirty: fieldsMetaValues.some(({ dirty }) => dirty),
active: fieldsMetaValues.some(element => {
const nestedKeys = getNestedKeys(element, []);

if (!isEmpty(nestedKeys)) {
const path = nestedKeys.join('.');

return get(element, path).active;
}

return element.active;
}),
dirty: fieldsMetaValues.some(element => {
const nestedKeys = getNestedKeys(element, []);

if (!isEmpty(nestedKeys)) {
const path = nestedKeys.join('.');

return get(element, path).dirty;
}

return element.dirty;
}),
hasErrors: Object.entries(fieldsErrors).length > 0,
touched: fieldsMetaValues.some(({ touched }) => touched)
touched: fieldsMetaValues.some(element => {
const nestedKeys = getNestedKeys(element, []);

if (!isEmpty(nestedKeys)) {
const path = nestedKeys.join('.');

return get(element, path).touched;
}

return element.touched;
})
},
submitStatus
}, action);
Expand Down
12 changes: 7 additions & 5 deletions src/utils/validate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* Module dependencies.
*/

import { merge } from 'lodash';
import { merge, set } from 'lodash';
import Ajv from 'ajv';

/**
Expand Down Expand Up @@ -115,10 +115,12 @@ const getError = (error: ValidationError): FieldError => ({
*/

export function parseValidationErrors(validationErrors: Array<ValidationError>): FieldErrors {
return validationErrors.reduce((errors, error) => ({
...errors,
[getErrorPath(error)]: getError(error)
}), {});
return validationErrors.reduce((errors, error) => {
return {
...errors,
...set({}, getErrorPath(error), getError(error))
};
}, {});
}

/**
Expand Down
72 changes: 72 additions & 0 deletions test/src/hooks/use-field-state.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,30 @@ describe('useFieldState', () => {
expect(result.current.value).toBe('bar');
});

it('should return the nested field value', () => {
const state = {
fields: {
values: {
foo: {
bar: 'baz'
}
}
}
};

const Wrapper = ({ children }) => (
<FormStateContext.Provider value={state}>
{children}
</FormStateContext.Provider>
);

const { result } = renderHook(() => useFieldState('foo.bar'), {
wrapper: Wrapper
});

expect(result.current.value).toBe('baz');
});

it('should return the field error', () => {
const state = {
fields: {
Expand All @@ -52,6 +76,30 @@ describe('useFieldState', () => {
expect(result.current.error).toBe('bar');
});

it('should return the nested field error', () => {
const state = {
fields: {
errors: {
foo: {
bar: 'baz'
}
}
}
};

const Wrapper = ({ children }) => (
<FormStateContext.Provider value={state}>
{children}
</FormStateContext.Provider>
);

const { result } = renderHook(() => useFieldState('foo.bar'), {
wrapper: Wrapper
});

expect(result.current.error).toBe('baz');
});

it('should return the field meta state', () => {
const state = {
fields: {
Expand All @@ -71,4 +119,28 @@ describe('useFieldState', () => {

expect(result.current.meta).toBe('bar');
});

it('should return the nested field meta state', () => {
const state = {
fields: {
meta: {
foo: {
bar: 'baz'
}
}
}
};

const Wrapper = ({ children }) => (
<FormStateContext.Provider value={state}>
{children}
</FormStateContext.Provider>
);

const { result } = renderHook(() => useFieldState('foo.bar'), {
wrapper: Wrapper
});

expect(result.current.meta).toBe('baz');
});
});
Loading