Updating list upon ionic storage set() completion

@crocrobot wrote:

Sorry in advance for the the lengthy post.

I am still pretty new to the PWA world and am having trouble getting values added to Storage to show up upon return to my customer list

My Service:

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { Customer } from './models/customer';
import { StorageConstants } from './storageConstants';
import { Observable } from 'rxjs/Observable';
import { from } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class CustomersService {

  constructor(private storage: Storage) { }

  getCustomers() : Observable<Customer[]>{
    return from(this.storage.get(StorageConstants.customers)).pipe(
      map((customers) => {
        return customers ? JSON.parse(customers).map(
          (customer: Customer) => new Customer(customer)) : []
      })
    )
  }

  addCustomer(customer: Customer) {
    let customers_update: Customer[];
    return this.getCustomers().pipe(
      tap(
        (customers : Customer[]) => {
          customers_update = customers;
          customers_update.push(customer);
          this.storage.set(
            StorageConstants.customers, JSON.stringify(customers_update));
        }
      )
    );
  }
}

My Form component

import { Component, ViewChild, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { CustomersService } from '../customers.service';
import { Customer } from '../models/customer';
import { Router } from '@angular/router';

@Component({
  selector: 'app-customer-form',
  templateUrl: './customer-form.page.html',
  styleUrls: ['./customer-form.page.scss'],
})
export class CustomerFormPage implements OnInit{
  @ViewChild('customerForm', {static: false}) formValues;

  private  addCustomer: FormGroup;
  constructor(
    private formBuilder: FormBuilder,
    private customersService: CustomersService,
    private router: Router
  ) {
    
    this.addCustomer = this.formBuilder.group(
      {
        name: ['', Validators.required],
        phone: ['', Validators.required],
        email: ['']
      }
    );
   }

   ngOnInit() {}

  onSubmit() {
      const newCustomer: Customer = new Customer(
        {
          name: this.addCustomer.value.name,
          phone: this.addCustomer.value.phone,
          email: this.addCustomer.value.email
        }
      );

      this.customersService.addCustomer(newCustomer).subscribe(
        {
          complete: () => this.router.navigate(['tabs', 'customers'])
        }
      );
  }

}

My list component

import { Component, OnInit } from '@angular/core';
import { CustomersService } from '../customers.service';
import { Customer } from '../models/customer';
import { NavController } from '@ionic/angular';
import { Observable } from 'rxjs';

@Component({
  selector: 'customers',
  templateUrl: 'customers.page.html',
  styleUrls: ['customers.page.scss']
})
export class CustomersPage implements OnInit{

  private customers: Observable<Customer[]>;

  constructor(private customersService: CustomersService) {}

  ngOnInit(): any {
    this.customers = this.customersService.getCustomers();
  }
}

List html

<ion-content>
  <div *ngFor="let customer of customers | async">
    <h2>{{customer.name}} {{customer.phone}}</h2>
  </div>
</ion-content>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button [routerLink]="['add-customer']">
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

Adding a customer via the addCustomer method in the service adds to Storage, but the list in the component is only updated upon refresh. I looked around and tried a lot of solutions, but I think I am missing a fundamental understanding about how these pieces are working together.

Any help is greatly appreciated.

Posts: 2

Participants: 2

Read full topic