Add EndlessListComponent again.

For now it will just fetch the first page of results.
jp-hoehmann · Aug 1, 2017 · e4f388a · e4f388a
1 parent 27f5a6e
commit e4f388a
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 5 deletions.
diff --git a/src/app/endless-list.component.ts b/src/app/endless-list.component.ts
@@ -1,6 +1,12 @@
 import {Component, OnInit, Input} from '@angular/core';
 
 import {Observable} from 'rxjs/Observable';
+import {Subject} from 'rxjs/Subject';
+import 'rxjs/add/operator/mergeScan';
+import 'rxjs/add/operator/concatAll';
+import 'rxjs/add/observable/concat';
+
+import {Expandable} from './expandable';
 
 /*
  * The Component showing the list of pages.
@@ -13,11 +19,42 @@ import {Observable} from 'rxjs/Observable';
     `,
     styleUrls: ['dist/endless-list.component.css']
 })
-export class EndlessListComponent implements OnInit {
+export class EndlessListComponent<InType extends Expandable<OutType>, OutType>
+        implements OnInit {
 
     @Input()
-    content: Observable<any>;
+    input: Observable<InType>;
+
+    /*
+     * Controller for the output.
+     */
+    private controller: Subject<null>;
+
+    /*
+     * Content for the endless list.
+     */
+    output: Observable<OutType>;
+
+    ngOnInit() {
+        this.controller = new Subject<null>();
+        this.output = Observable
+            .concat(
+                this.input,
+                this.controller
+                    .mergeScan(acc =>
+                        acc.map((page) => page.next()), this.input, 1)
+                    .concatAll())
+            .do(() => this.load())
+            .concatMap(resultSet => resultSet.data);
+    }
 
-    ngOnInit() {}
+    /*
+     * Fetch more content if necessary.
+     */
+    load() {
+        if (true) {
+            this.controller.next();
+        }
+    }
 }
 
diff --git a/src/app/page.component.ts b/src/app/page.component.ts
@@ -90,7 +90,9 @@ import {GraphApiResponse} from './graph-api-response';
                             <md-icon>archive</md-icon>
                         </ng-template>
                         <h2>Posts auf deiner Seite</h2>
-                        <posts [posts]='posts'></posts>
+                        <endless-list #postsHandset [input]='posts'>
+                            <posts [posts]='postsHandset.output'></posts>
+                        </endless-list>
                     </md-tab>
                     <md-tab>
                         <ng-template md-tab-label>
@@ -123,7 +125,9 @@ import {GraphApiResponse} from './graph-api-response';
                         <div class='flex'>
                             <div class='flex-6-cols'>
                                 <h2>Posts auf deiner Seite</h2>
-                                <posts [posts]='posts'></posts>
+                                <endless-list #postsTablet [input]='posts'>
+                                    <posts [posts]='postsTablet.output'></posts>
+                                </endless-list>
                             </div>
                             <div class='flex-6-cols'>
                                 <h2>Posts mit deiner Seite</h2>