refactor(storage): replace @ionic/storage with @capacitor/preferences

android/app/capacitor.build.gradle

@@ -13,6 +13,7 @@ dependencies {
     implementation project(':capacitor-device')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-preferences')
     implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')
 

android/capacitor.settings.gradle

@@ -14,6 +14,9 @@ project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-keyboard'
 project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android')
 
+include ':capacitor-preferences'
+project(':capacitor-preferences').projectDir = new File('../node_modules/@capacitor/preferences/android')
+
 include ':capacitor-splash-screen'
 project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capacitor/splash-screen/android')
 

angular.json

@@ -55,7 +55,6 @@
           "defaultConfiguration": "",
           "options": {
             "allowedCommonJsDependencies": [
-              "localforage",
               "leaflet"
             ],
             "assets": [

ios/App/CapApp-SPM/Package.swift

@@ -16,6 +16,7 @@ let package = Package(
         .package(name: "CapacitorDevice", path: "../../../node_modules/@capacitor/device"),
         .package(name: "CapacitorHaptics", path: "../../../node_modules/@capacitor/haptics"),
         .package(name: "CapacitorKeyboard", path: "../../../node_modules/@capacitor/keyboard"),
+        .package(name: "CapacitorPreferences", path: "../../../node_modules/@capacitor/preferences"),
         .package(name: "CapacitorSplashScreen", path: "../../../node_modules/@capacitor/splash-screen"),
         .package(name: "CapacitorStatusBar", path: "../../../node_modules/@capacitor/status-bar")
     ],
@@ -29,6 +30,7 @@ let package = Package(
                 .product(name: "CapacitorDevice", package: "CapacitorDevice"),
                 .product(name: "CapacitorHaptics", package: "CapacitorHaptics"),
                 .product(name: "CapacitorKeyboard", package: "CapacitorKeyboard"),
+                .product(name: "CapacitorPreferences", package: "CapacitorPreferences"),
                 .product(name: "CapacitorSplashScreen", package: "CapacitorSplashScreen"),
                 .product(name: "CapacitorStatusBar", package: "CapacitorStatusBar")
             ]

package.json

@@ -36,10 +36,10 @@
     "@capacitor/haptics": "^8.0.0",
     "@capacitor/ios": "^8.0.0",
     "@capacitor/keyboard": "^8.0.0",
+    "@capacitor/preferences": "^8.0.1",
     "@capacitor/splash-screen": "^8.0.0",
     "@capacitor/status-bar": "^8.0.0",
     "@ionic/angular": "^9.0.0",
-    "@ionic/storage-angular": "^4.0.0",
     "core-js": "^3.6.4",
     "leaflet": "^1.9.4",
     "rxjs": "^7.8.0",
@@ -63,7 +63,6 @@
     "@eslint/js": "^9.20.0",
     "@ionic/angular-toolkit": "^13.0.0",
     "@ionic/cli": "7.2.1",
-    "@ionic/storage": "^3.0.6",
     "@types/jasmine": "~5.1.0",
     "@types/leaflet": "^1.9.17",
     "@types/node": "^12.11.1",

src/app/app.component.spec.ts

@@ -2,14 +2,13 @@ import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
-  importProvidersFrom,
   provideZonelessChangeDetection,
 } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 import { SwUpdate } from '@angular/service-worker';
+import { Preferences } from '@capacitor/preferences';
 import { MenuController, provideIonicAngular } from '@ionic/angular';
-import { IonicStorageModule } from '@ionic/storage-angular';
 import { AppComponent } from './app.component';
 import { routes } from './app.routes';
 import { UserService } from './providers/user.service';
@@ -18,6 +17,7 @@ describe('AppComponent', () => {
   let menuSpy, userDataSpy, swUpdateSpy, app: AppComponent, fixture;
 
   beforeEach(async () => {
+    await Preferences.clear();
     menuSpy = jasmine.createSpyObj('MenuController', ['toggle', 'enable']);
     userDataSpy = jasmine.createSpyObj('UserService', ['isLoggedIn', 'logout']);
     userDataSpy.isLoggedIn.and.returnValue(Promise.resolve(false));
@@ -38,7 +38,6 @@ describe('AppComponent', () => {
         provideRouter(routes),
         provideHttpClient(),
         provideHttpClientTesting(),
-        importProvidersFrom(IonicStorageModule.forRoot()),
         { provide: MenuController, useValue: menuSpy },
         { provide: UserService, useValue: userDataSpy },
         { provide: SwUpdate, useValue: swUpdateSpy },
@@ -48,11 +47,18 @@ describe('AppComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(AppComponent);
     app = fixture.debugElement.componentInstance;
-    app['storage'].create();
     fixture.detectChanges();
   });
 
   it('should create the app', () => {
     expect(app).toBeTruthy();
   });
+
+  it('should reset the tutorial flag when opening the tutorial', async () => {
+    await Preferences.set({ key: 'ion_did_tutorial', value: 'true' });
+
+    app.openTutorial();
+
+    expect((await Preferences.get({ key: 'ion_did_tutorial' })).value).toBe('false');
+  });
 });

src/app/app.component.ts

@@ -3,11 +3,10 @@ import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { SwUpdate } from '@angular/service-worker';
 import { addIcons } from 'ionicons';
 
+import { Preferences } from '@capacitor/preferences';
 import { SplashScreen } from '@capacitor/splash-screen';
 import { StatusBar } from '@capacitor/status-bar';
 
-import { Storage } from '@ionic/storage-angular';
-
 import { FormsModule } from '@angular/forms';
 import {
   IonApp,
@@ -67,7 +66,6 @@ import { UserService } from './providers/user.service';
 })
 export class AppComponent implements OnInit {
   private router = inject(Router);
-  private storage = inject(Storage);
   private userService = inject(UserService);
   private swUpdate = inject(SwUpdate);
   private toastCtrl = inject(ToastController);
@@ -117,7 +115,6 @@ export class AppComponent implements OnInit {
 
   async ngOnInit() {
     this.initializeApp();
-    await this.storage.create();
     this.checkLoginStatus();
     this.listenForLoginEvents();
 
@@ -185,7 +182,7 @@ export class AppComponent implements OnInit {
 
   openTutorial() {
     this.menu.enable(false);
-    this.storage.set('ion_did_tutorial', false);
+    Preferences.set({ key: 'ion_did_tutorial', value: 'false' });
     this.router.navigateByUrl('/tutorial');
   }
 

src/app/pages/tutorial/tutorial.spec.ts

@@ -1,23 +1,24 @@
 import {
   CUSTOM_ELEMENTS_SCHEMA,
-  importProvidersFrom,
   provideZonelessChangeDetection,
 } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { Router, provideRouter } from '@angular/router';
+import { Preferences } from '@capacitor/preferences';
 import { MenuController, provideIonicAngular } from '@ionic/angular';
-import { IonicStorageModule } from '@ionic/storage-angular';
 import { routes } from '../../app.routes';
 import { TutorialPage } from './tutorial';
 
 describe('TutorialPage', () => {
-  let fixture, app: TutorialPage;
+  let fixture, app: TutorialPage, routerSpy: jasmine.SpyObj<Router>;
   beforeEach(async () => {
+    await Preferences.clear();
     const menuSpy = jasmine.createSpyObj('MenuController', [
       'toggle',
       'enable',
     ]);
-    const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
+    routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
+    routerSpy.navigateByUrl.and.returnValue(Promise.resolve(true));
 
     await TestBed.configureTestingModule({
       declarations: [],
@@ -27,7 +28,6 @@ describe('TutorialPage', () => {
         provideZonelessChangeDetection(),
         provideIonicAngular({ useSetInputAPI: true }),
         provideRouter(routes),
-        importProvidersFrom(IonicStorageModule.forRoot()),
         { provide: MenuController, useValue: menuSpy },
         { provide: Router, useValue: routerSpy },
       ],
@@ -37,14 +37,38 @@ describe('TutorialPage', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(TutorialPage);
     app = fixture.debugElement.componentInstance;
-    app.storage.create();
   });
   it('should create the tutorial page', () => {
     expect(app).toBeTruthy();
   });
 
-  it('should check the tutorial status', async () => {
-    const didTuts = await app.storage.get('ion_did_tutorial');
-    expect(didTuts).toBeFalsy();
+  it('should stay on the tutorial when it was not completed yet', async () => {
+    app.ionViewWillEnter();
+    await Preferences.get({ key: 'ion_did_tutorial' });
+
+    expect(routerSpy.navigateByUrl).not.toHaveBeenCalled();
+  });
+
+  it('should persist the tutorial as done when starting the app', async () => {
+    app.startApp();
+    await routerSpy.navigateByUrl.calls.mostRecent().returnValue;
+
+    expect(routerSpy.navigateByUrl).toHaveBeenCalledWith(
+      '/app/tabs/schedule',
+      { replaceUrl: true }
+    );
+    expect((await Preferences.get({ key: 'ion_did_tutorial' })).value).toBe('true');
+  });
+
+  it('should skip to the schedule when the tutorial was already done', async () => {
+    await Preferences.set({ key: 'ion_did_tutorial', value: 'true' });
+
+    app.ionViewWillEnter();
+    await Preferences.get({ key: 'ion_did_tutorial' });
+
+    expect(routerSpy.navigateByUrl).toHaveBeenCalledWith(
+      '/app/tabs/schedule',
+      { replaceUrl: true }
+    );
   });
 });

src/app/pages/tutorial/tutorial.ts

@@ -10,7 +10,7 @@ import {
   IonToolbar,
   MenuController,
 } from '@ionic/angular';
-import { Storage } from '@ionic/storage-angular';
+import { Preferences } from '@capacitor/preferences';
 import { addIcons } from 'ionicons';
 import { arrowForward, close } from 'ionicons/icons';
 
@@ -23,7 +23,6 @@ import { arrowForward, close } from 'ionicons/icons';
 export class TutorialPage {
   menu = inject(MenuController);
   router = inject(Router);
-  storage = inject(Storage);
 
   showSkip = true;
 
@@ -37,12 +36,12 @@ export class TutorialPage {
   startApp() {
     this.router
       .navigateByUrl('/app/tabs/schedule', { replaceUrl: true })
-      .then(() => this.storage.set('ion_did_tutorial', true));
+      .then(() => Preferences.set({ key: 'ion_did_tutorial', value: 'true' }));
   }
 
   ionViewWillEnter() {
-    this.storage.get('ion_did_tutorial').then(res => {
-      if (res === true) {
+    Preferences.get({ key: 'ion_did_tutorial' }).then(({ value }) => {
+      if (value === 'true') {
         this.router.navigateByUrl('/app/tabs/schedule', { replaceUrl: true });
       }
     });