Flutter share bloc between pages - api

I have a basic flutter app with 2 pages and 1 bloc.
The home page displays a list of users (only 2 attributes)
When a user-item is clicked, a detail page displays all attributes
The user data is fetched using a bloc which emits 2 states
AllUsersLoadedState from the api domain.com/users
UserLoadedState from the api domain.com/users/id
Because both home page and detail page is using the same bloc in their BlocBuilder when I navigate to the detail page and hit the back button, the home page is crashed.
Any way to handle it without writing 2 individual bloc?

If you want to share a BLoC between screens, then you should create the BLoC in such a way that it won't be destroyed while those 2 screens are active.
One way of doing this is to provide the BLoC using the Provider package, or as an InheritedWidget. If you use Provider then on each screen you just ask for the BLoC using Provider.of<MyBloc>(context). You will have to read more about Provider to learn how to use it.
Another way is passing the BLoC as a variable to your widget's constructor.

I figured out what was the issue.
Because both pages were using the same bloc they would rebuild on both states while the intended behavior was for the home page to rebuild only on AllUsersLoadedState and detail page to rebuild only on UserLoadedState.
So when I navigate to the detail page and a UserLoadedState is received the home page didn't know how to handle the state and would crash.
The solution is to use the condition parameter in the bloc builder to skip rebuilding on an unwanted state.

Related

What is the proper way to access data from multiple pages in React Native?

So I am working on my first React Native project and I am curious as to what the proper way to handle user data is. I have 3 different pages that are: HomePage, ProfilePage, ChatPage. When a user logs in it navigates them to the HomePage.
As of now, I have it to where when the HomePage loads it makes a backend call that retrieves all of the user data and sets it to some states.
Now when the user navigates to a new page like the ProfilePage none of the data is there anymore of course so do I have to make another backend call? So one backend call for each page? Im sure there has to be some way to only make the backend call once. Could I possibly set a global state of some sort? Should I save all the user data to AsyncStorage?
My current File structure is as follows:
App.js -> Contains my React Navigation stack
HomePage.js
ProfilePage.js
ChatPage.js
Thanks for the help!
You can use Redux plus React-Redux.
To say in short redux is a state management library for react. The states will be global to your app accessible across various components inside app. also there will be reactivity.
For more info visit this link
https://react-redux.js.org/
You should use React-Redux and manage your states globally.

For Page Object Pattern, when designing the page objects in Selenium, how do you handle multiple modals correctly?

Let me further explain.
You have a page where an application lives. However, upon first login, the user is prompted with a welcome screen that loads in the center of the browser. Like a pop-up from the application. This welcome screen is to help the user get familiar with the app. You can move on through the screens by reading the information and clicking the Continue button. After several of these pop-ups, the application will now be available for testing.
So how would I handle this in the Page Object Pattern using Selenium. Should I have a main page that just has functionality to navigate through these modals? Or should the main page return objects that represent each of the individual modals? Or should each modal be a separate page that I interact with?
Basically, I can think of several options:
ApplicationPage.Modal1.Continue();
or
Modal1.Continue();
Modal2.Continue();
or
ApplicationPage.ContinueThroughModal1();
or
ModalPage.Continue1();
ModalPage.Continue2();
I prefer to look at pages as collection of services. So
should the main page return objects that represent each of the individual modals?
PageObject helps you to improve the maintenance and reduces code duplication. So you can use it as an interface to a page of your AUT.
should each modal be a separate page that I interact with?
I would say - yes. If some future change occurs (in any modal), your PageObj will handle it without changing the test itself. Why not introduce a IModalPopup with Continue() method which will handle the skipping that your tests need. Further more in your MainPage class you can keep a ICollection<IModalPopup> welcomeScreens and iterate those.
Aiming at a full answer here - there is no need to actually go through this
welcome screen that loads in the center of the browser.
Once is enough. Every other test can utilize URL navigation over crawling each middle page. Single test that covers your end-user journey (by clicking required buttons/links) should be sufficient.

How to use/handle a loader in an MVC app?

in a ASP.NET MVC application that I am currently working there are multiple places in a single page that the user can click. So there is a main menu that's in _layout and for each inidividual page there can be links associated with that page.
I am trying to use a loader which will be shown on every click, mainly where the response takes time but for now it's for every click.
For example in the home page, from the main menu the user can click Students and the loader should come up and hide when the page loads completely. On the students page there can be an ajax call that gets data and binds it to the grid.
So from the time the user clicks on a menu link and the page loads the loader is active/shown. It's hidden once the page loads completely.
The grid can have editing functionality and when the user clicks on any of the CRUD links the loader should show and hide.
I am looking at suggestions on implementing this requirement.
If I can hookup any of the MVC events, that would be cool as I want less of Javascript/jQuery stuff but if Javascript/jQuery is the way then that's fine too.
Currently I don't have anything so anypointers are appreciated.
Assuming AJAX is being used
I don't see a way to keep this server-side without a middle page with a redirect being used (which would just be unnecessary bloat). And, since you're not opposed, you can implement this fairly easily using jQuery and something like blockUI.
I'll let you play with refining the binding to only links you care about, but for now we'll assume all links. Also, MVC should be using jQuery for things like Ajax.Actionlink so we can hijack events like $.ajaxStart and $.ajaxStop:
function showLoadingScreen(enabled){
return enabled ? $.blockUI() : $.unblockUI();
}
$(document).ajaxStart(function(){
showLoadingScreen(true);
}).ajaxStop(function(){
showLoadingScreen(false);
});
Later on you can maybe apply classes to the links you care about and just bind to them (instead of $.ajaxStart) but I'll leave that up to you.

Loading cached pages with different content in WindowsRT Store App

I want to enable caching for a page that loads when an ListView item is clicked. So when the user clicks a second time on the same item, the app will navigate to the previous cached page.
(I'm using LayoutAwarePages and I suspect that this should be possible if in the OnNavigatedTo method the NavigationMode parameter is different from NavigationMode.New)
Any ideas?
You affect the page caching by setting the NavigationCacheMode property of the page in its constructor. By default it is disabled, but if you enable it, you'll get the existing page instance every time you navigate to it. This means that even if the user navigates to a different item in your ListView, the same instance of the page will be reused.
I've found a library reimplementing the navigation framework to make it more like the one in Windows Phone, i.e.:
When navigating back the cached page is used.
When navigating forward a new instance of the page is created.
If I understand your question correctly, you require a different caching behavior from both of the above. To achieve that you could either base your alternative navigation framework on the one in the library I linked to or simulate the behavior by persisting just the page state for each item instead of actually caching the pages.

Creating a Logon Screen

What is the best way to make password/logon screen? Iread somewhere that it is better to use a popup control. If so where exactly do I need to create it, in App.xaml?
There are number of things you need to consider while implementing a login screen for your Windows Phone 7 application. Here is a sample that can give you an idea of how to get started, if you haven't. One of the important aspects of a login screen is its appearance on the "back stack" - the list that grows while you are within your application, each item in this list is accessible through the "back" button. Ideally, you wouldn't want the user to press the back button and view the login screen. In other words, the login screen should never be in the "back stack". Therefore, it is probably best to implement the login screen as popup, see Peter Torr's post discussing this.
Peter Torr published an article on "Places" which could help you design your application with the login screen.
Regarding implementation of a popup, I posted a simple example in the Answer linked below which you can check out. In this case it implements a context menu.. you can populate the popup with whichever contents make sense for your login screen.
http://social.msdn.microsoft.com/Forums/en-US/windowsphone7series/thread/e6d2a444-91d9-4d69-937e-689b24c36c09
I recommend reading the two links Indyfromoz has hooked you up with for how to handle a login screen wrt the navigation service. This are the most relevant and the current posts on the topic of handling login screens and the like wrt the navigation service.