1

se que me han ayudado bastante en esta comunidad, y quiero agradecer de antemano, solo que ahorita si estoy bastante confundida con un tema

Es que vea, yo tengo un interfaz que estoy utilizando para almacenar en ella diferente información del usuario que va a dar al localStorage.

La interfaz va algo así:

export interface BookingModel {
    id?: string,
    type?: string,
    serviceSelected?: any[],
    affiliate?: Affiliate,
    doctor?: DoctorModel,
    appointmentDate?: Date,
    address?: string,
    address_id?: string,
    service?: string,
    latlng?: LatLng,
    patient?: PatientModel,
    days?: any,
    schedules?: any,
    availabity?:AffiliateAvailability,
    verifyPhone?: boolean
}

Entonces, yo lo que hice es que cree un servicio para almacenar en el localStorage,

service.ts

saveData() {
    localStorage.setItem('bookingItem', JSON.stringify(this.bookingModel));
  }

  loadData() {
    var value = localStorage.getItem('bookingItem');
    if (value) {
      this.bookingModel = JSON.parse(value);
    }
  }

  eraseData() {
    localStorage.removeItem('bookingItem');
  }

De esta forma se me hace fácil acceder al local y por lo tanto modificarlo en si. Yo solo accedo a la referencia cada que cambio la variable original. Pero ahorita lo que yo quiero es crear un estado que se llama verifyPhone?: boolean ¿Porqué lo quiero hacer? Porque quiero que cuando el usuario termine de llenar un requisitos que se le están pidiendo, modificar en BookingModel, la variable verifyPhone como true de lo contrario el usuario no puede pasar vaya por ejemplo a la siguiente ruta, porque verifyPhone sigue como false

Yo estuve intentandolo de varias maneras, primero pense que si hacia algo como:

introducir la descripción de la imagen aquí

Y despues de declarla yo queria inicializar la variable y luego almacenarla en el local, pero me lanzaba un error type Cannot assign to 'phoneVerified' because it is a read-only property. Leyendo un poco, descubrí que cuando se usa el get prácticamente no es una variable si no una referencia a otra variable, en este caso es a this.bookingModel.patient.verified Entonces no se puede setear a la referencia si no que se tiene que setear a la variable original. Porque this.phoneVerified solo es la referencia, entonces si cambias la variable original tambien se cambia la referencia

Así que descarte hacerlo asi, porque me confundí todo, asi que entonces intente hacerlo asi:

checkVerified(){
    switch(this.bookingService.bookingModel.verifyPhone){
      case this.verifiedPhone === true:
        this.bookingService.bookingModel.verifyPhone === true;
        this.bookingService.saveData();
        break;
      case this.verifiedPhone === false:
        this.bookingService.bookingModel.verifyPhone === false;
        this.bookingService.saveData();
        break;
      default:
        break;
    }
  }

Un método que intenta modificar la variable, pero aun asi no me funciona cuando lo paso en el metodo que verifica si verifyPhone es true para pasar a la siguiente pantalla

//Metodo que valida si los campos han sido llenados y si no lanza alerta
  onClickNext() {
    // debugger
    console.log('this.patientForm :>> ', this.patientForm);
    var valid: boolean = false;
    var errorMessage;
    if (this.patientForm.valid) {
     // this.isSubmitted = true;
      this.saveFormData();
     // this.onResetForm();
      valid = this.checkValidDate(this.convertedDate!);
     // console.log('valid');
      if (!valid) {
        errorMessage = "Fecha inválida!"
      }
    }
    else{
      // this.isSubmitted = true;
      // this.patientForm.updateValueAndValidity();
      this.validateAllFormFields();
      console.log('No se ha terminado de completar el formulario');
    }
    if (valid) {
      this.bookingService.saveData();
      //this.isSubmitted = true;

      //Valida si verifiedPhone es true verifiedPhone es una variable que se pasa en el html en un ngIf y asi mostrar un div cuando sendOTP se ha cumplido
      if (this.verifiedPhone) {
        //this.createAppointment();
        this.checkVerified();
        this.router.navigate(['../pagar'], { relativeTo: this._activedRoute });
      }
      else {
        this.checkVerified();
        this.sendOTP();
      }

    }
    else {
      this.openSnackBar(errorMessage);
      this.campoNoValido(this.patientForm.controls['firstName'].value);
    }
  }

Sin mentirles, ni exagerarles desde ayer quiero llegar a la solución, y lo he intentando de distintas formas, solo que no doy, si me pudieran dar una idea de como pudiera hacerlo porfavor. Y cuando no entiendo muy bien algo, me cuesta darme a explicar y tambien preguntar

Pero en conclusión, quiero poder acceder a verifyPhone?: boolean, inicializarla en un componente .ts como true/false según el caso y almacenar su inicialización en el local usando el servicio this.bookingService.saveData() asi si yo recarga o algo asi, ese dato persiste y no va obligar al usuario a hacer más de una vez una accion que sea requerida

¿Alguien sabe como?

1 respuesta 1

1

Y después de 34 mins llegué a la solución:

La tenía simple como yo ya tenía un servicio que me almacenaba en el localStorge, para guardar este tipo de información podía sencillamente crear una función que asigne la variable en el servicio, así esta acción del usuario persistiría en el local. Pero tomando en cuenta que si el usuario vuelve dentro de una semana, ese estado persistiría, será mejor entonces manejarlo con sessionStorage que se eliminará cuando el usuario cierre la pestaña. (Ya que asi era el requerimiento en mi caso)

//Realice la referencia para obtener la variable que estoy almacenando en el local
get phoneVerified(): boolean {
    const checkOtp = sessionStorage.getItem("checkOtp");
    return Boolean(checkOtp)
  }

Y luego almaceno la variable //funcion para almacenar en el local el bool

 setVerified(value: boolean = true){
        sessionStorage.setItem('checkOtp', String(value))
      }

Y ya solo tengo que llamar esa variable en el componente que lo necesite, por ejemplo en este caso yo lo que quería es que cuando el usuario terminara de cumplir una serie de requisitos, pasará a la siguiente pantalla y entonces volviera otra vez hacia la pantalla anterior la acción que había realizado se guardara. Asi no lo obligaba a hacer lo mismo cada vez.

//Valida si verifiedPhone es true verifiedPhone es una variable que se pasa en el html en un ngIf y asi mostrar un div cuando sendOTP se ha cumplido
  
if (this.verifiedPhone ) {
        //this.createAppointment();
        this.bookingService.setVerified(true);
        this.router.navigate(['../pagar'], { relativeTo: this._activedRoute });
      }
      else {
        this.sendOTP();
      }

No voy a discutir si esta bien o no almacenar ciertas cosas en el localStorage, pero creo que para este caso es una salida factible ¿Qué opinan?

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.