feat(#234): back to filter on photos and gifs modals

Author: peterpeterparker

studio/src/app/modals/editor/app-gif/app-gif.tsx

@@ -37,6 +37,9 @@ export class AppGif {
 
     private imageHistoryService: ImageHistoryService;
 
+    @State()
+    private searching: boolean = false;
+
     constructor() {
         this.gifService = GifService.getInstance();
         this.imageHistoryService = ImageHistoryService.getInstance();
@@ -78,8 +81,12 @@ export class AppGif {
 
     private fetchCategories(): Promise<void> {
         return new Promise<void>(async (resolve) => {
+            this.searching = true;
+
             const categories: TenorCategory[] = await this.gifService.getCategories();
 
+            this.searching = false;
+
             if (!categories || categories.length <= 0) {
                 resolve();
                 return;
@@ -104,8 +111,12 @@ export class AppGif {
                 return;
             }
 
+            this.searching = true;
+
             const tenorResponse: TenorSearchResponse = await this.gifService.getGifs(this.searchTerm, this.paginationNext);
 
+            this.searching = false;
+
             if (!tenorResponse) {
                 this.emptyGifs();
 
@@ -174,6 +185,8 @@ export class AppGif {
 
     private clear(): Promise<void> {
         return new Promise<void>((resolve) => {
+            this.searchTerm = undefined;
+
             this.gifsOdd = null;
             this.gifsEven = null;
 
@@ -209,9 +222,7 @@ export class AppGif {
             <ion-header>
                 <ion-toolbar color="secondary">
                     <ion-buttons slot="start">
-                        <ion-button onClick={() => this.closeModal()}>
-                            <ion-icon name="close"></ion-icon>
-                        </ion-button>
+                        {this.renderCloseButton()}
                     </ion-buttons>
                     <ion-title class="ion-text-uppercase">Gif</ion-title>
                 </ion-toolbar>
@@ -239,6 +250,18 @@ export class AppGif {
         ];
     }
 
+    private renderCloseButton() {
+        if ((this.gifsEven || this.gifsOdd) && !this.searching) {
+            return <ion-button onClick={() => this.clear()}>
+                <ion-icon name="arrow-back"></ion-icon>
+            </ion-button>;
+        } else {
+            return <ion-button onClick={() => this.closeModal()}>
+                <ion-icon name="close"></ion-icon>
+            </ion-button>;
+        }
+    }
+
     private renderCategories() {
         if (this.gifsEven || this.gifsOdd) {
             return undefined;

studio/src/app/modals/editor/app-photo/app-photo.tsx

@@ -72,6 +72,8 @@ export class AppPhoto {
 
     private clear(): Promise<void> {
         return new Promise<void>((resolve) => {
+            this.searchTerm = undefined;
+
             this.photosOdd = null;
             this.photosEven = null;
 
@@ -187,9 +189,7 @@ export class AppPhoto {
             <ion-header>
                 <ion-toolbar color="primary">
                     <ion-buttons slot="start">
-                        <ion-button onClick={() => this.closeModal()}>
-                            <ion-icon name="close"></ion-icon>
-                        </ion-button>
+                        {this.renderCloseButton()}
                     </ion-buttons>
                     <ion-title class="ion-text-uppercase">Stock photo</ion-title>
                 </ion-toolbar>
@@ -221,6 +221,18 @@ export class AppPhoto {
         ];
     }
 
+    private renderCloseButton() {
+        if (!this.searchTerm || this.searchTerm.length <= 0 || this.searching) {
+            return <ion-button onClick={() => this.closeModal()}>
+                <ion-icon name="close"></ion-icon>
+            </ion-button>;
+        } else {
+            return <ion-button onClick={() => this.clear()}>
+                <ion-icon name="arrow-back"></ion-icon>
+            </ion-button>;
+        }
+    }
+
     private renderPhotosPlaceHolder() {
         if ((!this.photosOdd || this.photosOdd.length <= 0) && (!this.photosEven || this.photosEven.length <= 0)) {
             return <div class="photos-placeholder">