Ionic v3 with Firebase

@xxgermanoxx wrote:

Hi, I’m new to this, both forum and Ionic things. Well, I’m having some kinda trouble because I have configured Firebase database only to get data form to a token (only have token name, and token game) and it’s working fine. My problem is, I’m not showing the data to the user correctly, I mean, sometimes it work, and sometimes not. I’m making the database like:

- tokenmanagersystem
– tokens
— userId
---- tokenId

Sometimes it show in the screen the way I want, but when I try to log with some other account, it happens something and doesn’t show anymore on either accounts.

This is my tokens.html

<!-- This page is responsible for user tokens management -->

<ion-header>

  <ion-navbar>
    <ion-title>Your Tokens</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

	<ion-list>
		<ion-item-sliding *ngFor="let token of tokens | async">
			
			<ion-item>
				<h1>{{token.name}}</h1>
				<h1>{{token.game}}</h1>
			</ion-item>

			<ion-item-options side="left">

				<button ion-button color="secondary" (click)="editToken(token)">
					<ion-icon name="create"></ion-icon>
				</button>

				<button ion-button color="danger" (click)="deleteToken(token.key)">
					<ion-icon name="trash"></ion-icon>
				</button>

			</ion-item-options>

		</ion-item-sliding>

	</ion-list>

	<ion-fab bottom right>
		<button ion-fab (click)="newToken()"><ion-icon name="add"></ion-icon></button>
	</ion-fab>

</ion-content>

This is token.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController, ToastController } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';

// pages
import { EditTokenPage } from '../edit-token/edit-token';

// providers
import { TokenServiceProvider } from '../../providers/token-service/token-service';

@IonicPage()
@Component({
  selector: 'page-tokens',
  templateUrl: 'tokens.html',
})
export class TokensPage {

  tokens: Observable<any>;

  constructor(public navCtrl: NavController,
  	public navParams: NavParams,
  	private modalCtrl: ModalController,
    private toastCtrl: ToastController,
  	private tokenService: TokenServiceProvider) {
    
    this.tokens = this.tokenService.getAll();
    console.log(this.tokens);
  }

  private newTokenPage(token: any){
  	let modal = this.modalCtrl.create(EditTokenPage, {token: token});
  	modal.present();
  }

  newToken(){
  	this.newTokenPage({});
  }

  editToken(token: any){
    this.newTokenPage(token);
  }

  deleteToken(key: string){
    this.tokenService.remove(key)
    .then(()=>{
      this.toastCtrl.create({ message: "Ficha removida com sucesso", duration: 3000}).present();
    }).catch(error => {
      this.toastCtrl.create({ message: "Erro ao remover sua ficha", duration: 3000}).present();
    });
  }

}

This is the token-service (provider)

// this provider is responsible for the basic tokens CRUD

import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';

// firebase database
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';

@Injectable()
export class TokenServiceProvider {

	private PATH = '/tokens/';
	private USER:string;

  constructor(private db: AngularFireDatabase,
  	private fireAuth: AngularFireAuth){
  	this.fireAuth.authState.subscribe(user => {
      if(user) this.USER = user.uid+"/";
    })
  }

  getAll(){
  	return this.db.list(this.PATH+this.USER)
  	.snapshotChanges().pipe(map(changes => {
  		return changes.map(token => ({
  			// data
  			key: token.payload.key,
  			...token.payload.val()
  		}))
  	}));
  }

  get(key: string){
  	return this.db.object(this.PATH+this.USER+key).snapshotChanges()
  	.pipe(map(token =>({
  				// data
  				key: token.payload.key,
  				...token.payload.val()
  			}))
  		);
  }

  save(token: any){
  	return new Promise((resolve, reject) => {
  		// if exists is an update
  		if(token.key){
  			this.db.list(this.PATH+this.USER)
  			.update(token.key, {
  				// data
  				name: token.name,
  				game: token.game
  			}).then(() => resolve())
  			.catch((e) => reject(e));
  		} // if does not exist, is a push
  		else{
  			this.db.list(this.PATH+this.USER)
  			.push({
  				// data
  				name: token.name,
  				game: token.game
  			}).then(() => resolve());
  		}
  	})
  }

  remove(key: string){
  	return this.db.list(this.PATH+this.USER).remove(key);
  }

}

Posts: 1

Participants: 1

Read full topic