feat: add favorites support

src/app/modules/data/data.module.ts

@@ -80,6 +80,7 @@ import {VideoListItemComponent} from './types/video/video-list-item.component';
 import {OriginInListComponent} from './elements/origin-in-list.component';
 import {CoordinatedSearchProvider} from './coordinated-search.provider';
 import {Geolocation} from '@ionic-native/geolocation/ngx';
+import {FavoriteButtonComponent} from './elements/favorite-button.component';
 
 /**
  * Module for handling data
@@ -105,6 +106,7 @@ import {Geolocation} from '@ionic-native/geolocation/ngx';
     DishListItemComponent,
     EventDetailContentComponent,
     EventListItemComponent,
+    FavoriteButtonComponent,
     FavoriteDetailContentComponent,
     FavoriteListItemComponent,
     FoodDataListComponent,

src/app/modules/data/data.provider.ts

@@ -15,18 +15,20 @@
 import {Injectable} from '@angular/core';
 import {Client} from '@openstapps/api/lib/client';
 import {
+  SCFacet,
   SCIndexableThings,
   SCMultiSearchRequest,
   SCMultiSearchResponse,
   SCSearchRequest,
   SCSearchResponse,
   SCSearchValueFilter,
+  SCThing,
   SCThingOriginType,
   SCThings,
   SCThingsField,
   SCThingType,
+  SCSaveableThing,
 } from '@openstapps/core';
-import {SCSaveableThing} from '@openstapps/core';
 import {chunk, fromPairs, toPairs} from 'lodash-es';
 import {environment} from '../../../environments/environment';
 import {StorageProvider} from '../storage/storage.provider';
@@ -110,6 +112,31 @@ export class DataProvider {
     };
   }
 
+  /**
+   * Create a facet from data
+   *
+   * @param items Data to generate facet for
+   * @param field Field for which to generate facet
+   */
+  static facetForField(items: SCThing[], field: SCThingsField): SCFacet {
+    const bucketMap = new Map<string, number>();
+    const facet: SCFacet = {buckets: [], field: field};
+
+    for (const item of items) {
+      const value =
+        typeof bucketMap.get(item.type) === 'undefined'
+          ? 1
+          : (bucketMap.get(item.type) as number) + 1;
+      bucketMap.set(item.type, value);
+    }
+
+    for (const [key, value] of bucketMap.entries()) {
+      facet.buckets.push({key: key, count: value});
+    }
+
+    return facet;
+  }
+
   /**
    * TODO
    *
@@ -128,6 +155,28 @@ export class DataProvider {
     this.storageProvider = storageProvider;
   }
 
+  /**
+   * Create savable thing from an indexable thing
+   *
+   * @param item An indexable to create savable thing from
+   * @param type The type (falls back to the type of the indexable thing)
+   */
+  static createSaveable(
+    item: SCIndexableThings,
+    type?: SCThingType,
+  ): SCSaveableThing {
+    return {
+      data: item,
+      name: item.name,
+      origin: {
+        created: new Date().toISOString(),
+        type: SCThingOriginType.User,
+      },
+      type: typeof type === 'undefined' ? item.type : type,
+      uid: item.uid,
+    };
+  }
+
   /**
    * Delete a data item
    *
@@ -234,28 +283,12 @@ export class DataProvider {
   /**
    * Save a data item
    *
-   * @param item Data item that needs to be saved
-   * @param [type] Savable type (e.g. 'favorite'); if nothing is provided then type of the thing is used
+   * @param item An item that needs to be saved
    */
-  async put(
-    item: SCIndexableThings,
-    type?: SCThingType,
-  ): Promise<SCSaveableThing> {
-    const savableItem: SCSaveableThing = {
-      data: item,
-      name: item.name,
-      origin: {
-        created: new Date().toISOString(),
-        type: SCThingOriginType.User,
-      },
-      type: typeof type === 'undefined' ? item.type : type,
-      uid: item.uid,
-    };
-
-    // @TODO: Implementation for saving item into the backend (user's account)
+  async put(item: SCIndexableThings): Promise<SCSaveableThing> {
     return this.storageProvider.put<SCSaveableThing>(
       this.getDataKey(item.uid),
-      savableItem,
+      DataProvider.createSaveable(item, item.type),
     );
   }
 

src/app/modules/data/detail/data-detail.component.spec.ts

@@ -109,7 +109,8 @@ describe('DataDetailComponent', () => {
     );
   });
 
-  it('should get a data item when component is accessed', async () => {
+  it('should get a data item when the view is entered', () => {
+    comp.ionViewWillEnter();
     expect(DataDetailComponent.prototype.getItem).toHaveBeenCalledWith(
       sampleThing.uid,
     );

src/app/modules/data/detail/data-detail.component.ts

@@ -12,18 +12,20 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {Network} from '@ionic-native/network/ngx';
 import {IonRefresher} from '@ionic/angular';
 import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
 import {
   SCLanguageCode,
-  SCSaveableThing,
   SCThings,
   SCUuid,
+  SCSaveableThing,
 } from '@openstapps/core';
 import {DataProvider, DataScope} from '../data.provider';
+import {FavoritesService} from '../../favorites/favorites.service';
+import {take} from 'rxjs/operators';
 
 /**
  * A Component to display an SCThing detailed
@@ -33,7 +35,7 @@ import {DataProvider, DataScope} from '../data.provider';
   styleUrls: ['data-detail.scss'],
   templateUrl: 'data-detail.html',
 })
-export class DataDetailComponent implements OnInit {
+export class DataDetailComponent {
   /**
    * The associated item
    *
@@ -60,12 +62,14 @@ export class DataDetailComponent implements OnInit {
    * @param route the route the page was accessed from
    * @param dataProvider the data provider
    * @param network the network provider
-   * @param translateService the translation service
+   * @param favoritesService the favorites provider
+   * @param translateService he translate provider
    */
   constructor(
     private readonly route: ActivatedRoute,
     private readonly dataProvider: DataProvider,
     private readonly network: Network,
+    private readonly favoritesService: FavoritesService,
     translateService: TranslateService,
   ) {
     this.language = translateService.currentLang as SCLanguageCode;
@@ -99,8 +103,20 @@ export class DataDetailComponent implements OnInit {
   /**
    * Initialize
    */
-  ngOnInit() {
-    void this.getItem(this.route.snapshot.paramMap.get('uid') ?? '');
+  async ionViewWillEnter() {
+    const uid = this.route.snapshot.paramMap.get('uid') || '';
+    await this.getItem(uid ?? '');
+    // fallback to the saved item (from favorites)
+    if (this.item === null) {
+      this.favoritesService
+        .get(uid)
+        .pipe(take(1))
+        .subscribe(item => {
+          if (typeof item !== undefined) {
+            this.item = item;
+          }
+        });
+    }
   }
 
   /**

src/app/modules/data/detail/data-detail.html

@@ -5,6 +5,12 @@
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
     <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
+    <ion-buttons slot="primary">
+      <stapps-favorite-button
+        *ngIf="item"
+        [item]="item"
+      ></stapps-favorite-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 <ion-content class="ion-no-padding">

src/app/modules/data/elements/favorite-button.component.html

@@ -0,0 +1,7 @@
+<ion-button (click)="toggle($event)" color="medium" size="small" fill="clear">
+  <ion-icon
+    slot="icon-only"
+    [name]="(isFavorite$ | async) ? 'star' : 'star-outline'"
+    [ngClass]="{filled: (isFavorite$ | async)}"
+  ></ion-icon>
+</ion-button>

src/app/modules/data/elements/favorite-button.component.scss

@@ -0,0 +1,11 @@
+:host {
+  ion-button {
+    width: 50px;
+    height: 50px;
+    --border-radius: 50%;
+  }
+
+  ion-icon.filled {
+    color: #FBC02D;
+  }
+}

src/app/modules/data/elements/favorite-button.component.ts

@@ -0,0 +1,76 @@
+/*
+ * Copyright (C) 2021 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component, Input} from '@angular/core';
+import {SCIndexableThings} from '@openstapps/core';
+import {FavoritesService} from '../../favorites/favorites.service';
+import {Observable} from 'rxjs';
+import {map, take} from 'rxjs/operators';
+
+/**
+ * The button to add or remove a thing from favorites
+ */
+@Component({
+  selector: 'stapps-favorite-button',
+  templateUrl: './favorite-button.component.html',
+  styleUrls: ['./favorite-button.component.scss'],
+})
+export class FavoriteButtonComponent {
+  /**
+   * Item getter
+   */
+  get item(): SCIndexableThings {
+    return this._item;
+  }
+
+  /**
+   * An item to show (setter is used as there were issues assigning the distance to the right place in a list)
+   */
+  @Input() set item(item: SCIndexableThings) {
+    this._item = item;
+    this.isFavorite$ = this.favoritesService.get(this.item.uid).pipe(
+      map(favorite => {
+        return typeof favorite !== 'undefined';
+      }),
+    );
+  }
+
+  /**
+   * An item to show
+   */
+  private _item: SCIndexableThings;
+
+  /**
+   * The thing already in favorites or not
+   */
+  isFavorite$: Observable<boolean>;
+
+  constructor(private favoritesService: FavoritesService) {}
+
+  /**
+   * Add or remove the thing from favorites (depending on its current status)
+   *
+   * @param event A click event
+   */
+  async toggle(event: Event) {
+    // prevent additional effects e.g. router to be activated
+    event.stopPropagation();
+
+    this.isFavorite$.pipe(take(1)).subscribe(enabled => {
+      enabled
+        ? this.favoritesService.delete(this.item)
+        : this.favoritesService.put(this.item);
+    });
+  }
+}

src/app/modules/data/list/data-list-item.html

@@ -87,4 +87,5 @@
       ></stapps-action-chip-list>
     </div>
   </ion-label>
+  <stapps-favorite-button [item]="item"></stapps-favorite-button>
 </ion-item>

src/app/modules/data/list/data-list.component.ts

@@ -135,8 +135,10 @@ export class DataListComponent implements OnChanges, OnInit, OnDestroy {
    */
   scrolled(_index: number) {
     if (
+      // first condition prevents "load more" to be executed before event having initial items
+      this.items &&
       (this.items?.length ?? 0) - this.viewPort.getRenderedRange().end <=
-      (this.items?.length ?? 0) * this.reloadThreshold
+        (this.items?.length ?? 0) * this.reloadThreshold
     ) {
       this.notifyLoadMore();
     }

src/app/modules/data/list/search-page.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {Router} from '@angular/router';
 import {AlertController} from '@ionic/angular';
 import {
@@ -39,7 +39,7 @@ import {PositionService} from '../../map/position.service';
   templateUrl: 'search-page.html',
   providers: [ContextMenuService],
 })
-export class SearchPageComponent implements OnInit, OnDestroy {
+export class SearchPageComponent {
   /**
    * Api query filter
    */
@@ -115,6 +115,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
    * @param logger An angular logger
    * @param dataRoutingService DataRoutingService
    * @param router Router
+   * @param positionService PositionService
    */
   constructor(
     protected readonly alertController: AlertController,
@@ -127,49 +128,6 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     protected positionService: PositionService,
   ) {
     this.initialize();
-
-    combineLatest([
-      this.queryTextChanged.pipe(
-        debounceTime(this.searchQueryDueTime),
-        distinctUntilChanged(),
-        startWith(this.queryText),
-      ),
-      this.contextMenuService.filterQueryChanged$.pipe(
-        startWith(this.filterQuery),
-      ),
-      this.contextMenuService.sortQueryChanged$.pipe(startWith(this.sortQuery)),
-    ]).subscribe(async query => {
-      this.queryText = query[0];
-      this.filterQuery = query[1];
-      this.sortQuery = query[2];
-      this.from = 0;
-      await this.fetchAndUpdateItems();
-      this.queryChanged.next();
-    });
-
-    this.fetchAndUpdateItems();
-
-    /**
-     * Subscribe to 'settings.changed' events
-     */
-    this.subscriptions.push(
-      this.settingsProvider.settingsActionChanged$.subscribe(
-        ({type, payload}) => {
-          if (type === 'stapps.settings.changed') {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const {category, name, value} = payload!;
-            this.logger.log(`received event "settings.changed" with category:
-            ${category}, name: ${name}, value: ${JSON.stringify(value)}`);
-          }
-        },
-      ),
-      this.dataRoutingService.itemSelectListener().subscribe(item => {
-        void this.router.navigate(['data-detail', item.uid]);
-      }),
-      this.positionService
-        .watchCurrentLocation({maximumAge: 30_000})
-        .subscribe(),
-    );
   }
 
   /**
@@ -259,60 +217,20 @@ export class SearchPageComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Unsubscribe from Observables
+   * Search event of search bar
    */
-  ngOnDestroy() {
-    for (const subscription of this.subscriptions) {
-      subscription.unsubscribe();
-    }
+  searchStringChanged(queryValue: string) {
+    this.queryTextChanged.next(queryValue);
   }
 
   /**
-   * Initialises the possible sort options in ContextMenuService
+   * Updates the possible filter options in ContextMenuService with facets
    */
-  ngOnInit(): void {
-    combineLatest([
-      this.queryTextChanged.pipe(
-        debounceTime(this.searchQueryDueTime),
-        distinctUntilChanged(),
-        startWith(this.queryText),
-      ),
-      this.contextMenuService.filterQueryChanged$.pipe(
-        startWith(this.filterQuery),
-      ),
-      this.contextMenuService.sortQueryChanged$.pipe(startWith(this.sortQuery)),
-    ]).subscribe(async query => {
-      this.queryText = query[0];
-      this.filterQuery = query[1];
-      this.sortQuery = query[2];
-      this.from = 0;
-      await this.fetchAndUpdateItems();
-      this.queryChanged.next();
-    });
-
-    void this.fetchAndUpdateItems();
-
-    /**
-     * Subscribe to 'settings.changed' events
-     */
-    this.subscriptions.push(
-      this.settingsProvider.settingsActionChanged$.subscribe(
-        ({type, payload}) => {
-          if (type === 'stapps.settings.changed') {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const {category, name, value} = payload!;
-            this.logger.log(`received event "settings.changed" with category:
-            ${category}, name: ${name}, value: ${JSON.stringify(value)}`);
-          }
-        },
-      ),
-      this.dataRoutingService.itemSelectListener().subscribe(item => {
-        if (this.itemRouting) {
-          void this.router.navigate(['data-detail', item.uid]);
-        }
-      }),
-    );
+  updateContextFilter(facets: SCFacet[]) {
+    this.contextMenuService.updateContextFilter(facets);
+  }
 
+  ionViewWillEnter() {
     this.contextMenuService.setContextSort({
       name: 'sort',
       reversed: false,
@@ -332,19 +250,49 @@ export class SearchPageComponent implements OnInit, OnDestroy {
         },
       ],
     });
+
+    this.subscriptions.push(
+      combineLatest([
+        this.queryTextChanged.pipe(
+          debounceTime(this.searchQueryDueTime),
+          distinctUntilChanged(),
+          startWith(this.queryText),
+        ),
+        this.contextMenuService.filterQueryChanged$.pipe(
+          startWith(this.filterQuery),
+        ),
+        this.contextMenuService.sortQueryChanged$.pipe(
+          startWith(this.sortQuery),
+        ),
+      ]).subscribe(async query => {
+        this.queryText = query[0];
+        this.filterQuery = query[1];
+        this.sortQuery = query[2];
+        this.from = 0;
+        await this.fetchAndUpdateItems();
+        this.queryChanged.next();
+      }),
+      this.settingsProvider.settingsActionChanged$.subscribe(
+        ({type, payload}) => {
+          if (type === 'stapps.settings.changed') {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const {category, name, value} = payload!;
+            this.logger.log(`received event "settings.changed" with category:
+            ${category}, name: ${name}, value: ${JSON.stringify(value)}`);
+          }
+        },
+      ),
+      this.dataRoutingService.itemSelectListener().subscribe(item => {
+        if (this.itemRouting) {
+          void this.router.navigate(['data-detail', item.uid]);
+        }
+      }),
+    );
   }
 
-  /**
-   * Search event of search bar
-   */
-  searchStringChanged(queryValue: string) {
-    this.queryTextChanged.next(queryValue);
-  }
-
-  /**
-   * Updates the possible filter options in ContextMenuService with facets
-   */
-  updateContextFilter(facets: SCFacet[]) {
-    this.contextMenuService.updateContextFilter(facets);
+  ionViewWillLeave() {
+    for (const subscription of this.subscriptions) {
+      subscription.unsubscribe();
+    }
   }
 }