I have designed a app using mithriljs(0.2.5) with components and Observer pattern for inter-component communication. However I do have a requirement of blocking an action of component based on another one.
Say, I have 2 components ItemList & ItemDetail. When an Item is selected in the list component an ITEM_SELECTED event is fired that causes the detail to be loaded. Detail component allows user details to be edited and saved.
If the details are dirty(edited not saved) and user tries to do an selection, I want to show a Save Item screen with Yes/No/Cancel option. Based on the option selected either load new details or cancel and go back to previous selection.
Selection component has no knowledge of dirtiness of the details, Detail component will render the Save Confirmation.
One option for the Detail component to fire a REVERT_SELECTION message if cancel is selected, ideal pattern would be to block the Item selection completion till Detail components gives a go/no go response, seems I need something other than observer, which is blocking.
Thanks
I suppose the best solution would be to use a Modal Dialog that will block all the GUI unti a selection on Yes/No/Cancel is done.
Im mithril 0.2.5 you varios approact available for modals.
Please take a look to this samples
Related
I have an add contact Modal and an add company Modal. When the user wants to add a contact they click the corresponding button which opens said Modal. Typically, they would fill out the information needed on this form. One of them being a Company they belong to. If the company does not exist in the system, they then have an add company button which when pressed opens another Modal on top of the contact one.
Again, the user enters the information for the company and once done, would tap save. This would then trigger a fetch which POSTS the information to my Spring Boot backend which in turn sends back a JSON object version of the company which has come from the database.
I then check it and if it comes back valid, it sets out an alert telling the user it was successful and closes the company Modal.
At this point, the user should be able to type the company name into the contact company autocomplete and find the company they've added.
However, at this point, that is not happening. The re-fetch is not triggered at all despite me thinking that when the Contact Modal is re-rendered it would trigger the re-fetch.
I've tried clearing the contactList within the return() function but this causes a Too many re-renders error.
My question is, how would I trigger a re-fetch from within the contact list once it has returned from the company modal?
My initial thought would be to not have more than one modal open at the same time. Feel free to disagree but that doesn't seem like that's how modals are intended to work. As an alternative, you could have an "Other" option and have a set of text fields conditionally appear. Upon completing the form, have a boolean variable (or however you want to do it) be passed into your backend that kicks of the business logic that creates a new company before adding the contact. Or add all that logic to your add contact SQL procedure to avoid making (a risky) two db calls for one action.
Refetch Problem
Without looking at your code, it's possible that if you're using the useEffect hook, you aren't passing any dependencies to "listen" for certain variables that have been changed. After the data comes back from that POST call, you should add code that updates the array populating the select company dropdown field (eg .then() callback)--assuming it is a dropdown and an array. This change in state should re-render the component but, for a better user experience, you may want to do it in a way that it doesn't blank out the rest of your fields.
You are probably using useEffect which makes the loop.
Try to connect refetch with an event - click or submit, within try/catch - via 2 way binding eventHandler prop that calls praticular function.
Also you can change the state, and refectch the results after the new loading of the page. Hope it helps, even as a hint!
I have three components:
Main (Containing a table component and a button)
Modal component
Form component
The workflow goes like this: A button in main "New X" calls the Modal which opens up with the Form component inside it.
In the above, I have kept the form input as a state of Form (To be able to validate etc.)
Now, I need a new workflow: A double click in the table in Main should open the modal and the form but with the row data entered in the form (To be able to edit the data)
To reuse as much code as possible I wanted to use the same Modal/Form components but pass the row data as props through Modal into component.
As for now, the row data is a state of Main, passed as props to Modal and finally passed as props to Form which then sets it to state.
My question is: Is that the correct way to handle it? In theory I could then have two components having a different state of the data.
Yes, it seems the correct way to handle it. React developer's team recommend to keep the state lifted up as much as possible.
For sure you can handle it in different ways but you'll end quite always to lift the state as up as you can.
Is that the correct way to handle it?
Yes.
In theory I could then have two components having a different state of the data.
No, not really. The Form is the only one that manages the state.
I have 2 react components. The first component is a list of item. And the 2nd component is the component representing an item.
The first component fetch data from a server in the componentDidMount lifecycle method. The first time you arrive to this page, 20 items are shown. The page also have a "Show more" button. When the user clicks on that button, 20 more data are fetched.
Let's admit that the user clicks on that button. So now 40 items are shown.
The user can click on an item, and is redirect to another page with the item details.
My problem, is when the user click on the back browser button (to gack back to the list of items), the component re-render and show only 20 items.
The previous state (with 40 items) is lost.
What i want is, if the current state has 40 items, and the user clicks on one of them (to see the detail's page), when he returns back (by the browser navigation), always show him the the same list before he went to the detail's page.
In other words, the navigation from the detail's page to the list page, must not re-render the list page.
I hope that my explanation is clear enough.
Thanks.
The problem is that when you access to the second Component the first is unmounted.
You have various choices:
- Use a store like Redux to retain data
- Present the second component without unmounting the previous (IE: modal)
- Store component state in upper state (lift state up, that resolves 90% of react pattern issues)
- Store the result in localstorage
- Store somewhere the NUMBER of items loaded to prevent to show outdated data
The way you intend to implement it really depends on data persistency/ux acceptance criteria, but you have a lot of choices.
My Apologies for being vague, but I do not know how better I can explain this situation. I am learning ReactJS and JS as well. I am working on a project where I have following Requirement.
There is a Form where user can add text, numbers
There is a DropDown Menu (I am using Material UI - http://www.material-ui.com/#/components/dropdown-menu) which once clicked opens a new Page/component
This Child Page/Component has List Data and user must be able to pick one of the items in it.
Once clicked, the data goes back to Parent Component and Child Page disappears.
Visually, I found an example of how it should work http://recordit.co/GIDxCbD28X
I am looking for guidance on how to build this workflow. Again, apologies for open-ended question, but I hope to get help on this. Thanks
You keep the selection from DropDown Menu in your Form component state. Form component has a method that sets this state to a new value. You pass this method down to DropDown Menu as a prop. DropDown menu calls this method when the user selects an item.
You should probably also keep the boolean that tells you whether DropDown Menu page/modal/whatever is visible or not, so the method that handles selection of an item can both set that flag to false and set the selected item to a new value with one setState() call.
I have a list of items and want to render the item template in a modal interface.
Requirements:
the URL should update (and hence I should use a Route)
the existing list of items should still be shown in the background (hence the modal interface)
However when using a route the last used route is automatically closed.
Note that there are 6 routes which all show a list of items.
Making the item route a child of all these routes would be a bit cumbersome.
So far I've read through these API docs, without finding what I'm looking for:
http://emberjs.com/api/classes/Ember.Route.html
http://emberjs.com/guides/routing/
http://emberjs.com/api/classes/Ember.Location.html
http://emberjs.com/guides/routing/rendering-a-template/
If you dont know the answer, but have good links to share, please do
Possible solution
On IRC it was suggested to simply render a modal using the render call (see the above link). However how can I change the URL in ember without it triggering a DOM update? (related question, Change the URL without triggering a DOM update)
This is a rough example of showing a list of items and the selected item on a modal.
http://emberjs.jsbin.com/hesubejamayo/1/edit
In combination with the following post i think you may achieve what you are looking for.
Ember Routing: Reusing a resource under multiple parent routes