Feed list switcharoo (#200)

* [plugins/random] add topic parameters to help testing

* [web-app] unsubscribe from feed fetch when the feed panel tab changes to prevent showing content of incorrect feed

plugins/random/src/random.ts

@@ -67,13 +67,13 @@ export class RandomConnection implements FeedServiceConnection {
       latitude += Math.random() * .001
       longitude += Math.random() * .001
     }
-
+    const titlePrefix = typeof params?.titlePrefix === 'string' ? params.titlePrefix : topic
     const feature: Feature = {
       type: 'Feature',
       id: "1",
       properties: {
         timestamp: new Date(),
-        title: 'Random point'
+        title: `${titlePrefix} random point`
       },
       geometry: {
         type: 'Point',
@@ -89,7 +89,13 @@ export class RandomConnection implements FeedServiceConnection {
       status: 200,
       body: { feature }
     }
-    return topicModule.transformResponse(res)
+
+    const delay = parseFloat(String(params?.fetchDelay)) || 0
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(topicModule.transformResponse(res))
+      }, delay * 1000)
+    })
   }
 }
 

plugins/random/src/topics/random.ts

@@ -21,6 +21,17 @@ export const topicDescriptor: FeedTopic = {
       move: {
         type: 'boolean',
         default: false
+      },
+      titlePrefix: {
+        type: 'string',
+        title: 'Item Title Prefix',
+        description: 'Prepend the given string to the title of each item in this feed.'
+      },
+      fetchDelay: {
+        type: 'number',
+        title: 'Fetch Delay (s)',
+        description: 'Delay for the given number of seconds before returning any data.',
+        default: 0.0
       }
     }
   },
@@ -66,6 +77,7 @@ export interface RandomTopicParams {
   latitude: number,
   longitude: number,
   move?: boolean
+  fetchDelay?: number
 }
 
 export const transformResponse = (res: RandomResponse): FeedTopicContent => {

web-app/src/app/feed/feed-list/feed-list.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Feed, FeedService } from '@ngageoint/mage.web-core-lib/feed';
 import { Feature } from 'geojson';
+import { Subscription } from 'rxjs'
 
 @Component({
   selector: 'feed-list',
@@ -11,13 +12,15 @@ export class FeedListComponent implements OnChanges {
   @Input() feed: Feed
 
   items: Array<Feature> = []
+  feedSubscription: Subscription | null = null
 
   constructor(private feedService: FeedService) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     const feed: Feed = changes.feed.currentValue;
+    this.feedSubscription?.unsubscribe()
     if (feed) {
-      this.feedService.feedItems(feed.id).subscribe(items => {
+      this.feedSubscription = this.feedService.feedItems(feed.id).subscribe(items => {
         this.items = items;
       });
     }