Array property in javascript class

Question

I have this javascript class in which I have declared two properties and I have problems with the first one. I am trying to handle the tokens with Firebase in a project with node.js and react.js

export default class NoNotificationResource {
    allTokens = [];
    tokensLoaded = false;
    constructor(messaging, database) {
        this.database = database;
        this.messaging = messaging;
        try {
            this.messaging.requestPermission().then(res => {
                console.log('Permiso concedido');
            }).catch(err => {
                console.log('no acces', err);
            });
        } catch (err) {
            console.log('NO hay soporte para notificaciones', err);
        };
        this.setupTokenRefresh();
        this.database.ref('/fcmTokens').on('value', snapshot => {
            this.allTokens = snapshot.val();
            this.tokensLoaded = true;
        })
    };
    setupTokenRefresh(){
        this.messaging.onTokenRefresh(() => {
            this.saveTokenToServer();
        })
    };
    saveTokenToServer(){
        this.messaging.getToken().then(res => {
            if (this.tokensLoaded) {
                const existingToken = this.findExistingToken(res);
                if (existingToken) {
                    //Reemplazar token
                } else {
                    //Crear nuevo token
                }
            }
        });
    }
    findExistingToken(tokenToSave){
        for(let tokenKey in this.allTokens){
            const token = this.allTokens[tokenKey].token;
            if (token === tokenToSave) {
                return tokenKey;
            }
        }
        return false;
    }
}

muka.gergely · Answer 1 · 2019-11-14T05:04:38.420

Without the linter it doesn't show any errors (I modified your code so it doesn't look for services it cannot reach).

The only change is that I moved allTokens into the constructor - more:

I added a "manual" setToken to show that this.allTokens works.

'use strict'; // just to make sure

class NoNotificationResource {

  tokensLoaded = false;
  constructor(messaging, database) {
    this.allTokens = [];
    this.database = database;
    this.messaging = messaging;
    try {
      this.messaging.requestPermission().then(res => {
        console.log('Permiso concedido');
      }).catch(err => {
        console.log('no acces', err);
      });
    } catch (err) {
      console.log('NO hay soporte para notificaciones', err);
    };
    if (this.messaging) {
      this.setupTokenRefresh();
      this.database.ref('/fcmTokens').on('value', snapshot => {
        this.allTokens = snapshot.val();
        this.tokensLoaded = true;
      })
    }
  };
  setupTokenRefresh() {
    if (this.messaging && this.messaging.onTokenRefresh) {
      this.messaging.onTokenRefresh(() => {
        this.saveTokenToServer();
      })
    }

  };
  saveTokenToServer() {
    this.messaging.getToken().then(res => {
      if (this.tokensLoaded) {
        const existingToken = this.findExistingToken(res);
        if (existingToken) {
          //Reemplazar token
        } else {
          //Crear nuevo token
        }
      }
    });
  }
  findExistingToken(tokenToSave) {
    for (let tokenKey in this.allTokens) {
      const token = this.allTokens[tokenKey].token;
      if (token === tokenToSave) {
        return tokenKey;
      }
    }
    return false;
  }
  // setting tokens "manually"
  setToken(val) {
    // checking if the token is already in the allTokens array
    // and only add the token, if it's not
    if (!this.allTokens.includes(val)) this.allTokens.push(val)
    return this
  }
}

const n = new NoNotificationResource()

n.findExistingToken(123)

console.log(n.setToken(123))

score 0 · Answer 2 · answered Nov 14 '19 at 05:31

You can declare these two variable i.e., allTokens, tokensLoaded outside the class. Ex:-

let allTokens = [];
let tokensLoaded = false;
export default class NoNotificationResource {
    constructor(messaging, database) {
        this.database = database;
        this.messaging = messaging;
        try {
            this.messaging.requestPermission().then(res => {
                console.log('Permiso concedido');
            }).catch(err => {
                console.log('no acces', err);
            });
        } catch (err) {
            console.log('NO hay soporte para notificaciones', err);
        };
        this.setupTokenRefresh();
        this.database.ref('/fcmTokens').on('value', snapshot => {
            this.allTokens = snapshot.val();
            this.tokensLoaded = true;
        })
    };
    setupTokenRefresh(){
        this.messaging.onTokenRefresh(() => {
            this.saveTokenToServer();
        })
    };
    saveTokenToServer(){
        this.messaging.getToken().then(res => {
            if (this.tokensLoaded) {
                const existingToken = this.findExistingToken(res);
                if (existingToken) {
                    //Reemplazar token
                } else {
                    //Crear nuevo token
                }
            }
        });
    }
    findExistingToken(tokenToSave){
        for(let tokenKey in this.allTokens){
            const token = this.allTokens[tokenKey].token;
            if (token === tokenToSave) {
                return tokenKey;
            }
        }
        return false;
    }
}

Or you can put it inside constructor like this this.allTokens=[];,this.tokensLoaded=false;

Array property in javascript class

2 Answers2