Guide For Dynamic Insertion For Form - javascript

So here is some background info for context on my question.
There is a form that depending on a certain response you can go one of two ways on the form. A or B. on both A and B routes they both share the same navbar except for the phone number portion.
the phone number comes from an API response that has a dynamic number. Depending on if the form is on a A or B route there are certain parameters that are different in the API call that return a number. (ex: id, or a block number from a parameter in the api call).
So we accomplished this before by making two navbars and based on a parameter we would push in the url would make it choose if it was the navbar for route A or B. But since the navbar would be re-rendered every step the api would be called every-time they entered a new step.
My initial thought process would be to create two useEffects in the Navbar.jsx component and set states for A and B api calls right off the bat. and then pass those as props in the App.js file. and set the default to A data until we reach the dynamic part of the form, and once that question is answered then we switch the Navbar properties to B if B was the choice. But im not sure exaclty how to accomplish this or if this is even the correct way to go about this!
If you need anymore information or would like some code examples to better understand, i can add those as edits. Thank you in advance!

Related

Approach for implementing screen in angular (Edit vs view mode ) on click

We have a similar screen which needs to be developed :
https://ux.stackexchange.com/questions/93159/view-mode-or-always-in-edit-mode
with the following feature :
Clicking of button, the fields should be editable.
In the image, the data is being repeated, but we have different data ( ex : first card template will be personal information, second one will be addresses, and so on)
if there is a change in the input boxes, then call corresponding API on click of save
button.
I am confused on how to approach this screen.
I was thinking of using forms, where in i can create form controls for individual template and on click of button push the form in dynamic array. But i am not sure if its the right approach.
Can someone please help me out or point out a similar example which i can reference?
I think your question is about 2 fields :
UX Design and components organization
First of all, I think to split correctly your components to do it, atomic design methodology is very good.
In your case, you have a lot of information for each column. So each column need to have a new page to update informations.
See more : https://medium.muz.li/atomic-design-methodology-166261ce47c2
But honestly, I'm not a specialist for this part, It's better to post this questions on uxstackexchange.
Organization and way to manage api calls in Angular app
See Atomic design (clean architecture) for Angular here : https://medium.com/weekly-webtips/angular-clean-arquitecture-d40e9c50f51
I think in your app, the best way to manage data + call api is to implement ngrx store. Because you will have a lot of informations and a lot of call api to manage.
So It's very a good option to implement directly ngrx store to manage this part of your app. And you already use rxjs, so it's the same concept but with a store to manage global state in your entire app.
See more : https://v9.ngrx.io/guide/store

Make a change in an Angular service show up in all of the components that use that service

I am building the clone of a website/app called Kualitee.com. It is a test-management tool used by QA Engineers.
In kualitee, you have multiple projects, with test cases and members. You can add, delete, and change projects and members. There is a header on top which enables you to select a project of which you want the data of i.e test cases and stuff.
the header for changing projects
The approach I used for this is as follow:
1. one service containing all the data
2. one service containing only the project selected...
The whole app uses the data found in the second service. When I make a change in a project, say add a new member, it does display that at that time. After that, if I change the project in the select at the top to another project, the component containing that member does not change, even though the project is a different one now, but as soon as I switch to another component, through routing, and back again, the changes are there.
My point is, is there any way I can add functionality where, if a parent component changes an object in service, the change reflects in a child component also using that same object in that same service, without me needing to change components or refresh.
PS. This is my first time asking something on StackOverflow, Sorry if my question is confusing.
You probably need an observable shared service to share the data between components. Here is how to achieve that: Interaction between components using a service
I think you are referred to Angular life cycle https://angular.io/guide/lifecycle-hooks

Passing values between components: Pass References vs Subjects

tl;dr: Why not pass variables by reference between components to have them work on the same data instead of using e.g. BehaviorSubjects?
I'm writing a sort of diary application in Angular 8. I have two components (Navbar and Dashboard) and a service (EntryService).
Navbar lists the entries, Dashboard provides the textarea, EntryService glues them together and communicates with the database.
While debugging the application I stumbled upon a way to communicate between the service and a component that i haven't thought of before.
By accident I passed a variable (entry: Entry) from the Dashboard by reference to the EntryService. The service saved to the database getting a unique ID back and saving this ID into the entry variable. This change immediately reflected to the Dashboard because of the 'passing by reference'.
Until now I was using Subjects to update the components on changes, but passing references around seems to be much simpler, because I want to work on the same data on both components and the service.
I've studied Angular for a while now and not read about this approach, so I'm wondering if it is a bad idea or design and if yes why?
Thanks for your answers!
Passing by reference can be handy. But as a general approach to keep the application components in sync it has some draw backs. With Subjects you can easily investigate in which places of the application the value of the Subject will be changed by checking where the Subject.next() function is being called. When you pass your object by reference to a hundred components/services it will be much more difficult to find out, which of them modify the object and more importantly when, becaue often you want to trigger other changes afterwards. When you subscribe to Subjects, you get notifications about changes and can react to them. Subjects and Subscribers are an example for an Observer/Observable pattern, it allows you to decouple your application logic. And they are much more flexible, for example you can have a Subject which can return the last x number of changes or you can debounce the changes when you track user input, you can apply filters to them etc.

ReactJS + Redux | Collect data from individual components to a higher level and make a request

I have in my React/Redux App, a selection of components. Each component is basically a Form. I am using Formik for the form, no problem there.
We have the following Components:
1. Input text and text area.
2. Multi-select with autocomplete and dropdown.
3. Checkbox Table with a few options
The actual components aren't finished but my problem isn't with them. The problem is the following:
We have 2 screen implementation for the previous components. One is a read/edit screen. The other one is a create screen wizard style, with 3 steps.
THE PROBLEM
There are validation steps and data fetching in all steps. That means, that I want to make a call before going to the next step to validate stuff with the server. On the other hand, I want to update or create items on the server on a single call.
My approach would be to actually dispatch a call for validation, on each step, and at that time if the response is OK, then move that data 1 step higher in the component/object/state level. The same would happen for every step. And at the end, a final validation before submitting either the edit or the create request to the server.
The problem is I have no idea how to do it. I am using React, Redux, RxJS and Redux Observables, to handle asynchronous data. For the wizard I have used both step-zilla and react-albus, but I don't mind making my own.
I am not expecting anyone to answer this, as I will not paste any code, as it does not make any sense. If you could create a sandbox with a simple example it would be great. Thank you and merry christmas...

ExtJS: Loading multiple stores using one Grid

I am fairly new to ExtJS so I was wondering which approach is best for displaying different views of information using one grid. This is what I'm thinking about doing. I have three different data stores that are each utilizing the proxy and returning JSON. Let's call them STORE1, STORE2 and STORE3. I'm using different stores because each one has different parameters that are being executed to be retrieved from the server. Now, I want to include three buttons, each triggering a store to be used to populate the Grid. How exactly do I specify a new store for the Grid to use after it's been instantiated? I don't see a setStore() in the Grid object so I'm not sure how to go about solving my problem. If someone could provide me some insight, that would be much appreciated.
Grid has method bindStore. If you need to also assign different set of columns - check reconfigure method
There are several ways to go about this problem.
The first thing I would do is really think through your use case. Are you sure this is the way you want to handle your user interface? Would it make more sense to filter the data (either by default or by the user interaction). There are several examples of this out there. One that comes to mind is the simple task widget (not that simple) http://docs.sencha.com/ext-js/4-1/#!/example/simple-tasks/index.html - the top right button filter the store based on user selection. It uses one grid + one store .. but filters the data based on user selection.
If you are set on loading data from different stores you can utilize one store to manage the view and other stores to fetch data. On load of the stores that fetch data you use loadData (or loadRecords) method to update the store that controls the view. Makes sense? Watch out for corner cases here though ..what happens if you load the same data twice? Should you use "append" option on the loadData method?
good luck.

Categories

Resources