I have been working on a function to hide the element for connecting to Facebook upon successful connection. I have implemented two functions, success and error, which trigger after Firebase successfully logs in the user. While I can confirm that these functions are working correctly through debugging and console.log statements, the element does not hide when the Facebook connection is successful. Upon inspecting the properties of this, I noticed that isFacebookConnected and isGoogleConnected do not appear, but the User and Providers properties do.
I am wondering if there might be something I am misunderstanding about passing the current model reference to a function in order to modify the UI state. How can I ensure that the UI element hides on successful connection?
FacebookAuthenticator.ts
import { firebase } from '../../app';
import { IAuthenticator } from './IAuthenticator';
import { Navigator } from '../navigation/Navigator';
export class FacebookAuthenticator implements IAuthenticator {
public successFunction: Function;
public errorFunction: Function;
constructor(success: Function, error: Function) {
this.successFunction = success;
this.errorFunction = error;
}
public authenticate() {
const successFunction = this.successFunction;
const errorFunction = this.errorFunction;
firebase.login({
type: firebase.LoginType.FACEBOOK
}).then(
function (result) {
successFunction(result);
},
function (errorMessage) {
errorFunction(errorMessage);
}
);
}
}
AccountViewModel.ts
export class AccountViewModel extends Observable {
public appVersion : string;
public User : User;
public isFacebookConnected : boolean;
public isGoogleConnected : boolean;
private authenticator : IAuthenticator;
private providers : Array<Provider>;
constructor() {
super();
appVersion.getVersionName().then((result) => {
this.notifyPropertyChange("appVersion", "Version " + result);
});
firebase.getCurrentUser().then((result) => {
this.User = result;
this.notifyPropertyChange("User", this.User);
this.providers = ProviderParser.getUserProviders(this.User);
this.setProviderConnectivty();
});
}
public setFacebookSwitch(togglingOn : boolean) {
const successFunction : Function = (model : AccountViewModel) => {
return () => {
model.isFacebookConnected = true;
model.notifyPropertyChange("isFacebookConnected", model.isFacebookConnected);
}
};
const errorFunction : Function = (model : AccountViewModel) => {
return () => {
model.isFacebookConnected = false;
model.notifyPropertyChange("isFacebookConnected", model.isFacebookConnected);
dialogs.alert({
title: "Unexpected Error",
message: "An unexpected error occurred during login. Please contact the developer.",
okButtonText: "Ok"
});
}
};
this.authenticator = new FacebookAuthenticator(successFunction(this), errorFunction(this));
if (togglingOn && this.providers.indexOf(Provider.Facebook) === -1) {
this.authenticator.authenticate();
}
}
}
Account.xml
<StackLayout row="2" column="0" class="preferenceGroup">
<Label text="Connected Accounts" class="preferenceGroupHeading"/>
<GridLayout rows="*" columns="*, auto" visibility="{{ isFacebookConnected ? 'collapsed' : 'visible' }}">
<Label row="0" column="0" text="Facebook" class="preferenceItem"/>
<Label row="0" column="0"
text="Repeat accesses your public profile, friend list, and email address"
textWrap="true"
horizontalAlignment="left"
class="preferenceSubText"/>
<Switch loaded="facebookSwitchLoaded" />
</GridLayout>
<Label class="divider" />
<GridLayout rows="*" columns="*, auto">
<Label row="0" column="0" text="Google" class="preferenceItem"/>
<Label row="0" column="0"
text="Repeat accesses your public profile, friend list, and email address"
textWrap="true"
horizontalAlignment="left"
class="preferenceSubText"/>
<Switch checked="{{isGoogleConnected}}"/>
</GridLayout>
</StackLayout>