Make critical filter non local

src/components/organisms/News.tsx

@@ -48,7 +48,7 @@ const News: FC = () => {
                           {date}, {news.display_source}
                         </Typography.Body5>
                       </p>
-                      {(news.hasOwnProperty('critical') && news.critical) && <img src={CriticalIcon} alt="" style={{ height: "30px", width: "30px", mixBlendMode: "multiply" }} />}
+                      {news.critical && <img src={CriticalIcon} style={{ height: "30px", width: "30px", mixBlendMode: "multiply" }} />}
                     </Box>
                     <Typography.Body5>{news.title}</Typography.Body5>
                   </Box>

src/services/news.data.service.ts

@@ -17,15 +17,24 @@ const errorNews: INewsFlash = {
 };
 
 const NEWS_FLASH_API: string = '/api/news-flash';
+export interface IFetchNewsQueryParams {
+  source?: string;
+  offSet?: number;
+  limit?: number;
+  critical?: boolean | null;
+};
 
-export function fetchNews(source = '', offSet = 0, limit = 100): Promise<any> {
+export function fetchNews({source = '', offSet = 0, limit = 100, critical = null}: IFetchNewsQueryParams = {}): Promise<any> {
   const query = [];
   if (source) {
     query.push(`source=${source}`);
   }
   if (limit) {
     query.push(`limit=${limit}`);
   }
+  if (critical !== null) {
+    query.push(`critical=${critical}`);
+  }
   query.push(`offset=${offSet}`);
 
   query.push('resolution=suburban_road');

src/store/news-flash-store.ts

@@ -1,19 +1,13 @@
 import { runInAction, makeAutoObservable } from 'mobx';
 import { SourceFilterEnum } from 'models/SourceFilter';
-import { fetchNews } from 'services/news.data.service';
+import { fetchNews, IFetchNewsQueryParams } from 'services/news.data.service';
 import { INewsFlash } from 'models/NewFlash';
 import { IPoint } from 'models/Point';
 import RootStore from './root.store';
 
-function filterByCritical(newsFlashCollection: Array<INewsFlash>): Array<INewsFlash>  {
-  return newsFlashCollection.filter(news => news.hasOwnProperty("critical") && news.critical);
-}
-
 const DEFAULT_TIME_FILTER = 5;
 const DEFAULT_LOCATION = { latitude: 32.0853, longitude: 34.7818 };
-const LOCAL_FILTERS: { [key in SourceFilterEnum]?: (newsFlashCollection: Array<INewsFlash>) => Array<INewsFlash> } = {
-  [SourceFilterEnum.critical]: filterByCritical
-}
+const LOCAL_FILTERS: { [key in SourceFilterEnum]?: (newsFlashCollection: Array<INewsFlash>) => Array<INewsFlash> } = {};
 
 export default class NewsFlashStore {
   rootStore: RootStore;
@@ -114,7 +108,15 @@ export default class NewsFlashStore {
       runInAction(() => (this.newsFlashCollection = [...(filtered || [])]));
       runInAction(() => (this.newsFlashLoading = false));
     } else {
-      fetchNews(this.newsFlashActiveFilter, this.newsFlashFetchOffSet).then((data: any) => {
+      const queryParams: IFetchNewsQueryParams = {
+        offSet: this.newsFlashFetchOffSet
+      };
+      if (this.newsFlashActiveFilter == "critical") {
+        queryParams["critical"] = true;
+      } else {
+        queryParams["source"] = this.newsFlashActiveFilter;
+      }
+      fetchNews(queryParams).then((data: any) => {
         runInAction(() => (this.newsFlashLoading = false));
         if (data) {
           runInAction(() => (this.newsFlashCollection = [...this.newsFlashCollection, ...data]));