Return a firebase database reference as an array in a cloud function - angularjs

Below is the firebase database reference returned as an array in my AngularJS scope:
var ref = firebase.database().ref("users").child(user.uid).child("week1");
$firebaseArray(ref);
However when I tried writing the same code in my index.js file for a database Cloud Function, there was an error message:
ReferenceError: $firebaseArray is not defined at /user_code/index.js:22:18
Is there a way to make a Firebase reference ref return as an array in my index.js Cloud Functions file since $firebaseArray is not defined outside the AngularJS scope?
Below is an illustration of the database:
users: {
user uid (generated by push) : {
deviceToken : "tokenID",
name : "Display Name"
},
anotherUserID : {
deviceToken : "tokenID",
name : "Display Name"
},
Players: {
player1: John,
Player2: ken,
}
Is there a way for a change in the Players database node to trigger a function in the users node (for each user):
exports.update = functions.database.ref('/Player')
.onWrite(event=>{
console.log(event.data);
var ref = admin.database().ref('/users/'+ user.uid+ '/week1');
ref.set(10);
return;
});
My issue was accessing the user.uid (created by the push() method) for each user.

In Cloud Functions, you can use the Firebase Admin SDK to save and retrieve data from the database. To initialize the Admin SDK, you can use environment configuration:
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);
You can then attach a value listener to your database reference, utilizing and returning a JavaScript Promise to keep the function alive and chain your logic:
const ref = admin.database().ref("/users").child(user.uid).child("week1");
return ref.once("value").then(snapshot => {
const values = snapshot.val();
// Do something with the snapshot
});
The values variable here will be assigned an array of the values at the location (see val()), so could be used in place of $firebaseArray.
If you need to obtain a reference to the node that triggered your database function, you can use the event parameter from the function definition:
let ref = event.data.ref;
This is useful if you need to obtain the specific location in the database that triggered your function. The event.data variable is a DeltaSnapshot instance for database functions.
Similarly, you can use event.params to obtain any of the variables specified in a database trigger definition, for example {uid} in the below definition can be obtain using event.params.uid:
exports.example = functions.database.ref('/users/{uid}')
.onWrite(event => {
const uid = event.params.uid;
// ...
});
The method you take here depends on what work you need your function to perform, how it's triggered and what variables or values you need access to.
Remember that your function can freely read and write data anywhere in the database using the Admin SDK too.
In your newest example, it would be hard to match a node at /players to /users because there isn't a value with the user's UID. So you would need to change the /players child nodes to include further data, something like:
players : {
player1 : {
name: "John",
uid: "anotherUserID"
}
}
You could then extract this uid using event.data.child('uid').val() from your function (where your function is triggered by children under this node using /players/{playerId}):
exports.update = functions.database.ref('/players/{playerId}')
.onWrite(event=>{
console.log(event.data);
const uid = event.data.child('uid').val();
var ref = admin.database().ref('/users/' + uid + '/week1');
ref.set(10);
return;
});

Related

Firebase onDisconnect not deleting user name on disconnection

Perhaps I am mis-using onDisonnect(), but I looked at the example code on the firebase.blog and am doing my best.
When a user submits a user name, I call the code below, which adds the username to a firebase db. Then on disconnection, I want the username to be deleted from the db. This would mean that the db would only show users that are connected to the app at that moment in time.
I am doing it this way so I can then call the data and then map through the array to display currently logged-in users.
I have made two attempts in deleting the name, which you can see in the code below under con.onDisconnect().remove();, neither of which work the way I need. That said, if I log in once again from the same computer, the first user name replaces the second user name!
Here is my code
setName = e => {
e.preventDefault()
let name = this.state.name;
let connectedRef = firebase.database().ref('.info/connected');
connectedRef.on('value', function (snap) {
if (snap.val() === true) {
// Connected
let con = myConnectionsRef.push();
myConnectionsRef.set({
name
})
// On disconnect
con.onDisconnect().remove();
myConnectionsRef.orderByChild('name').equalTo(name).once('child_added', function (snapshot) {
snapshot.ref.remove();
// var nameRef = firebase.database().ref('users/'+name);
// nameRef.remove()
})
}
});
Where am I going wrong? Is there a better way to use onDisconnect? From the example on the fb forum, it isn't clear where I would put that block of code, hence why I am attempting to do it this way.
Thanks.
If I understand correctly what is your goal, you don't need to do
myConnectionsRef.orderByChild('name').equalTo(name).once('child_added', function (snapshot) {
snapshot.ref.remove();
// var nameRef = firebase.database().ref('users/'+name);
// nameRef.remove()
})
as the onDisconnect().remove() call will take care of that.
Also, as explained in the blog article you refer to (as well as shown in the doc):
The onDisconnect() call shall be before the call to set() itself. This is to
avoid a race condition where you set the user's presence to true and
the client disconnects before the onDisconnect() operation takes
effect, leaving a ghost user.
So the following code should do the trick:
setName = e => {
e.preventDefault()
let name = this.state.name;
const connectedRef = firebase.database().ref('.info/connected');
const usersRef = firebase.database().ref('users');
connectedRef.on('value', function (snap) {
if (snap.val() === true) {
// Connected
const con = usersRef.child(name); //Here we define a Reference
// When I disconnect, remove the data at the Database location corresponding to the Reference defined above
con.onDisconnect().remove();
// Add this name to the list of users
con.set(true); //Here we write data (true) to the Database location corresponding to the Reference defined above
}
});
The users node will display the list of connected users by name, as follows:
- users
- James: true
- Renaud: true

Firebase function not executed

import * as functions from 'firebase-functions';
console.log('I am a log entry0!');
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);
console.log('I am a log entry1!');
export const onMessageCreate = functions.database
.ref('/users/{userId}/totalScore')
.onUpdate((change) => {
console.log('I am a log entry2!');
//var a = admin.firestore().collection('/users');
})
I have deployed the function and I can see it in the console. But the function is not executed when totalScore is updated in the database....
Your database is Firestore but you use a Cloud Function that is triggered by an update in the Realtime Database. These are two different Firebase services and you need to change your code accordingly.
The following code will work:
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
exports.onMessageCreate = functions.firestore
.document('users/{userId}')
.onUpdate((change, context) => {
// Get an object representing the document
const newValue = change.after.data();
// ...or the previous value before this update
const previousValue = change.before.data();
if (newValue.totalScore !== previousValue.totalScore) {
console.log('NEW TOTAL SCORE');
}
return null;
//I guess you are going to do more than just logging to the console.
//If you do any asynchronous action, you should return the corresponding promise, see point 3 below
//For example:
//if (newValue.totalScore !== previousValue.totalScore) {
// return db.collection("score").doc(newValue.name).set({score: newValue.totalScore});
//}
});
Note that:
You cannot trigger the onUpdate Cloud Function when a specific field of the document changes. The Cloud Function will be triggered when any field of the Firestore document changes. But you can detect which field(s) have changed, as shown in the above code.
Since version 1.0 you have to initialize with admin.initializeApp();, see https://firebase.google.com/docs/functions/beta-v1-diffList
You need to indicate to the platform when the Cloud Function has finished executing: Since you are not executing any asynchronous operation in your Cloud Function you can use return null;. (For more details on this point, I would suggest you watch the 3 videos about "JavaScript Promises" from the Firebase video series: https://firebase.google.com/docs/functions/video-series/).
I think the update is checked on the ref not on the child
Try this
export const onMessageCreate = functions.database
.ref('/users/{userId}')
.onUpdate((change) => {
console.log('I am a log entry2!');
//var a = admin.firestore().collection('/users');
})
You get the old and new values of the snapshot at that location
If you are using Cloud Firestore then your listener is incorrect. In your case, you are specifying a listener for Realtime Database. We extract firestore from the functions and specify the path to the document we want to have a listener on:
import * as functions from 'firebase-functions';
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);
export const onMessageCreate = functions.firestore
.document('users/{userId}')
.onUpdate((change, context) => {
console.log(change.before.data()); // shows the document before update
console.log(change.after.data()); // shows the document after change
return;
})

Caching in React

In my react App I have a input element. The search query should be memoized, which means that if the user has previously searched for 'John' and the API has provided me valid results for that query, then next time when the user types 'Joh', there should be suggestion for the user with the previously memoized values(in this case 'John' would be suggested).
I am new to react and am trying caching for the first time.I read a few articles but couldn't implement the desired functionality.
You don't clarify which API you're using nor which stack; the solution would vary somewhat depending on if you are using XHR requests or something over GraphQL.
For an asynchronous XHR request to some backend API, I would do something like the example below.
Query the API for the search term
_queryUserXHR = (searchTxt) => {
jQuery.ajax({
type: "GET",
url: url,
data: searchTxt,
success: (data) => {
this.setState({previousQueries: this.state.previousQueries.concat([searchTxt])
}
});
}
You would run this function whenever you want to do the check against your API. If the API can find the search string you query, then insert that data into a local state array variable (previousQueries in my example).
You can either return the data to be inserted from the database if there are unknowns to your view (e.g database id). Above I just insert the searchTxt which is what we send in to the function based on what the user typed in the input-field. The choice is yours here.
Get suggestions for previously searched terms
I would start by adding an input field that runs a function on the onKeyPress event:
<input type="text" onKeyPress={this._getSuggestions} />
then the function would be something like:
_getSuggestions = (e) => {
let inputValue = e.target.value;
let {previousQueries} = this.state;
let results = [];
previousQueries.forEach((q) => {
if (q.toString().indexOf(inputValue)>-1) {
result.push(a);
}
}
this.setState({suggestions: results});
}
Then you can output this.state.suggestions somewhere and add behavior there. Perhaps some keyboard navigation or something. There are many different ways to implement how the results are displayed and how you would select one.
Note: I haven't tested the code above
I guess you have somewhere a function that queries the server, such as
const queryServer = function(queryString) {
/* access the server */
}
The trick would be to memorize this core function only, so that your UI thinks its actually accessing the server.
In javascript it is very easy to implement your own memorization decorator, but you could use existing ones. For example, lru-memoize looks popular on npm. You use it this way:
const memoize = require('lru-memoize')
const queryServer_memoized = memoize(100)(queryServer)
This code keeps in memory the last 100 request results. Next, in your code, you call queryServer_memoized instead of queryServer.
You can create a memoization function:
const memo = (callback) => {
// We will save the key-value pairs in the following variable. It will be our cache storage
const cache = new Map();
return (...args) => {
// The key will be used to identify the different arguments combination. Same arguments means same key
const key = JSON.stringify(args);
// If the cache storage has the key we are looking for, return the previously stored value
if (cache.has(key)) return cache.get(key);
// If the key is new, call the function (in this case fetch)
const value = callback(...args);
// And save the new key-value pair to the cache
cache.set(key, value);
return value;
};
};
const memoizedFetch = memo(fetch);
This memo function will act like a key-value cache. If the params (in our case the URL) of the function (fetch) are the same, the function will not be executed. Instead, the previous result will be returned.
So you can just use this memoized version memoizedFetch in your useEffect to make sure network request are not repeated for that particular petition.
For example you can do:
// Place this outside your react element
const memoizedFetchJson = memo((...args) => fetch(...args).then(res => res.json()));
useEffect(() => {
memoizedFetchJson(`https://pokeapi.co/api/v2/pokemon/${pokemon}/`)
.then(response => {
setPokemonData(response);
})
.catch(error => {
console.error(error);
});
}, [pokemon]);
Demo integrated in React

firebase/angularFire querying with startAt/endAt doesn't work

I have an app where I use FirebaseSimpleLogin, but since I have additional user data, I store it under [my-firebase].firebaseio.com/users/[username]. The snippet below shows how it's done
var User = {
create: function (authUser, username) {
users[username] = {
md5_hash: authUser.md5_hash,
username: username,
email: authUser.email,
$priority: authUser.uid
};
users.$save(username).then(function () {
setCurrentUser(username);
});
},
...
Since data for each individual user, are keyed based on username I prioritize by uid, so I can later fetch additional user data by uid.
When the firebase login event fires, I have the following handler, that is responsible for querying firebase to get the additionala user data, and store it on $rootScope.currentUser via a method setCurrentUser(username)
Here is my login event handler:
var ref = new Firebase(FIREBASE_URL + '/users');
var users = $firebase(ref);
$rootScope.$on('$firebaseSimpleLogin:login', function (e, authUser) {
var query = $firebase(ref.startAt(authUser.uid).endAt(authUser.uid));
query.$on('loaded', function () {
//PROBLEM: console.log(query.$getIndex()) logs an empty array
setCurrentUser(query.$getIndex()[0]);
});
});
As soon as the login event fires, I get access to the authUser, which contains the uid of the logged in user. Then I query firebase /users by uid, using startAt/endAt to limit my results so that I'm left only with the currently logged in user.
Then, when the query data is loaded from firebase, I invoke the setCurrentUser method which stores the username of the currentUser on $rootScope.
The Problem
The query filtering using startAt/endAt does not work, I'm getting back an empty array when I console.log query.$getIndex() when I should be getting an array with the username of the currently logged-in user.
I'm using firebase 1.0.15, angularFire 0.7.1 and firebase-simple-login 1.4.1 and following this tutorial from Thinkster.io
In the end somewhere in my code I had a $save() on my user binding, to save the id of the last project they've been working on, and this was causing the $priority issue. I used $update instead, and now everything works like a charm!
Still I don't know if this is intended behavior of $save()
To clarify and provide more context, I wasn't passing any keys to the $save() method, I simply added a property on my local user reference, and saved it
$rootScope.currentUser.lastWorkingProject = projectId;
$rootScope.currentUser.$save();

Firebase remove function do not work

I'm building an app with Firebase and AngularJS and I have a table with my users.
From one of my view I want to create a form permit to delete users from the Firebase table .
So I have a drop down menu with my users names and submit button.
I wrote a function to retrive the name of the user from the form and combine it with my url location of the user table, in fact the table has user name as id :
$scope.Delete_user = function(name) {
var testRef = new Firebase("https://alex-jpcreative.firebaseio.com/users")
var newRef = testRef + '/' + name;
$scope.removeUser(newRef);
}
In this function I called the removeUser one that is a function I found in Firebase doc to delete a item from the table :
$scope.removeUser = function(ref) {
ref.remove(function(error) {
alert(error ? "Uh oh!" : "Success!");
});
}
I can see the first function working fine pass the right name of users and combine it with the URL but then I have this error and it doesn't work:
TypeError: Object https://alex-jpcreative.firebaseio.com/users/Alex_dev_JPC has no method 'remove'
You need to use the child method to get the reference to the user object, rather than just appending the string to the end:
$scope.Delete_user = function(name) {
var testRef = new Firebase("https://alex-jpcreative.firebaseio.com/users");
var newRef = testRef.child(name);
$scope.removeUser(newRef);
}
See the Firebase documentation for more details.

Resources