I have a TabBar based app in React Native.
Multiple tabs use the same datasource (AsyncStorage).
If I'm now updating the data in one tab and open the other one, the old data is displayed.
I can't figure out, how to force a reload every time the item become active.
FavoritesView: display saved data
ExploreView: Manipulate saved data
FavoritesView: expired data gets displayed (--> force reload)
<TabBarIOS.Item
title="Explore"
icon={{uri:'ic_explore'}}
selected={this.state.selectedTab === 'exploreTab'}
onPress={() => {
this.setState({
selectedTab: 'exploreTab'
});
}}>
<ExploreView/>
</TabBarIOS.Item>
<TabBarIOS.Item
title="Favorites"
icon={{uri:'ic_favorite_border'}}
selected={this.state.selectedTab === 'favoriteTab'}
onPress={() => {
this.setState({
selectedTab: 'favoriteTab'
});
}}>
// Reload this
<FavoritesView/>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="more"
selected={this.state.selectedTab === 'moreTab'}
onPress={() => {
this.setState({
selectedTab: 'moreTab'
});
}}>
<MoreView/>
</TabBarIOS.Item>
I already tried to set a new state to trigger an update, but it doesn't seem to change anything.
<TabBarIOS.Item
title="Favorites"
icon={{uri:'ic_favorite_border'}}
selected={this.state.selectedTab === 'favoriteTab'}
onPress={() => {
this.setState({
selectedTab: 'favoriteTab',
forceUpdate: Math.random()
});
}}>
<FavoritesView forceUpdate={this.state.forceUpdate}/>
</TabBarIOS.Item>
I had a similar issue and what eventually worked for me was to override componentWillReceiveProps on the embedded views. It gets called anytime the view is set as selectedTab in the TabBarIOS.
https://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops
this references the parent component when using fat arrow notation (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this).
Try adding a ref to the TabBar item and use this.refs.refName.forceUpdate() (slightly nicer than updating the state with a random value as well).
Related
I am beginner ionic2
Actually I am using FCM Plugin for Push notifications.
This is my app component.ts
FCMPlugin.onNotification(function(d){
if(d.wasTapped){
console.log(d);
var nav=self.appCtrl.getActiveNav().setRoot(NotificationsPage);
})
It's wrk perfect.and also when I click Notifications page redirect to respective page(Notifications page).
I retrieved data from firebase collections and assign to array.
Array variable name is Notifications.I consoled the array value.It's work fine.
Display Array into UI using virtualScroll.
Below my html code.This is Push notifications respective page(Notifications page)
<ion-card class="card" [virtualScroll]="Notifications">
<ion-item (click)="navigate(Notifications.value.TYPE,Notifications.value.FROM,Notifications.value.$key,Notifications.value.TO,Notifications.value.MSG,Notifications.value.STATUS,Notifications.time)" *virtualItem="let Notification">
<ion-avatar item-left>
<img *ngIf="!Notification.userval.FILE" src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/default.png?alt=media&token=a64af538-17a7-46e1-9e38-383c1df060cf">
<img *ngIf="Notification.userval.FILE" [src]="Notifications.userval.FILE">
</ion-avatar>
<p>{{Notification.value.MSG}}</p>
<p>{{Notification.time}}</p>
<p style="text-align:right;color:#334bfa;">{{Notifications.value.TYPE}}</p>
</ion-item>
</ion-card>
Below My Notifications page Component(ts file).
this.authservice.getalluser().first().subscribe(namelist=>
{
var users=[];
namelist.forEach(userval=>
{
users.push(userval.val());
})
for(var i in val)
{
this.Time=val[i].SEND_TIME;
var timeagoIns = timeago();
var result=timeagoIns.format(this.Time);
console.log(result);
var user=users.filter(users=>users.USER_ID.toString() === val[i].FROM.toString());
this.Notifications.push({
value:val[i],
time:result,
userval:user[0]
})
Console.log(this.Notifications);
})
array values does not update UI.But i consolesd the Notifications value.It's work fine.
Why doesnot update the UI in array value.
How to fix this issue.
Kindly advice me,
Thanks.
Are you update your array like this?
push.on('notification', (data) => {
// update array
});
If you are updating your array that way then UI should not update. Because your array is now out of ngZone. In this case you can use this,
push.on('notification', (data) => {
this.ngZone.run(() => {
// update array
});
});
I have a component which is my main interface. Inside this component, clicking a button opens ionic 2 modal which allows to choose items.
My modal page (itemsPage):
..list of items here
<button ion-button [disabled]="!MY_TURN || !selectedItem || !selectedItem.quantity"
(click)="useItem(selectedItem)">
<span>Choose item {{selectedItem?.name}}</span>
</button>
useItem() should:
Send item data to my main interface component
Close the modal
Execute a method in my main interface
How I can perform such actions? Couldn't find any documentation about communicating between modal and component in Ionic 2.
It is simply a matter of using parameters in viewController.
In your main interface component,
let chooseModal = this.modalCtrl.create(itemsPage);
chooseModal.onDidDismiss(data => {
console.log(data);
});
chooseModal.present();
In your modal page,
useItem(item) {
this.viewCtrl.dismiss(item);
}
Modal Controller link here
This is a clear example of getting data from modals in ionic.
You need to add a handler for modal’s onDismiss() and then return the data from the modal itself by passing the data to the ViewController’s dismiss() method:
// myPage.ts
// Passing data to the modal:
let modal = Modal.create(myModal, { data: [...] });
// Getting data from the modal:
modal.onDismiss(data => {
console.log('MODAL DATA', data);
});
this.nav.present(modal);
on the modal page
// myModal.ts
constructor(private navParams: NavParams, private viewCtrl: ViewController) {
// Getting data from the page:
var dataFromPage = navParams.get('data');
}
dismiss() {
// Returning data from the modal:
this.viewCtrl.dismiss(
// Whatever should be returned, e.g. a variable name:
// { name : this.name }
);
}
Using ionic, I am trying to have a use case to select from a list and return back to the original view with some value. I'ved already done most of the part except detecting it has returned to the original view and passing a value back to the original view.
Here's so far what i'ved accomplished:
button that goes to a list
<button class="button button-block button-outline button-positive" ng-click="performselectUnit()"> Select Unit
</button>
this is the trigger to go to the new view with the list
$scope.performselectUnit = function(){
console.log('performselectUnit');
$state.go('app.units');
}
the view with list when press performs an action on the selected row
<ion-item collection-repeat="unit in units" class="item item-icon-right item-icon-left" ng-click="selectUnit(unit.id)">
on selection of the row it goes back to the original view with $ionicHistory.goBack()
$scope.selectUnit = function(unit_id){
console.log('performselectUnit:' + unit_id);
$ionicHistory.goBack();
}
From the last function, how do detect its gone back to the original view and pass some value.
Thanks.
UPDATE:
I tried this.
Broadcast the result
$scope.selectUnit = function(unit_id){
console.log('performselectUnit:' + unit_id);
$ionicHistory.goBack();
$rootScope.$broadcast('selected-unit', { data: unit_id });
}
in the original view controller i capture the event and result.
$rootScope.$on('selected-unit', function(event, args) {
console.log("received selected-unit" + args.data);
$scope.showSelectedUnit = args.data;
});
but it NEVER got updated in the view
<label class="item item-text-wrap">
<button class="button button-block button-outline button-positive" ng-click="performselectUnit()"> Select Unit
</button>
{{showSelectedUnit}}
</label>
How can I get it to update in the view ? or is there a better way
Faced to the exact same issue, I could make it work by switching the order of calls to goBack and broadcast:
$rootScope.$broadcast('selected-unit', { data: unit_id });
$ionicHistory.goBack();
You can use pub-sub service for sharing info between two ctrl
fiddle demo
function MyCtrl($scope, datasharer) {
$scope.sharedData = datasharer.getSharedData();
$scope.send = function() {
datasharer.setSharedData($scope.name);
}
}
function My2Ctrl($scope, datasharer) {
function getSendData(data) {
console.log(data);
$scope.sharedData = data;
}
datasharer.registerForSharedData(getSendData);
}
Using $rootScope.$broadcast and $rootScope.$on should resolve your problem indeed, just use $scope.$apply in $rootScope.$on:
$rootScope.$on('selected-unit', function(event, args) {
console.log("received selected-unit" + args.data);
$scope.$apply(function() {
$scope.showSelectedUnit = args.data;
});
});
What's more, the $rootScope.$broadcast is always expensive, so you could try $rootScope.$emit instead. More about angular event, please refer to https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/.
But the more graceful solution is use Service to share data between controllers, you could refer to Share data between AngularJS controllers.
The Ember page I'm working on is to display a of grid of operators and their jobs and have that list automatically update when the user creates a new job. My current best attempt will draw pre-existing jobs on page load, but the page doesn't refresh with any new jobs created using 'saveNewJob' even though I can see the new job in the Data view of Ember Inspector.
Here's the code with some '..snip..' inserted to focus on the important parts:
routes/scheduler.js
export default ember.Route.extend({
model: function() {
return {
jobs: this.store.query('job', {
location: session.location,
date: session.selectedDate
},
operators: this.store.query('operator', {
location: session.location
}
}
},
action: {
saveNewJob: function(params) {
var newJob = this.store.createRecord('job',{
//job properties from params
};
var thisRoute = this;
newJob.save().then(function(){ thisRoute.refresh() });
}
}
}
templates/scheduler.hbs
..snip..
{{#each model.operators as |op|}}
{{operator-row operator=op jobs=model.jobs}}
{{/each}}
{{outlet}}
templates/components/operator-row.hbs
<!-- Draw the grid for the operator -->
..snip..
<!--Draw jobs over grid -->
{{#if jobs.isFulfilled}}
{{#each jobsForOperator as |job|}}
{{operator-job job=job}}
{{/each}}
{{/if}}
component/operator-row.js
jobsForOperator: Ember.computed('jobs', function() {
var opId = this.operator.get('id');
var retVal this.jobs.filter(function(item) {
return item.get('operator').get('id') === opId;
});
<!-- Append some drawing properties to each job in retVal -->
..snip...
},
..snip..
I haven't seen a need to add anything to controller/scheduler. The operator-job component is a simple div that uses the drawing properties to correctly place/draw the div in the operator row.
There are various ways for a new job to be created, but I purposefully left them out because they all end up calling 'saveNewJob' and I am able to get a console.log statement to fire from there.
One solution I've tried is adding a 'this.store.findAll('job');' at the start of the model function and then using 'jobs: this.store.filter('job', function() { })' to create the model.jobs property. That sees neither the existing jobs nor the newly created job returned despite seeing my date and location matches return true.
So what am I doing wrong here? Is there a better way to get this refresh to happen automatically? Appreciate any help you all can give.
There is function for just this case DS.Store.filter. You use it instead of query. Something like this:
let filteredJobs = this.store.filter(
'job',
{location: session.location, date: session.selectedDate},
job => job.get('location') === session.location && job.get('date') === session.selectedDate
);
I have written this simple demo component to demonstrate a problem. The component code is below
App.FocusOutComponent = Em.Component.extend({
attributeBindings: ['tabindex'],
tagName: 'focus-out',
setFocus: function() {
console.log('clicked focus-out container');
this.$().find('button').focus();
console.log('focus set to button');
}.on('click'),
focussedOut: function() {
console.log('focussedOut from outer container');
}.on('focusOut'),
});
{{#focus-out id="focus-container" tabindex="-1"}}
<button id="text-button">Test Button</button>
{{/focus-out}}
When I run this and click on the focus-out element, this is the order of the logs. Link to demo
clicked focus-out container
focussedOut from outer container
focus set to button
Now when I am trying to write acceptance tests for this with the following code.
test('test visit / and click button', function() {
expect(0);
visit('/').then(function() {
find('focus-out').click();
console.log('after click in test');
});
});
The order of the logs are different. Link to demo.
clicked focus-out container
focus set to button
after click in test
focussedOut from outer container
The focusOut log got printed at the very end instead before the after click log. I was expecting the same order for the logs with just an additional log(after click) in the end.
Im not sure if this is a bug or something wrong with my code.
I also noticed another problem while executing tests. If I have focus on the chrome dev-tools while the tests are running, the focusOut event will not trigger at all.
Some help with this is much appreciated.
the click event doesn't set focus (being a back door route). You'll need to manually set focus then click if you want the same results.
Ember's Click Helper (sends mousedown/mouseup, then click)
function click(app, selector, context) {
var $el = app.testHelpers.findWithAssert(selector, context);
run($el, 'mousedown');
if ($el.is(':input')) {
var type = $el.prop('type');
if (type !== 'checkbox' && type !== 'radio' && type !== 'hidden') {
run($el, function(){
// Firefox does not trigger the `focusin` event if the window
// does not have focus. If the document doesn't have focus just
// use trigger('focusin') instead.
if (!document.hasFocus || document.hasFocus()) {
this.focus();
} else {
this.trigger('focusin');
}
});
}
}
run($el, 'mouseup');
run($el, 'click');
return app.testHelpers.wait();
}
Modified Test
test('test visit / and click button', function() {
expect(0);
visit('/').then(function() {
var el = find('focus-out');
el.focus();
click(el);
console.log('after click in test');
});
});
http://emberjs.jsbin.com/lefazevozi/1/edit?js,console,output
It's also important to note, that tearing down will also call the focus out event. So the main reason you were seeing the focusout at all was because on teardown it was losing focus from the button child.
Maybe focus should be set before mousedown on the click helper in the ember test, though I'm not sure what else that might affect, or if people wouldn't generally be expecting that since jquery doesn't do that.