Triggering a re-fetch when coming back from a dialog modal react - javascript

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!

Related

ADB2C branching logic in User Journey via JavaScript

So, I am pretty new to ADB2C Custom Policies but here is what I have:
I have a User Journey. I have a Custom Page with a bit of JavaScript. I already solved one problem thanks to Stack Overflow but ran into another one.
When the user clicks on the login button in our customized frontend, some validation is performed. If this validation fails, we display another button which, if the user clicks it should "call" another technical profile or orchestration step in the Custom Policy.
The way how I imagine it is that this button continues my User Journey at a different predefined step, but I don't know how I would even start adding a button that does that. (I only understand that the Log In button is generated by ADB2C itself with a class "next", I presume the default behavior is that ADB2C just moves to the next orchestration step upon that button being clicked)
The reason I can't make that button just call a link is that our systems architect requested all logic being called through ADB2C, which I don't know if this is actually a good practice.
You can:
Use a custom error content page and add a button out of div with id="api". Handle the click event trough JS and make it call the same (or any other) user journey appending a query param like (policy-url)?byPassStep=2. Then you can map such value to a claim type using a claim resolver like this:
<OutputClaim ClaimTypeReferenceId="byPassStep" DefaultValue="{OAUTH-KV:byPassStep}" AlwaysUseDefaultValue="true" />
And then use it in a pre-condition:
<OrchestrationStep Order="2" Type="ClaimsExchange">
<Preconditions>
<Precondition Type="ClaimEquals" ExecuteActionsIf="true">
<Value>byPassStep</Value>
<Value>2</Value>
<Action>SkipThisOrchestrationStep</Action>
</Precondition>
</Preconditions>
</OrchestrationStep>

Reload partial and retain form values

When purchasing a course, the user can enter 1 or more students to register for the course. By default there is only one entry but the user can use a dropdown to select more and then the form will update to show more.
I am accomplishing this by triggering an event when the user changes the dropdown value that uses ajax to call an action which returns a partial with the appropriate number of entries and then I just replace the existing div with the new one.
My question is whether there is a way to implement this so that it's kind of like "refreshing" the page where the form remembers and automatically refills in he values the user already entered just like if you were to refresh the entire webpage. Is there a way to do this, or will I need to pass in the existing values into the action in my ajax call and have the partial set them?
A secondary question I just thought of (and perhaps this should be in another post but I will go ahead and put it here for now) is whether I should be concerned about any weird behavior with validation when doing it this way? (I'm using stock, built in validation with annotations).

Mithriljs inter component communication - blocking

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

Angular Form Validation Across Several States/Views

Bit of a broad question however I'm sure someone can offer me some sound advice!
I am currently developing a form which is presented to a user over several views/states. A user fills out the first section, clicks 'next', state changes and the next part of the form appears etc...
When the user goes to submit the form on the last state and they have made some mistakes in the first or second state, would it be possible to have them redirected to the sate in which they made the error, and focus on that field?
I ask simply because I will have to implement this at some point, and do not want to go forward as planned in case this is not possible using several different states to present the form.
Each state shares the same object using a service, which is used to hold the inputted data.
Any advice would be much appreciated as always.

Restricting The Viewing of Forms Per User

Please could someone assist with the following:
I'm trying to restrict the viewing of forms using bootstrap and Meteor. In other words, user A logs in and creates a simple (or 2, or 3...) form using a modal which then displays in the html on a panel. How do I ensure that when user B logs in, he only sees his particular forms and not "user A's" forms?
I haven't included any code as I haven't started working on this problem as yet.
Thank you.
That's something you need to deal with using your publications/subscriptions. See here and here for learning ressources.
Basically, what should happen is that when user A creates a form (or any object), you store it into a collection along with the user id (Meteor.userId()). You subscribe to a publication in your page where you send only the items belonging to the current user Id.
That should solve your problem, and make you ready for all the similar (and common) cases where you need to disclose selected information only, depending on the context or the user. Moreover, it means that your users will be able to find back the items they left in their previous sessions.

Categories

Resources