How to expose/access states when building a plugin

[jared.gibb]

Hello Bubblers!

I am working on a firebase plugin for my app. I am able to make the call no problem and can view the data in the console. I’m hoping someone can help me make this work.

What i can do now:

call firebase
login a user
get data from a protected bucket
extract required data from each object in the bucket and put into a javascript variable

what I can’t do yet but need to do
set state/work with states within the plugin
expose the state so i can get the data from it
even when giving an intial value here

my code

the console shows i get my data from the bucket, but then nothing is in the data object.

[jared.gibb]

[UPDATE 12:45 PM]
I have made progress! I still cant accomplish this as a server side action, but a element action i can do and expose the data!

function(instance, properties, context) {



var starting_List = [];
var return_List = [];
var email = 'jared.gibb@gmail.com';
var password = '123456';

//sign in
firebase.auth().signInWithEmailAndPassword(email, password)
    .then((user) => {
        console.log('signedIn')
    })
    .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorMessage)
    });

//when the user is signed in, get the userID
firebase.auth().onAuthStateChanged((user) => {
    if (user) {
       var userId = user.uid;

                firebase.database().ref('/BRC/' + userId + '/data').once('value').then((snapshot) => {                    
                snapshot.val().forEach(element => {
                    if (element.childname !=  null ){
                        starting_List.push(element.childname);
                    }
                        
                })
        
                    
            //return the data lists
                                    
            let return_List = starting_List.filter((c, index) => {return starting_List.indexOf(c) === index;});
                   
                    
        	instance.publishState("data_to_return", return_List);
                    
            });
       
    } else {/* what to do if user is signed out*/}
});}

The current issue I am facing now is that the list i export isnt being recognized as a list

I have the state ‘data_to_return’ set as a list

set as list

starting_List has all duplicates removed and is then assigned to return_List

but the editor is not recognizing this as a list

any thoughts or insight on this @antony? i have been following your post to accomplish this

i am able to print that state to a label, but not use the state as a list of texts for a repeating goup

[UPDATE @ 1PM]

Using extract with regex, [^,]+ , i am able to turn this string list into a useable list. Can anyone help me understand what’s going on here?

I set the state as a list. i treat it as a javascript array. i assign an array to the state. i publish the state. it comes through as a string and i have to use regex to treat it as a list.

[update 2:20]

not sure what i did. no longer needing regex.

[jared.gibb]

I will update with my solution sometime soon!!

I’m slowly figuring it out!!

[eli]

Hey @jared.gibb,

I’m sure you did this but make sure to refresh the Bubble app editor. I’ve made changes before and forgot to refresh and wasted much time on something that was already resolved

@jared.gibb

I still cant accomplish this as a server-side action, but a element action i can do and expose the data!

On your SSA you need to return the values to populate the returned values. Using your code above it would be:

return { data_to_return: return_List }

Good luck!

[jared.gibb]

I hadn’t… I was only refreshing the app preview like a dummy.

I plan to open source the plugin when it’s done. I am working on bridging an app made with thunkable using the RealtimeDB by Firebase with bubble for a seamless finish.

I ended up opting for my own plugin due to the stupid data structure I have been using that’s too late to go back on (for now). I would’ve just used the api but each bucket is separated by user and can only be accessed by that logged in user.

I’ve made progress and can’t wait to share!

I want to work on the server side action. I think it would make more sense and be easier to use but I’ve only got element actions to do the required calls so far.

I’ll report back when I have more! Thank you @eli

—-
What’s not great about the way I’m doing it now, modifying states with element actions is I have to return any data as a list. I want to return an object that bubble can use. I think I can do that with SSA, right?

[jared.gibb]

Firebase requires a few header tags and to be initialized

 <script src="https://www.gstatic.com/firebasejs/5.0.0/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/5.0.0/firebase-auth.js"></script>

<script src="https://www.gstatic.com/firebasejs/5.0.0/firebase-database.js"></script>

<script>    
  var firebaseConfig = {
    apiKey: "<KEY GOES HERE>",
    authDomain: "login-database-brc.firebaseapp.com",
    databaseURL: "https://login-database-brc.firebaseio.com",
    projectId: "login-database-brc",
    storageBucket: "login-database-brc.appspot.com",
    messagingSenderId: "<SENDERID>",
    appId: "<APPID>",
    measurementId: "<MEASUREMENTID>"
  };
    
          // Initialize Firebase
firebase.initializeApp(firebaseConfig);

</script>

All work is done though element actions

I first initialize variables (not sure they’re all needed

function(instance, context) {

    var data


   	instance.data.cow =''
    instance.data.arrayOfData=[]
    instance.data.formats = []
    instance.data.kidsData = []
    instance.data.loggedIn = 'no'
    instance.publishState('logged_in', instance.data.loggedin)


}

I then tell the plugin to update states when input fields change.

function(instance, properties, context) {

    //set States
	instance.publishState('child_name', properties.childname)
	instance.publishState('behavior_to_review', properties.behavior)
    
    //set plugin variables
    instance.data.name = properties.childname;   
    instance.data.behavior = properties.behavior;
    instance.data.format = properties.format_of_recording
    instance.data.email = properties.email
    instance.data.password = properties.password
}

I created the action “sign in and get data”

function(instance, properties, context) {

    

   
    var starting_List = [];
    var return_List = [];
    var email = instance.data.email;
    var password = instance.data.password;
    var loggedIn = ''
    
    //sign in
    firebase.auth().signInWithEmailAndPassword(email, password)
        .then((user) => {
            console.log('signedIn')
        	loggedIn = 'yes'
        	instance.publishState('logged_in', loggedIn)
        })
        .catch((error) => {
            var errorCode = error.code;
            var errorMessage = error.message;
            console.log(errorMessage)
        });
   
	//when the user is signed in, get the userID
    firebase.auth().onAuthStateChanged((user) => {
        if (user) {
           var userId = user.uid;
  
                    firebase.database().ref('/BRC/' + userId + '/data').once('value').then((snapshot) => {                    
                    snapshot.val().forEach(element => {
                        instance.data.arrayOfData.push(element)
                        if (element.childname !=  null ){
                            starting_List.push(element.childname);
                        }
                            
                    })
            
                        
                //return the data lists
                                        
                let return_List = starting_List.filter((c, index) => {return starting_List.indexOf(c) === index;});
                       
                        
            	instance.publishState("child_list", return_List);
                });
           
        } else {/* what to do if user is signed out*/}
    });

    


}

I would love some help clearing this stuff up. is anyone else familiar with the firebase SDK and interested in helping me learn?