feat: infinite gifs scroll

Author: peterpeterparker

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

@@ -29,6 +29,11 @@ export class AppGif {
     @State()
     private searchTerm: string;
 
+    @State()
+    disableInfiniteScroll = false;
+
+    private paginationNext: string | number = 0;
+
     constructor() {
         this.gifService = GifService.getInstance();
     }
@@ -87,28 +92,67 @@ export class AppGif {
                 return;
             }
 
-            const gifs: TenorGif[] = await this.gifService.getGifs(this.searchTerm);
+            const tenorResponse: TenorSearchResponse = await this.gifService.getGifs(this.searchTerm, this.paginationNext);
+
+            if (!tenorResponse) {
+                this.emptyGifs();
+
+                resolve();
+                return;
+            }
+
+            this.paginationNext = tenorResponse.next;
+
+            const gifs: TenorGif[] = tenorResponse.results;
 
             if (!gifs || gifs.length <= 0) {
-                this.gifsOdd = [];
-                this.gifsEven = [];
+                this.emptyGifs();
 
                 resolve();
                 return;
             }
 
-            this.gifsOdd = gifs.filter((_a, i) => i % 2);
-            this.gifsEven = gifs.filter((_a, i) => !(i % 2));
+            if (!this.gifsOdd) {
+                this.gifsOdd = [];
+            }
+
+            if (!this.gifsEven) {
+                this.gifsEven = [];
+            }
+
+            this.gifsOdd = [...this.gifsOdd, ...gifs.filter((_a, i) => i % 2)];
+            this.gifsEven = [...this.gifsEven, ...gifs.filter((_a, i) => !(i % 2))];
 
             resolve();
         });
     }
 
+    private searchNext(e: CustomEvent<void>): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            await this.search();
+
+            (e.target as HTMLIonInfiniteScrollElement).complete();
+
+            resolve();
+        });
+    }
+
+    private emptyGifs() {
+        this.gifsOdd = [];
+        this.gifsEven = [];
+
+        this.disableInfiniteScroll = true;
+    }
+
     private clear(): Promise<void> {
         return new Promise<void>((resolve) => {
             this.gifsOdd = null;
             this.gifsEven = null;
 
+            this.disableInfiniteScroll = false
+
+            this.paginationNext = 0;
+
             resolve();
         });
     }
@@ -140,6 +184,13 @@ export class AppGif {
                         {this.renderGifs(this.gifsEven)}
                     </div>
                 </div>
+
+                <ion-infinite-scroll threshold="100px" disabled={this.disableInfiniteScroll} onIonInfinite={(e: CustomEvent<void>) => this.searchNext(e)}>
+                    <ion-infinite-scroll-content
+                        loadingSpinner="bubbles"
+                        loadingText="Loading more data...">
+                    </ion-infinite-scroll-content>
+                </ion-infinite-scroll>
             </ion-content>,
             <ion-footer>
                 <ion-toolbar>

studio/src/app/services/gif/gif.service.tsx

@@ -49,27 +49,27 @@ export class GifService {
         });
     }
 
-    getGifs(searchTerm: string): Promise<TenorGif[]> {
-        return new Promise<TenorGif[]>(async (resolve) => {
+    getGifs(searchTerm: string, next: string | number): Promise<TenorSearchResponse> {
+        return new Promise<TenorSearchResponse>(async (resolve) => {
             const config: EnvironmentTenorConfig = EnvironmentConfigService.getInstance().get('tenor');
 
             const anonymousId: string = await this.getAnonymousId();
 
             const searchUrl = config.url + 'search?tag=' + searchTerm + '&key=' +
-                config.key + '&ar_range=wide&limit=' + 8 + '&anon_id=' + anonymousId + '&media_filter=minimal';
+                config.key + '&ar_range=wide&limit=' + 8 + '&anon_id=' + anonymousId + '&media_filter=minimal&pos=' + next;
 
             try {
                 const rawResponse: Response = await fetch(searchUrl);
 
-                const response: TenorTrendingResponse = JSON.parse(await rawResponse.text());
+                const response: TenorSearchResponse = JSON.parse(await rawResponse.text());
 
                 if (!response) {
                     this.errorService.error('Tenor trending could not be fetched');
                     resolve();
                     return;
                 }
 
-                resolve(response.results);
+                resolve(response);
             } catch (err) {
                 this.errorService.error(err.message);
                 resolve();

studio/src/app/utils/tenor.d.ts

@@ -36,8 +36,9 @@ interface TenorGif {
     media: TenorMedia[];
 }
 
-interface TenorTrendingResponse {
+interface TenorSearchResponse {
     results: TenorGif[];
+    next: string | number;
 }
 
 interface TenorCategory {