feat: update to ionic v7

julianpoy · Nov 19, 2023 · 948865d · 948865d
1 parent 7e3efea
commit 948865d
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 178 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,10 +19,7 @@
     "@capacitor/core": "5.0.5",
     "@capacitor/ios": "5.0.5",
     "@elastic/elasticsearch": "~8.4.0",
-    "@ionic-native/core": "^5.36.0",
-    "@ionic-native/splash-screen": "^5.36.0",
-    "@ionic-native/status-bar": "^5.36.0",
-    "@ionic/angular": "6.7.5",
+    "@ionic/angular": "^7.5.5",
     "@julianpoy/recipe-clipper": "^2.4.0",
     "@ngx-loading-bar/core": "^6.0.2",
     "@ngx-translate/core": "^14.0.0",
@@ -81,6 +78,7 @@
     "sqlite3": "^5.1.5",
     "stripe": "^11.9.1",
     "superjson": "^1.12.3",
+    "swiper": "^11.0.4",
     "ts-dedent": "^2.2.0",
     "tsconfig-paths": "^4.2.0",
     "tslib": "^2.5.0",

diff --git a/packages/frontend/src/app/app.component.ts b/packages/frontend/src/app/app.component.ts
@@ -9,8 +9,9 @@ import {
   AlertController,
   NavController,
 } from "@ionic/angular";
-import { SplashScreen } from "@ionic-native/splash-screen/ngx";
-import { StatusBar } from "@ionic-native/status-bar/ngx";
+
+import { register } from "swiper/element/bundle";
+register();
 
 import { ENABLE_ANALYTICS, IS_SELFHOST } from "../environments/environment";
 
@@ -69,8 +70,6 @@ export class AppComponent {
     private route: ActivatedRoute,
     private router: Router,
     private platform: Platform,
-    private splashScreen: SplashScreen,
-    private statusBar: StatusBar,
     private menuCtrl: MenuController,
     private events: EventService,
     private toastCtrl: ToastController,
@@ -486,8 +485,6 @@ export class AppComponent {
 
   initializeApp() {
     this.platform.ready().then(() => {
-      this.statusBar.styleDefault();
-      this.splashScreen.hide();
       this.menuCtrl.close();
     });
 

diff --git a/packages/frontend/src/app/app.module.ts b/packages/frontend/src/app/app.module.ts
@@ -4,8 +4,6 @@ import { HttpClientModule, HttpClient } from "@angular/common/http";
 import { RouteReuseStrategy } from "@angular/router";
 
 import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
-import { SplashScreen } from "@ionic-native/splash-screen/ngx";
-import { StatusBar } from "@ionic-native/status-bar/ngx";
 
 import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
 import { TranslateHttpLoader } from "@ngx-translate/http-loader";
@@ -120,8 +118,6 @@ export class SentryErrorHandler extends ErrorHandler {
   ],
   providers: [
     { provide: ErrorHandler, useClass: SentryErrorHandler },
-    StatusBar,
-    SplashScreen,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     DefaultPageGuardService,
     UnsavedChangesGuardService,

diff --git a/packages/frontend/src/app/modals/image-viewer/image-viewer.component.html b/packages/frontend/src/app/modals/image-viewer/image-viewer.component.html
@@ -12,18 +12,23 @@
 <ion-content [forceOverscroll]="false" color="dark" fullscreen="true">
   <ion-icon
     *ngIf="slideNum > 0"
-    (click)="slider.slidePrev()"
+    (click)="swiperContainer.swiper.slidePrev()"
     name="arrow-back"
     class="back"
   ></ion-icon>
-  <ion-slides #slider (ionSlideDidChange)="slideDidChange()" pager="true">
-    <ion-slide *ngFor="let imageUrl of imageUrls">
+  <swiper-container
+    #swiperContainer
+    [modules]="swiperModules"
+    pagination="true"
+    centeredSlides="true"
+  >
+    <swiper-slide *ngFor="let imageUrl of imageUrls">
       <div class="image-container"><img [src]="imageUrl" /></div>
-    </ion-slide>
-  </ion-slides>
+    </swiper-slide>
+  </swiper-container>
   <ion-icon
     *ngIf="slideNum < imageUrls.length - 1"
-    (click)="slider.slideNext()"
+    (click)="swiperContainer.swiper.slideNext()"
     name="arrow-forward"
     class="forward"
   ></ion-icon>

diff --git a/packages/frontend/src/app/modals/image-viewer/image-viewer.component.scss b/packages/frontend/src/app/modals/image-viewer/image-viewer.component.scss
@@ -1,5 +1,5 @@
 ion-content {
-  ion-slides {
+  swiper-container {
     height: 100%;
   }
 

diff --git a/packages/frontend/src/app/modals/image-viewer/image-viewer.component.ts b/packages/frontend/src/app/modals/image-viewer/image-viewer.component.ts
@@ -1,5 +1,7 @@
 import { Component, ElementRef, Input, ViewChild } from "@angular/core";
-import { ModalController } from "@ionic/angular";
+import { IonicSlides, ModalController } from "@ionic/angular";
+import { SwiperContainer } from "swiper/element";
+import { Swiper } from "swiper/types";
 
 @Component({
   selector: "image-viewer",
@@ -12,18 +14,33 @@ export class ImageViewerComponent {
   })
   imageUrls!: string[];
 
-  @ViewChild("slider", { static: true }) slider?: any;
+  @ViewChild("swiperContainer", { static: true }) swiperContainer?: ElementRef;
 
   slideNum = 0;
 
+  swiperModules = [IonicSlides];
+
   constructor(private modalCtrl: ModalController) {}
 
   ionViewWillEnter() {
-    this.slider?.update();
+    const swiper = this.getSwiperInstance();
+
+    swiper.update();
+    swiper.on("slideChange", () => {
+      this.slideDidChange();
+    });
+  }
+
+  getSwiperInstance(): Swiper {
+    return this.swiperContainer?.nativeElement.swiper;
   }
 
   async slideDidChange() {
-    const slideNum = await this.slider?.getActiveIndex();
+    const swiper = this.getSwiperInstance();
+
+    const slideNum = swiper?.activeIndex;
+    if (typeof slideNum !== "number") return;
+
     this.slideNum = slideNum;
   }
 

diff --git a/packages/frontend/src/app/modals/image-viewer/image-viewer.module.ts b/packages/frontend/src/app/modals/image-viewer/image-viewer.module.ts
@@ -1,11 +1,12 @@
-import { NgModule } from "@angular/core";
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { IonicModule } from "@ionic/angular";
 
 import { ImageViewerComponent } from "./image-viewer.component";
 import { GlobalModule } from "~/global.module";
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [ImageViewerComponent],
   imports: [CommonModule, IonicModule, GlobalModule],
   exports: [ImageViewerComponent],