Tips to successfully save and retrieve a state from storage

Question

Tips to successfully save and retrieve a state from storage

I've encountered a challenge while working on my Angular 14 and Ionic 6 app. I want to implement a "Welcome" screen that only appears the first time a user opens the app, and never again after that.

I'm struggling to figure out how to save the state of whether the user has already seen the screen or not, so the app won't display it on subsequent openings...

My idea was to create a storage service to store this state, and then use a route guard for redirection and displaying the page...

However, I'm now facing an error and I'm unsure how to resolve it. Am I correctly storing the value in the storage service, or is there something fundamentally wrong with my code? ERROR:

Error: src/app/guards/first-load.guard.ts:17:50 - error TS2339: Property 'then' does not exist on type 'void'. [ng] [ng] 17
this.storageService.getValue('first_time').then((value) => { [ng]

Here's my code snippet:

storage.service.ts:

export class StorageService {
  constructor(
    private storage: Storage
  ) {
    this.init();
  }

  async init() {
    await this.storage.create();
  }
  setValue(key: 'first_time', value: 'done') {
    this.storage.set(key, value);
  }

  getValue(key: 'first_time') {
    this.storage.get(key).then((value) => {
      console.log(value);
    });
  }
}

In the first-load.guard.ts file, I am using this service as follows:

export class FirstLoadGuard implements CanActivate {
  constructor(
    private storageService: StorageService,
    private router: Router
  ) {}
  canActivate(route: ActivatedRouteSnapshot):  Promise<boolean>
  {
    return new Promise(resolve => {
      this.storageService.getValue('first_time').then((value) => {
        if (value !== null) {
          this.router.navigateByUrl('/login');
          resolve(false);
        }
        else {
          this.storageService.setValue('first_time', 'done');
          resolve(true);
        }
      });
    });
  }
}

If more code snippets are needed, please feel free to leave a comment :) Hoping for some assistance!

javascript angular typescript ionic-framework

Answer 1

Answer №1

Your function definitions are causing the issue. Using : declares a format, but you seem to be defining variables as constants which may result in null values.

To fix this, update key: 'first_time' and value: 'done' in your storage service to key: string and value: string. Alternatively, if you want default values for your function inputs:

getValue(key: string = 'first_time')

If your inputs are truly constant and not meant to be inputs at all, it's better to define them within your service instead of taking them as inputs:

key= 'first_time';
value= 'done';
setValue() {
    this.storage.set(this.key, this.value);
  }

getValue() {
    this.storage.get(this.key).then((value) => {
      console.log(value);
    });
  }

Answer 2

Your function definitions are causing the issue. Using : declares a format, but you seem to be defining variables as constants which may result in null values.

To fix this, update key: 'first_time' and value: 'done' in your storage service to key: string and value: string. Alternatively, if you want default values for your function inputs:

getValue(key: string = 'first_time')

If your inputs are truly constant and not meant to be inputs at all, it's better to define them within your service instead of taking them as inputs:

key= 'first_time';
value= 'done';
setValue() {
    this.storage.set(this.key, this.value);
  }

getValue() {
    this.storage.get(this.key).then((value) => {
      console.log(value);
    });
  }

Answer 3

Answer №2

You are receiving the error message

Error: src/app/guards/first-load.guard.ts:17:50 - error TS2339: Property 'then' does not exist on type 'void'. [ng] [ng] 17 this.storageService.getValue('first_time').then((value) => { [ng]

This issue arises because the storageService.getValue() function does not actually return anything. To resolve this error, you need to ensure that the promise with the value from the storage is returned:

  getValue(key: 'first_time') {
    return this.storage.get(key).then((value) => {
      console.log(value);
      return value;
    });
  }

If you eliminate the console.log() statement, the function can be simplified as follows:

  getValue(key: 'first_time') {
    return this.storage.get(key);
  }

Furthermore, here are some additional comments on your code:

In response to @AmirAli Saghaei's answer, it seems that you are defining the arguments of the function as static values, which might lead to type errors if different argument values are passed to setValue(). If you intend to provide default values for the arguments, use = instead of ::

  setValue(key = 'first_time', value = 'done') {
    // ...
  }

For specifying the expected type, use string:

  setValue(key: string, value: string) {
    // ...
  }

The usage of async/await in init() does not make a difference since it is called synchronously by the constructor. Using async/await in the constructor would require the constructor to return a promise, which is considered bad practice.

In the route guard, there is no need to create a new Promise(). You can simply chain and return the promise from getValue:

  canActivate(route: ActivatedRouteSnapshot): Promise<boolean>
  {
    return this.storageService.getValue('first_time').then((value) => {
      if (value !== null) {
        this.router.navigateByUrl('/login');
        return false;
      }
      else {
        this.storageService.setValue('first_time', 'done');
        return true;
      }
    });
  }

Alternatively, you can utilize async / await:

  async canActivate(route: ActivatedRouteSnapshot): Promise<boolean>
  {
    const value = await this.storageService.getValue('first_time');
    if (value !== null) {
      this.router.navigateByUrl('/login');
      return false;
    }
    else {
      this.storageService.setValue('first_time', 'done');
      return true;
    }
  }

A more concise version of your code could be:

export class StorageService {
  constructor(
    private storage: Storage
  ) {
    this.storage.create();
  }

  setValue(key: string, value: string) {
    this.storage.set(key, value);
  }

  getValue(key: string) {
    return this.storage.get(key);
  }
}

export class FirstLoadGuard implements CanActivate {
  constructor(
    private storageService: StorageService,
    private router: Router
  ) {}

  async canActivate(route: ActivatedRouteSnapshot): Promise<boolean>
  {
    const value = await this.storageService.getValue('first_time');
    if (value !== null) {
      this.router.navigateByUrl('/login');
      return false;
    }
    else {
      this.storageService.setValue('first_time', 'done');
      return true;
    }
  }
}

Answer 4

You are receiving the error message

Error: src/app/guards/first-load.guard.ts:17:50 - error TS2339: Property 'then' does not exist on type 'void'. [ng] [ng] 17 this.storageService.getValue('first_time').then((value) => { [ng]

This issue arises because the storageService.getValue() function does not actually return anything. To resolve this error, you need to ensure that the promise with the value from the storage is returned:

  getValue(key: 'first_time') {
    return this.storage.get(key).then((value) => {
      console.log(value);
      return value;
    });
  }

If you eliminate the console.log() statement, the function can be simplified as follows:

  getValue(key: 'first_time') {
    return this.storage.get(key);
  }

Furthermore, here are some additional comments on your code:

In response to @AmirAli Saghaei's answer, it seems that you are defining the arguments of the function as static values, which might lead to type errors if different argument values are passed to setValue(). If you intend to provide default values for the arguments, use = instead of ::

  setValue(key = 'first_time', value = 'done') {
    // ...
  }

For specifying the expected type, use string:

  setValue(key: string, value: string) {
    // ...
  }

The usage of async/await in init() does not make a difference since it is called synchronously by the constructor. Using async/await in the constructor would require the constructor to return a promise, which is considered bad practice.

In the route guard, there is no need to create a new Promise(). You can simply chain and return the promise from getValue:

  canActivate(route: ActivatedRouteSnapshot): Promise<boolean>
  {
    return this.storageService.getValue('first_time').then((value) => {
      if (value !== null) {
        this.router.navigateByUrl('/login');
        return false;
      }
      else {
        this.storageService.setValue('first_time', 'done');
        return true;
      }
    });
  }

Alternatively, you can utilize async / await:

  async canActivate(route: ActivatedRouteSnapshot): Promise<boolean>
  {
    const value = await this.storageService.getValue('first_time');
    if (value !== null) {
      this.router.navigateByUrl('/login');
      return false;
    }
    else {
      this.storageService.setValue('first_time', 'done');
      return true;
    }
  }

A more concise version of your code could be:

export class StorageService {
  constructor(
    private storage: Storage
  ) {
    this.storage.create();
  }

  setValue(key: string, value: string) {
    this.storage.set(key, value);
  }

  getValue(key: string) {
    return this.storage.get(key);
  }
}

export class FirstLoadGuard implements CanActivate {
  constructor(
    private storageService: StorageService,
    private router: Router
  ) {}

  async canActivate(route: ActivatedRouteSnapshot): Promise<boolean>
  {
    const value = await this.storageService.getValue('first_time');
    if (value !== null) {
      this.router.navigateByUrl('/login');
      return false;
    }
    else {
      this.storageService.setValue('first_time', 'done');
      return true;
    }
  }
}

Tips to successfully save and retrieve a state from storage

Answer №1

Answer №2

Similar questions

Loading Objects with Material Textures Ahead in Three.js

Setting a dynamic routerLink in Angular 2 based on a component's property-value

Issue: In Firefox, resizing elements using position:absolute does not work as expected

When working with Angular, the onSubmit method may sometimes encounter an error stating "get(...).value.split is not a function" specifically when dealing with Form

Error message in Ionic 2: "Property is not found on type"

Guide to integrating jssor into an AngularJS application

Achieving consistent scroll position when utilizing the history.js library to navigate back with the click of a button

Is it possible to use async in the onChange handler of a React event?

Tips for embedding Javascript code within the window.write() function

I am having trouble getting event handlers to work with a group of buttons in JavaScript

Expo is having trouble locating the module "color-convert" - such a frustrating problem

How to access enums dynamically using key in TypeScript

Error message "Uncaught in promise" is being triggered by the calendar function within the Ionic

How can I combine multiple requests in RxJS, executing one request at a time in parallel, and receiving a single combined result?

Leveraging Angular to dynamically adjust the height of ng-if child elements based on parent

Testing the equality of nested arrays: A step-by-step guide

Tips for eliminating the left and bottom border in a React chart using Chart.js 2

Tips for creating a dynamic curved SVG path

What is the best way to insert a chart into a div using *ngIf in Angular?

What is the best way to activate ngModelChange for a custom input field?