(Ionic - Angular) persist state integration w/ ionic storage and capacitor/preferences

[peplocanto]

As per title I'm workin on a Ionic - Angular based app.
I was an akita fanboy :) so I decided to try Elf.
This is my implementation of a persistent storage for NOT SECURED user datas -> user preferences.

storage.service.ts

import { Platform } from '#types/platform.contract';
import { PreferencesStorage } from '#types/storage.contract';
import { Capacitor } from '@capacitor/core';
import { Preferences } from '@capacitor/preferences';
import { Storage } from '@ionic/storage';

export const createPreferencesStorage = (): PreferencesStorage => {
  const platform = Capacitor.getPlatform() as Platform;
  let getPreference: PreferencesStorage['getPreference'];
  let setPreference: PreferencesStorage['setPreference'];
  let removePreference: PreferencesStorage['removePreference'];
  let getPreferenceKeys: PreferencesStorage['getPreferenceKeys'];
  let clearPreferences: PreferencesStorage['clearPreferences'];
  if (platform === 'web') {
    const storage = new Storage();
    storage.create();

    getPreference = async (key) => await storage.get(key);
    setPreference = async (key, value) => {
      await storage.set(key, value);
    };
    removePreference = async (key) => {
      await storage.remove(key);
    };
    getPreferenceKeys = async () => await storage.keys();
    clearPreferences = async () => await storage.clear();
  } else {
    getPreference = async (key) => {
      const { value } = await Preferences.get({ key });
      return JSON.parse(value);
    };
    setPreference = async (key, value) => {
      await Preferences.set({
        key,
        value: JSON.stringify(value)
      });
    };
    removePreference = async (key) => {
      await Preferences.remove({ key });
    };
    getPreferenceKeys = async () => (await Preferences.keys()).keys;
    clearPreferences = async () => await Preferences.clear();
  }

  return {
    getPreference,
    setPreference,
    removePreference,
    getPreferenceKeys,
    clearPreferences,
    preferenceStateStorage: {
      getItem: getPreference,
      setItem: setPreference,
      removeItem: removePreference
    }
  };
};

storage.contract.ts

import { InjectionToken } from '@angular/core';
import { StateStorage } from '@ngneat/elf-persist-state';

export interface PreferencesStorage {
  getPreference: <T extends Record<string, any>>(key: string) => Promise<T | undefined>;
  setPreference: (key: string, value: Record<string, any>) => Promise<void>;
  removePreference: (key: string) => Promise<void>;
  getPreferenceKeys: () => Promise<string[]>;
  clearPreferences: () => Promise<void>;
  preferenceStateStorage: StateStorage;
}

export const PREFERENCE_STORAGE = new InjectionToken<PreferencesStorage>('PREFERENCE_STORAGE_INJECTION_TOKEN');

core.providers.ts

import { PREFERENCE_STORAGE } from '#types/storage.contract';
import { createPreferencesStorage } from './services/storage/storage.service';

export const PREFERENCE_STORAGE_PROVIDER: Provider = {
  provide: PREFERENCE_STORAGE,
  useFactory: createPreferencesStorage
}

user-preferences.store.ts

import { DEFAULT_LOCALE } from '#constants/locale';
import { LocaleCode } from '#types/locale.contract';
import { PreferencesStorage, PREFERENCE_STORAGE } from '#types/storage.contract';
import { StoreKey, StoreName } from '#types/store.contract';
import { Inject, Injectable } from '@angular/core';
import { createStore, select, setProp, withProps } from '@ngneat/elf';
import { persistState } from '@ngneat/elf-persist-state';
import { Observable } from 'rxjs';

export interface PreferencesState {
  locale: LocaleCode;
}

export const createInitialPreferencesState = (): PreferencesState => ({
  locale: DEFAULT_LOCALE
});

const key: StoreKey = 'userPreferences';

const name: StoreName = { name: key };

const store = createStore(name, withProps<PreferencesState>(createInitialPreferencesState()));

@Injectable({ providedIn: 'root' })
export class UserPreferencesStore {
  readonly locale$: Observable<LocaleCode> = store.pipe(select((state) => state.locale));

  constructor(@Inject(PREFERENCE_STORAGE) private readonly preferenceStorage: PreferencesStorage) {
    persistState(store, {
      key,
      storage: this.preferenceStorage.preferenceStateStorage
    });
  }

  get locale(): LocaleCode {
    return this.snapshot.locale;
  }
  private get snapshot() {
    return store.getValue();
  }

  updateLocale(locale: PreferencesState['locale']) {
    store.update(setProp('locale', locale));
  }
}

Tnx in advance for feedbacks.

Many Tnx to @NetanelBasal w/out his help nothing of this could be possible. Thank U

References

• discussion
• ionic storage
• capacitors preferences
• capacitor platform and why I'm using this one and not the ionic one
• register akita as provider
• angular providers