I want to make an app where the admins can create "global" forms that other users can fill in. So I need these global forms to be dynamically rendered, and they are kind of big (30+ fields) and are divided in stages (e.g. stage 1 is for personal info, stage 2 is for job skills, etc).
I thought of receiving these "global" forms via JSON, something like this:
{
"filledBy":"User",
"stages":[
{
"id":1,
"name":"Personal information",
"fields":[
{
"id":1,
"type":"email",
"name":"email",
"label":"E-mail",
"placeholder":"name#company.com",
"value":"",
"rules":{
"required":true
}
},
{
"id":2,
"type":"text",
"name":"name",
"label":"Name",
"placeholder":"John Smith",
"value":"",
"pattern":"[A-Za-z]",
"rules":{
"required":true,
"minLength":2,
"maxLength":15
}
}
]
},
{
"id":2,
"name":"Job profile",
"fields":[
{
"id":1,
"type":"multi",
"name":"workExperience",
"subfields":[
{
"id":1,
"type":"text",
"name":"position",
"label":"Position",
"placeholder":"CEO",
"value":"",
"rules":{
"required":true,
"minLength":3,
"maxLength":30
}
},
{
"id":2,
"type":"date",
"name":"startDate",
"label":"Starting date",
"placeholder":"November/2015",
"value":"",
"rules":{
"required":true,
"minValue":"01/01/1970",
"maxValue":"today",
"showAsColumn":true
}
},
{
"id":3,
"type":"date",
"name":"endDate",
"label":"Ending date",
"placeholder":"March/2016",
"value":"",
"rules":{
"required":true,
"minValue":"endDate",
"maxValue":"today",
"showAsColumn":true
}
}
]
}
]
}
]
}
So I created a component called MasterForm that first gets the empty form in componentDidMount(), like a blueprint. Then, once it is fetched, it tries to get the data entered by the user and put it in the form as the value property. After that, it passes the form down to the Stage component which renders every field as an Input component. That way, MasterForm controls the current stage, and allows the user to navigate among stages, and also fetches the data and fills the form. With all the checks and stuff, my MasterForm component got very big (around 700 lines), and every time I update the value of a field in the form, I update the whole form object in the state, so I think that might be slow. Also, to fill in the form with the user's data, I have to copy every nested object and array inside the form object, to avoid mutating the state, and that's also very messy (a lot of const updatedFields = { ...this.state.form.stage.fields } and stuff).
Are there better ways to do this (preferably without Redux)? How could I decouple this huge MasterForm component? Is there a better way to update the form values (other than updating the whole form every time)? or maybe React is smart and doesn't update the whole state, but just the bit that changed... I'm not sure, I'm new to React.
Look into formik https://github.com/jaredpalmer/formik and Yup https://github.com/jquense/yup
Here they are coupled together https://jaredpalmer.com/formik/docs/guides/validation#validationschema
Related
I have a data structure typed like:
export interface IGroup {
id: number;
name: string;
groupTypeId: number;
items: IItem[];
groups: IGroup[];
}
Which recursively represents many to many relationships between a "Group" and a "Group" and an "Group" and an "Item". Groups are made up of items and child groups. An item derives to just a simple type and other meta data, but can have no children. A single group represents the top of the hierarchy.
I currently have components, hooks, etc to recursively take a single group and create an edit/create form as shown below:
I have this form "working" with test data to produce a standard data output as below on save:
{
"1-1": {
"name": "ParentGroup",
"groupType": 2
},
"2-4": {
"name": "ChildGroup1",
"groupType": 1
},
"2-9": {
"name": "ChildGroup2",
"groupType": 3
},
"2-1": {
"itemType": "FreeForm",
"selectedName": "Testing",
"selectedClass": 5
},
"2-2": {
"itemType": "FreeForm",
"selectedName": "DisplayTest",
"selectedClass": 5
},
"3-4": {
"itemType": "EnumValue",
"selectedItem": {
"id": 12900503,
"name": "TRUE"
}
},
"3-5": {
"itemType": "EnumValue",
"selectedItem": {
"id": 12900502,
"name": "FALSE"
}
},
"3-9": {
"itemType": "FreeForm",
"selectedName": "Test",
"selectedClass": 5
},
"3-10": {
"itemType": "FreeForm",
"selectedName": "Tester",
"selectedClass": 5
},
"3-11": {
"itemType": "FreeForm",
"selectedName": "TestTest",
"selectedClass": 5
}
}
The "key" to these objects are the grid column and row since there are no other guaranteed unique identifiers (if the user is editing, then it is expected groups have ids in the db, but not if the user is adding new groups in the form. Otherwise, the name is an input form that can be changed.) It makes sense and it is easy to model the keys this way. If another group or item is added to the hierarchy, it can be added with its column and row.
The problem that I have is that I would love to be able to have an add button that would add to a groups items or group arrays so that new rows in the hierarchy could be created. My forms should handle these new entries.
Ex.
"1-1": {
groups: [..., {}],
items: [..., {}]
}
But the only data structure that I have is the IGroup that is deeply nested. This is not good for using as state and to add to this deeply nested state.
The other problem I have is that I need to be able to map the items and groups to their position so that I can translate to the respective db many to many tables and insert new groups/items.
Proposed solution:
I was thinking that instead of taking a group into my recursive components, I could instead create normalized objects to use to store state. I would have one object keyed by column-row which would hold all the groups. Another keyed by column-row to hold all the items. Then I think I would need two more objects to hold many to many relationships like Group to Group and Group to Item.
After I get the data from the form, I hopefully can loop through these state objects, find the hierarchy that way and post the necessary data to the db.
I see that this is a lot of data structures to hold this data and I wasn't sure if this was the best way to accomplish this given my modeling structure. I have just started using Redux Toolkit as well, so I am somewhat familiar with reducers, but not enough to see how I could apply them here to help me. I have been really trying to figure this out, any help or guidance to make this easier would be much appreciated.
Go with normalizing. Each entity having a single source of truth makes it much easier to read and write state.
To do this, try normalized-reducer. It's a simple higher-order-reducer with a low learning curve.
Here is a working CodeSandbox example of it implementing a group/item composite tree very similar to your problem.
Basically, you would define the schema of your tree:
const schema = {
group: {
parentGroupId: { type: 'group', cardinality: 'one', reciprocal: 'childGroupIds' },
childGroupIds: { type: 'group', cardinality: 'many', reciprocal: 'parentGroupId' },
itemIds: { type: 'item', cardinality: 'many', reciprocal: 'groupId' }
},
item: {
groupId: { type: 'group', cardinality: 'one', reciprocal: 'itemIds' }
}
};
Then pass it into the library's top-level function:
import normalizedSlice from 'normalized-reducer';
export const {
emptyState,
actionCreators,
reducer,
selectors,
actionTypes,
} = normalizedSlice(schema);
Then wire up the reducer into your app (works with both React useReducer and the Redux store reducers), and use the selectors and actionCreators to read and write state.
I am somewhat new to React and looking for best practices for a particular situation within my React/Redux/Firebase PWA. Right now, the part I am concerned with is essentially a wrapper for the Yelp API.
I have a main component that queries the Yelp API when loaded (inside componentDidMount) based on user preferences received elsewhere in the app. This component also queries the API on a form submit with user inputs. It loops thru the data from both, and passes props to a child component. This view looks like a list of all the businesses received from the API. Here's what an example looks like:
"businesses": [
{
"rating": 4,
"price": "$",
"phone": "+14152520800",
"id": "E8RJkjfdcwgtyoPMjQ_Olg",
"alias": "four-barrel-coffee-san-francisco",
"is_closed": false,
"categories": [
{
"alias": "coffee",
"title": "Coffee & Tea"
}
],
"review_count": 1738,
"name": "Four Barrel Coffee",
"url": "https://www.yelp.com/biz/four-barrel-coffee-san-francisco",
"coordinates": {
"latitude": 37.7670169511878,
"longitude": -122.42184275
},
"image_url": "http://s3-media2.fl.yelpcdn.com/bphoto/MmgtASP3l_t4tPCL1iAsCg/o.jpg",
"location": {
"city": "San Francisco",
"country": "US",
"address2": "",
"address3": "",
"state": "CA",
"address1": "375 Valencia St",
"zip_code": "94103"
},
"distance": 1604.23,
"transactions": ["pickup", "delivery"]
},
// ...
],
As mentioned before, the main component passes down data to the child component, which renders each single object that list. This child component also creates a Link to another component based on the id of each business. This other component for now is simply the exact same look as one individual child component, just on a different URL. For example, the main component is "/venues" and the individual page for a business would be "/venue/E8RJkjfdcwgtyoPMjQ_Olg". The data is pulled from the Redux state (its a HOC), and filtered out to find that id.
The problem I'm running in to is when I refresh the page while on a businesses's individual page, Redux state is cleared out and hence is unable to render properly with the data. To try and work around this I attempted to have a service worker cache everything it would need, but this does not work. Refreshing ends up just showing the loading page I created, because its not making the call (which is expected - don't want it doing this) and its also not pulling data from the caches.
Is there a better way to accomplish getting data all the way to the individual business component after a refresh? Or a better way to cache the entire page/API response so it will render properly on a refresh?
I suppose I could have it reach out to the API for that specific business but I was trying to avoid that.
I remember Yelp API has an endpoint where you can get details of an individual business. That said, you should have a dynamic route for your individual business page; e.g. /businesses/:id. Then you can access this query param in your route props and go from there to fetch data for that specific business.
Something like this:
class IndividualBusiness extends Component {
// ...
componentDidMount() {
fetchBusinessById(this.props.match.id).then(setState(...))
// ...
}
// ...
}
The route would look like something like this:
<Route exact path="/businesses/:id" render={(routeProps) => <IndividualBusiness {...routeProps} />}/>
But what about when data is already in redux store? Simple, just add the control flow in your componentDidMount().
Have you tried localStorage? there's a redux middleware for it. It looks something like this:
import {createStore, compose} from 'redux';
import persist from 'redux-localstorage';
const store = createStore(reducer, compose(...otherMiddleware, persist(['apiResponses'])))
That should make the "apiResponses" section of your redux state persist through browser reloads.
I've have the following data coming from a node backend:
Endpoint:
/user/:id?startDate=2011-10-05T14:48:00.000Z&endDate=2011-10-05T14:48:00.000Z
[
{
"name": "Tom",
"createdAt": "2011-10-05T14:48:00.000Z",
"updatedAt": "2011-10-05T14:48:00.000Z",
...
"metadata": {
"activeHours": 134.45,
"afkHours": 134.45
}
},
{
...
}
]
In this data, the only thing modified between date changes is activeHours and afkHours.
These users and the date that the endpoint was called with must be synced across all pages.
The simple approach would be to put this in a users reducer, something like:
{
users: [...],
startDate: "",
endDate: ""
}
However I'm currently using normalizr with these users and with that I have a single action named ADD_ENTITIES. Having an entities reducer seems very beneficial as we do have other entities that can be nicely normalized with these users, however I don't want to pollute the entities state with almost "tacked on" startDate and endDate to sync across all pages.
On to my question:
Is there a better way to model this problem using normalizr, Where your key is not only ID but also a date range?
Or should I look at breaking this out into a separate reducer as above?
Not sure if I completely understood the problem here.
Is the startDate and endDate fields, different for each user ? If yes, then you may need to add those fields in the normalized entity object for those users.
If those are common fields for all the users, you can create a separate entity called userDateRange containing those two keys. It doesn't need to be normalized as they are primitive fields.
{
"entities": {
"user": {
"byId": {
"user1": {},
"user2": {}
},
"allIds": [
"user1",
"user2"
]
}
},
"ui": {
"userDateRange": {
"start": "2011-10-05T14:48:00.000Z",
"end": "2011-10-05T14:48:00.000Z"
}
}
}
I'm new to ReactJS and am unsure about the best place to put validation logic that is needed both by nested child components in my form, and the overall "parent" form component itself. Here is a over-simplified example that illustrates my question...
I have a object like this that represents a pet owner:
{
name: 'Jon Arbuckle',
pets: [
{ name: 'Odie', type: 'dog' },
{ name: 'Garfield', type: 'cat' }
]
}
I'm using a composite component called <PetOwnerForm> to render a form for editing this data. <PetOwnerForm> renders something like this:
<input type="text" value={name} />
<PetList value={petOwner.pets} />
<PetList> is a composite component that renders this:
<PetListItem value={this.props.value[i]} /> // Render this for each pet...
// buttons for adding/deleting pets
<PetListItem> renders something like this:
<input type="text" value={this.props.value.name} />
<PetTypePicker value={this.props.value.type} />
Lastly, <PetTypePicker> renders a <select> with <option>s for pet types.
<PetTypePicker> needs to know how to validate the selected type so it can display an inline error message (e.g., ensure that a value is selected).
However, <PetOwnerForm> also needs to know how to validate the pet type because it needs to know how to validate the entire object (on load, each time the form is updated, and before submitting the data back to the server). If any field is invalid, the "Save" button should be disabled.
So where, for example, should the "is a valid pet type selected?" logic go? (Bear in mind that this is a trivial example; in reality I have many fields like this and nested composite components).
The options I see so far are:
A) Replicate the validation logic for pet type (or whatever field) both in <PetOwnerForm> and <PetTypePicker>. This might just be a matter of calling the same, shared validation function in both places:
//PetOwnerForm.js:
validate(petOwnerObj) {
Util.isPetTypeValid(petOwnerObj.pets[i]) // for each pet
// validate the other properties in petOwnerObj...
}
//PetTypePicker.js:
validate(petType) {
Util.isPetTypeValid(petType)
}
B) Use custom PetOwner, Pet, and PetType models that have their own validators. This way you can always ask a model to validate itself, regardless of where it is. Maybe this would look something like this:
{
name: { value: 'Jon Arbuckle', isValid: ()=>{...} },
pets: [
{
name: { value: 'Garfield', isValid: ()=>{...} },
type: { value: 'cat', isValid: ()=>{...} }
},
...
]
}
C) Modify PetOwnerForm.js go recurse the pet owner object, validating each value, and setting an 'errors' property that child components can reference, resulting in an object like this:
{
name: { value: 'Jon Arbuckle asdfasdfasdf^^', errors: ['Too many characters', 'Contains invalid character']] },
pets: [
{
name: { value: '', errors: ['Required value missing'] },
type: { value: 'tree', errors: ['Invalid pet type'] }
},
...
]
}
Which option is recommended for React apps (or is there another option)?
It's a nice elaborate question. This question is not specific to ReactJS applications. It applies to all frameworks that follow component model.
Following are my recommendations:
Differentiate between action driven validation and data format validation.
Low level components are aware of data format they accept, so they must validate for it. For example, postal-code, email, phone, SSN etc have fixed formats and their corresponding components must validate for the right input format.
Low level components are not aware of actions being performed on the overall data. For example, selection of pet-owner-type can be mandatory for "create" pet-owner action but can be optional for "save draft" action. So, low level components which are not aware of end action must not perform action driven validations.
Action driven validation must be performed by the higher level component aware of action, for example PetOwnerForm. Such validation result must be notified to low level components so that they can display appropriate errors. Every low level component must have an error state to support it.
I have just started to look into angular-schema-form, so this might be something I've missed in the docs or description.
What I am trying to do is to add an icon next to the label of generated form fields and next to the field itself. Like so:
But out of the box angular-schema-form will generate:
I know I can make my own custom field types, but is that the way to go? That would require me to redefine all field types in a custom variant, because I need these two icons and their functionality on all my form fields.
I was hoping there were an easier way to add this functionality to generated html, and an easy way to add functionality (ng-click function) on them.
Edit: After reading through the docs again, I've figured out that I need to define my own custom field type (https://github.com/Textalk/angular-schema-form/blob/development/docs/extending.md)
From what I gather, I need to add the following to my modules config block:
schemaFormDecoratorsProvider.addMapping(
'bootstrapDecorator',
'custominput',
'shared/templates/customInput.tpl.html',
sfBuilderProvider.builders.sfField
);
I have also added the contents of shared/templates/customInput.tpl.html to $templatesCache.
But when I try to render a form, with a schema like
"schema": {
"type": "object",
"properties": {
"firstName": {
"title": "First name",
"type": "string"
},
"lastName": {
"title": "Last name",
"type": "custominput"
},
"age": {
"title": "Age",
"type": "number"
}
}
}
I only see the first field (firstName) and age. The custom type is just ignored.
I have tried to debug my way to the problem, but as far as I can see, the custom field is correctly added to the decorator. I've tried to console.log the schemaFormDecoratorsProvider.decorator() and there I can see my custom field type.
I've also tried to fire off a $scope.$broadcast('schemaFormRedraw') in my controller, but I still only see the built in field types.
As a test, I've tried to define my own decorator, overwriting the default Bootstrap decorator:
schemaFormDecoratorsProvider.defineDecorator('bootstrapDecorator', {
'customType': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders},
// The default is special, if the builder can't find a match it uses the default template.
'default': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders},
}, []);
I would expect to see all fields to be rendered the same, since I only define a default type and my own custom type. But still, I only see built in types rendered, my custominput is till just ignored.
What am I missing?
I've had this same problem, the problem is that you should not confuse the JSON schema with the form definition.
To render a custom component you have to change the form definition. I.e in your controller your standard form defintion might look something like:
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
You'll have to change this to:
$scope.form = [
"firstName",
"age",
{
key:"lastName",
type:"customInput"
},
{
type: "submit",
title: "Save"
}
];