feat: add filter chips for news

src/app/modules/news/page/news-page.component.ts

@@ -12,9 +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} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {IonRefresher} from '@ionic/angular';
-import {SCMessage} from '@openstapps/core';
+import {
+  SCMessage,
+  SCSearchFilter,
+  SCSearchValueFilter,
+  SCSetting,
+} from '@openstapps/core';
+import {SettingsProvider} from '../../settings/settings.provider';
+import {
+  newsFilterSettingsCategory,
+  newsFilterSettingsFieldsMapping,
+  NewsFilterSettingsNames,
+} from '../news-filter-settings';
 import {NewsProvider} from '../news.provider';
 /**
  * News page component
@@ -23,46 +34,86 @@ import {NewsProvider} from '../news.provider';
   selector: 'stapps-news-page',
   templateUrl: 'news-page.html',
 })
-export class NewsPageComponent {
+export class NewsPageComponent implements OnInit {
   /**
    * Thing counter to start query the next page from
    */
   from = 0;
-  /**
-   * Page size of queries
-   */
-  pageSize = 10;
+
   /**
    * News (messages) to show
    */
   news: SCMessage[] = [];
 
-  constructor(private newsProvider: NewsProvider) {}
+  /**
+   * Page size of queries
+   */
+  pageSize = 10;
+
+  /**
+   * Relevant settings
+   */
+  settings: SCSetting[];
+
+  /**
+   * Active filters
+   */
+  filters: SCSearchFilter[];
+
+  constructor(
+    private newsProvider: NewsProvider,
+    private settingsProvider: SettingsProvider,
+  ) {}
 
   /**
    * Fetch news from the backend
    */
   async fetchNews() {
-    this.news = await this.newsProvider.getList(this.pageSize, this.from);
+    this.from = 0;
+    this.news = await this.newsProvider.getList(this.pageSize, this.from, [
+      ...this.filters,
+    ]);
   }
 
   /**
    * Loads more news
    *
-   * @param event Signal from the infinite scroll to load more data
+   * @param infiniteScrollElement Infinite scroll element
    */
-  // tslint:disable-next-line:no-any
-  async loadMore(event: any): Promise<void> {
+  async loadMore(
+    infiniteScrollElement: HTMLIonInfiniteScrollElement,
+  ): Promise<void> {
     this.from += this.pageSize;
-    this.news = this.news.concat(await this.newsProvider.getList(this.pageSize, this.from));
-    event.target.complete();
+    this.news = [
+      ...this.news,
+      ...(await this.newsProvider.getList(this.pageSize, this.from, [
+        ...this.filters,
+      ])),
+    ];
+    await infiniteScrollElement.complete();
   }
 
   /**
    * Initialize the local variables on component initialization
    */
-  ngOnInit() {
-    void this.fetchNews();
+  async ngOnInit() {
+    // Helper method to provide the relevant settings
+    const getNewsSettings = async (settingNames: NewsFilterSettingsNames[]) => {
+      const settings = [];
+      for (const settingName of settingNames) {
+        settings.push(
+          await this.settingsProvider.getSetting(
+            newsFilterSettingsCategory,
+            settingName,
+          ),
+        );
+      }
+      return settings;
+    };
+
+    this.settings = await getNewsSettings(
+      Object.keys(newsFilterSettingsFieldsMapping) as NewsFilterSettingsNames[],
+    );
   }
 
   /**
@@ -72,12 +123,21 @@ export class NewsPageComponent {
    */
   async refresh(refresher: IonRefresher) {
     try {
-      this.from = 0;
       await this.fetchNews();
-    } catch (e) {
+    } catch {
       this.news = [];
     } finally {
       await refresher.complete();
     }
   }
+
+  /**
+   * Executed when filters have been changed
+   *
+   * @param filters Current filters to be used
+   */
+  toggleFilter(filters: SCSearchValueFilter[]) {
+    this.filters = filters;
+    void this.fetchNews();
+  }
 }