I am looking for the best way to route between my components in Angular 2. In my application I go from page to page by submitting a form:
Page A displays a form and a submit button to go to next step,
Data filed by the user in page A form are used to call a backend action using ajax,
Page B shows the result of the ajax call and a new form to go to next step (page C)...
At each step the backend can return an error and we either go back to previous page, or display an error page (fatal error).
I see two simple options to do the ajax call:
Component A only displays the form and forward the input parameters to component B. Component B run the ajax call and display the result.
OR component A run the ajax call with the input parameters he has and forward the result to component B for display. In case of error component A redisplay itself.
The problem with option 1 is that in case of error the backend will respond with the page A business model and an error message. Component B will have to forward the result to component A so page A can be redisplayed.
The problem with option 2 is that component A has part of the business logic of component B which is not really good for component encapsulation.
My question is: is there a good design pattern to do this? Should I use an intermediate component for example?
Thank you for your help.
I would move all ajax calls to parent component and keep all the data there too, assuming forms are independent. So workflow would be like this:
cP(arent) go to cA
cA - show form, send data to cP
cP - send A data via ajax, go to cB
cB - show form, send data to cP
cP - (got error for A data), send B data via ajax, go to cC
cC - show form, notify user there was an error with form A, offer user to go back now, or finish step C and do A later, send data to cP
cP - (got fatal error for B data), don't send C data via ajax, save data to localStorage?, tell user to try later...
...etc. It's more user friendly and you can show pages/forms as needed.
If forms depend on each other, I'd still keep the ajax and data in parent, and display them if/when server responds. But I recommend you design them do be independent, or you can play some elevator music while user waits (;
Related
I have a codesandbox for this question: https://codesandbox.io/s/chakra-modal-input-forked-jelhlr?file=/src/App.jsx
I want to get the filename via the modal, and when the user completes that action, I want to do stuff with that information, in this case I want to make an api request.
Thanks!
EDIT:
I have a form with the following onSubmit:
// 1. prepare data for POST request
const data=prepareData();
// 2. get title for data entry from user
onOpen();
// 3. send data via POST request
const response=await axios.post('route',{title,data})
The way things are, the modal shows at step 2 and without waiting for user input, step 3 occurs. I want to get the title name from the user and then I want step 3 to occur.
I found the package react-modal-promise that does exact this. Works perfectly!
The value of the textbook is saved into the ref titleInputRef.
This means you can access the value of the ref/textbox with the following:
titleInputRef.current.value
To log the value to the console, for example:
console.log(titleInputRef.current.value)
I am making a web app in which I have a section which has an input field. Anything that is submitted through the input field gets posted to an API. So when you land on that screen you see all the previous inputs made. What I am not able to figure out is and the thing I want to achieve is that when someone submits a new input it doesn't reflect in UI until and unless you go back and come back to the screen. I want that as soon as you send an input the input string should be reflected in the UI. How can this be done using AngularJS?
You have two options, at a very basic level they are:
1) The first is to re-query all the list when the item is saved:
api.save(newPost).then(() => getAllPosts());
2) You can return the recently saved post and add it to the list:
api.save(newPost).then((saved) => $scope.posts.push(saved));
You'll need to handle all the unwrapping (etc) based on how you're making the calls.
We have a web app composed of several pages containing links of data retrieved from database. Upon clicking one link[data], the user should be directed to another page. For navigation between pages, we have used breadcrumb. The breadcrumb is stored in redux store. Currently, when the user tries to ctrl+click or open link in new tab, we managed to use single store across multiple tabs. Hence, if the user opens 3 separate links [data] in new tabs, the updates made on the breadcrumb affect previously opened tabs when these tabs/pages are refreshed. For example:
In homepage, I have these links:
Data_1
Data_2
Data_3
Current breadcrumb in the homepage is like this:
HomePage/
Once the user opens Data_1 in new tab, the expected breadcrumb in the new tab is:
HomePage/Data_1/
Similarly, if the user tries to open Data_2 and Data_3, in new tabs, the breadcrumbs should appear as follows for tab 1 and tab 2, respectively:
HomePage/Data_2/
HomePage/Data_3/
In the current implementation, I managed to update the state of breadcrumb whenever new links are opened such that breadcrumb[0] would be equivalent to HomePage while breadcrumb[1] was initially Data_1, then became Data_2, and lastly Data_3. Hence, the last value of breadcrumb[1] is Data_3 since that's the last opened link. My problem is that whenever the user refreshes previously opened tabs/pages corresponding to Data_1 and Data_2, since they are all using a single store and breadcrumb[1] has been changed to Data_3, the breadcrumbs in Data_1 and Data_2 pages also become Data_3.
In this case, I can just think of using multiple stores since I perceive that it could be the only solution given my use case. Meanwhile, I can't find any sufficient documentation online regarding using multiple stores in redux. Maybe I can pass the store to the next page in params...? something like that
Can someone please help. Thanks in advance.
To emulate per-tab same site persistency, I would, right before the page is about to be refreshed (window.beforeunload or similar)
1 - Write to localStorage about my breadcrumb
2 - Refresh
3 - Read from localStorage about my breadcrumb to initialize myself properly (so the data here SHOULD be mine because i just wrote it)
4 - remove breadcrumb information from localStorage (to prevent other tabs from reading it)
Now, you still have the case where the user just closes the tab, so you would have stale data about the breadcrumb in your localStorage. You can add a little expiration mechanism (you might consider that data in the localStorage older than 10 seconds is stale and just pretend it isn't here and delete it at step 3.) Cookies would work pretty much the same, with a built-in expiration mechanism.
React router has very cool feature: if you have a list of items (Instagram for example) and if you click on one item, content opens in modal/overlay but if you copy-paste the link to new tab/window or share the link with a friend for example, it opens in its own page.
I would love to use this feature but I need to find a custom solution..
My posts are very data heavy
I've split posts data into 2 tables in database
1st is very lightweight containing essential data: 4-5 columns
2nd table is very heave, ~30 columns
When user uses search filter, list updates only with data from 1st table
If user clicks on post, it will open in a modal/overlay
I will recycle the data I already have (from 1st table) and also get rest of the data from 2nd table
However, when user shares the link or opens it in new tab/page, data from 1st table is not present. I would need to integrate a conditional logic:
If post opens in list view (modal/overlay), only get additinal 2nd table data
If it's opened in a new tab/window in its own page, get all the data, 1st table included
How could I integrate this with React router? Has anyone already tried it? This would also allow to use different layout/components when user opens item in page view. Is there a way to check it?
Or is there a flaw in my logic? I imagine list would update very fast because it doesn't require huge amount of data and also would modal/overlay because it recycles some of the data.
I read all the docs, also searched online - didn't find anything.
Modals in react router are great. I've used the pinterest example and adapted it to my own needs.
Ensure you do your check on state.modal===true in a master layout component to give you the modal styling.
you'll need to check if table 1 stuff is present in your state and dispatch an action to trigger the async call in componentDidMount. You should be fetching table 2 in all scenarios.
there is a script that i want to perrform but i want to ask you something about it.Here is the problem:
I have A and B pages.
(A---->B) According to the searching criterias in A page,it goes to B page in a way of Form Get and brings back Json data. But as Json data comes back to B page, it can't get this data and bind in B page.
When i practise this whole process in page A, in the same way i can get json data in page A and bind them.
$http.get('/B/?' + "destination=" + xxx )
.then(function(result) {
$scope.data = result.data;
});
But in page B, i want to bind json data which goes to A-->B and comes back.How can i do this by using AngularJs. You can see this script by searching hotels in www.expedia.com . Actually what i exactly want to do is available in configuration of expedia's hotel search.
Thank you.
If I get it right, what you want is to have 2 applications (2 ng-app, one on page A and one on page B) and share data using Angular.
This is not directly possible with Angular. Angular is about one page that manage the DOM. But it can have different views (see $route).
This is however possible if you pull data from the server in page A to get the result from page B once you are back to A.
What expedia seems to do is post from page A, receive data on page B and show it on page B.