Data Sheet Script Filtering / Post Login Decision Help (Firebase Plugin Edit Example)

Hi there - when you define a “custom script” for when a list loads and you want to filter it - is it supposed to load more than once when you load up the screen? Mine seems to load many times with inconsistent returned values.

Hi, filter script should be executed every time the component renders. E.g. loading data sheet from a web service causes multiple renders by design. Normally you shouldn’t be worried if your script is not very complicated.

Hey @juha_neonto - thanks for the info. That makes sense.

What I am trying to do is to determine if a user has created an account in my database after they login with google auth and whether or not they have subscribed. I have moved that logic in my first post into a switch gateway prior to the first screen loading after the login gate.

However, the data sheet for UserAccount doesn’t load until it has rendered the screen. So my thought is to use the script for the switch value - load the data sheet there - look to see what the values for “name” and “isSubscribed” are - and then set the switch value accordingly. What do you think?

I struggle to write the code to load and pull the data sheet though. I have searched all the forums and the API docs but haven’t been able to get something to work.

This is the code I am working with but it doesn’t seem to like it:
let dataSheet = this.props.appActions.dataSheets[‘userAccount’];
let serviceOptions = this.props.appActions.serviceOptions_userAccount;
if ( !this.props.appActions.dataSheetLoaded[‘userAccount’]) {
serviceOptions.servicePath = dataSheet.expandSlotTemplateString(“user_account”, this.props.appActions.dataSlots);
this.props.appActions.loadData_firebaseConnection(dataSheet, serviceOptions, true);
this.props.appActions.dataSheetLoaded[‘userAccount’] = true;
}

I have made some progress but have not been able to figure it fully out. This is my script right now.

How do I access the items array under the datasheet. When I simply do dataSheet.items there is nothign there. But in the console you can see that it does fact have the data. How do I access that sub items array?

When you load a data sheet from a web service (i.e. the ‘this.props.appActions.loadData_firebaseConnection(dataSheet, serviceOptions, true);’ line) it’s not ready in the next line yet. It makes a request which completes later. When it completes it triggers rendering so maybe you could check when the data sheet items property is not empty and trigger next actions only after then. That probably doesn’t work well with the Switch block though.

I’m surprised this hasn’t come up sooner. I would imagine trying to pull account details after someone logs into their app followed by some simple logic to determine the future path or state of the screen rendered would be a very common action.

I tried forcing the datasheet to load on app starting up but that didn’t seem to change anything.

Is there another recommended architecture or process to be able to perform this action? I have this problem on like every app I build now.

I will try your suggestion and see what kind of results I get. Maybe it will work. It’s a good idea. Thanks

@juha_neonto - what about pulling the datasheet in “component did unmount” after the login gate screen and before the switch gate?

Unfortunately it’s not possible to stop waiting for a data sheet to finish loading. Usually we have implemented similar behavior directly to a plugin using data slots. For example Firebase Login.plugin writes saveCurrentUserDataInApp function which gets wanted properties from the currentUser object and stores them to data slots. After that it continues to the next screen.

Yes I see. Ok thanks for seeing this one through with me.

I guess it’s time I learn how to use these plugins. I could create one for Segment and Stripe if I do it for this one. I will let you all know how I get along.

We’re quite busy now with client projects but I’d guess that you could try to edit the plugin so that you make make standard Firestore query to Database and save the information about if user has account or not into Data slot. Then “later” in the you could use that Data slot value to determine if user has an account or not.

1 Like

@Antti_Neonto thank you! That’s not so bad. I will get into it this evening and will let you all know.

@Antti_Neonto @juha_neonto ok so I got the firebase doc to load from the plugin. However, upon first look, it appears to be loading after the future screens render. I haven’t played with the logic yet but this is where I am at so far.

Looks good! You should try moving {{{LOGINSUCCESS}}} inside the request callback (i.e. docRef.get().then(function(doc) {…} code block).

Ok I did that @juha_neonto - looks like it loaded right this time but it errors out on the {{{LOGINSUCCESS}}} for some reason. Thoughts?

Ah ok, you should change this line:

docRef.get().then(function(doc) {

to this:

docRef.get().then((doc) => {

Using an arrow function doesn’t overwrite ‘this’ pointer.

1 Like

Ok that worked! Thanks. I also got the dataslot to update the right way.

Now - last thing - it looks like that switch gateway is evaluated before it’s updated. Any thoughts on how to get around that?

I got it to work using this hack but it results in weird screen behavior. Like it loads the account setup screen and then flicks over to the subscribe screen a second later. I added this to the switch gateway.

I finally found a good solution to this one I am happy with @juha_neonto @Antti_Neonto - I added a post login landing page that just says “please wait”. This is what they see until the switch gateway catches up.

Hi, Great that you found a solution to this. Could you open up a bit how it works? I mean that if user is sent to “Post login” landing page then how the Switch is triggered again when the value for ‘ds_userIsSubscribed’ data slot updates?

Yea for sure. Ok here is the completed solution.

When to use this? If you want to use the Firebase Login / Auth and you want to make a decision between the login gate and next screen based upon some data you have in the database. In my situation, I want to send a user to a particular screen based upon if they are a brand new user (path 1), they are a user who has an account but is not currently subscribed (path 2) or they have an account and they are subscribed (path 3).

Why I have a “post login landing page”? Without using this landing page, your users will see the first path set in the switch gateway before it reloads to the right screen. There is a lag in the switch gateway. This post login screen is just a “waiting screen” where the user can do nothing until the correct screen loads. Most of the time the user won’t even notice it since it happens so fast.

High Level App Flow:

The table you need setup in Firebase to hold you custom user account properties.

Dataslots:

You need to edit the Firebase plugin so that it pulls the user account details and evaluates which path to send the user based upon your rules. Mine are defined above in this same post. Go to “plugins” -> “show plugin manager” -> “Firebase Login” -> “edit” -> “component-template.js” file. -> loginSuccess() method:

Switch gateway:

@Antti_Neonto I am not sure why I had to do this, but it seemed to make a difference in my situation. When I added this line, it started to work but with that weird behavior.

Post login landing page:

Final Result (it should send me down path 2 since I have an account but I am not subscribed currently):

Check your console from the browser inspector (right click on the screen after you load your app -> select “inspect element” -> click console from the menu) to confirm the data is flowing and being evaluated correctly. You can see from my console that is first loads the firebase document and then it goes through the if else statements and determines that it should be path #2. Finally it logs the data slot value which is now “2”.