Add more legacy examples, update layout

Author: Baltazore

tests/incremental-json-api/app/components/legacy-infinite-books.hbs

@@ -0,0 +1,15 @@
+<VerticalCollection
+  @items={{this.books}}
+  @tagName="ul"
+  @staticHeight={{true}}
+  @estimateHeight={{60}}
+  @bufferSize={{10}}
+  @lastReached={{this.next}}
+  @containerSelector=".scroll-container"
+  as |book|
+>
+  <li>
+    <strong>{{book.title}}</strong> ({{book.genre}}) - {{book.publicationDate}}
+    <br> by <em>{{book.author}}</em> ISBN: {{book.isbn}}
+  </li>
+</VerticalCollection>

tests/incremental-json-api/app/components/legacy-infinite-books.ts

@@ -0,0 +1,48 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import type Store from '@ember-data/store';
+import type { Collection } from '@ember-data/store/-private/record-arrays/identifier-array';
+
+import type Book from '../models/book';
+
+export interface InfiniteBookSignature {
+  Element: HTMLUListElement;
+  Args: {
+    allBooks: Collection<Book>;
+  };
+}
+
+class Pages<T> {
+  @tracked pages: Collection<T>[] = [];
+  @tracked data: T[] = [];
+
+  constructor(page: Collection<T>) {
+    this.pages = [page];
+    this.data = page.slice();
+  }
+
+  addPage(page: Collection<T>) {
+    this.pages.push(page);
+    this.data = this.data.concat(page);
+  }
+}
+
+export default class InfiniteBookComponent extends Component<InfiniteBookSignature> {
+  @service declare store: Store;
+  pageCollection = new Pages(this.args.allBooks);
+
+  get books(): Book[] {
+    return this.pageCollection.data;
+  }
+
+  next = async () => {
+    const meta = this.pageCollection.pages.at(-1)?.query as { page: number; pageSize: number };
+    if (!meta) {
+      return;
+    }
+    const result = await this.store.query<Book>('book', { page: meta.page + 1, pageSize: meta.pageSize });
+    this.pageCollection.addPage(result);
+  };
+}

tests/incremental-json-api/app/models/book.ts

@@ -1,9 +1,12 @@
 import Model, { attr } from '@ember-data/model';
+import { ResourceType } from '@warp-drive/core-types/symbols';
 
 export default class Book extends Model {
   @attr declare title: string;
   @attr declare isbn: string;
   @attr declare publicationDate: string;
   @attr declare author: string;
   @attr declare genre: string;
+
+  [ResourceType] = 'book' as const;
 }

tests/incremental-json-api/app/routes/application.ts

@@ -15,16 +15,24 @@ export default class ApplicationRoute extends Route {
   override async model() {
     const genres = this.store.request<Document<Genre[]>>({ url: '/api/books/genres' });
     const authors = this.store.request<Document<Author[]>>({ url: '/api/books/authors' });
-    const books = this.store.request<Document<Book[]>>(query('book'));
+
+    // Example of legacy usage to be refactored, unpaginated
     const oldBooks = this.store.findAll('book');
 
-    const data = await Promise.all([genres, authors, books, oldBooks]);
+    // Example of legacy usage, paginated
+    const oldBooksPaginated = this.store.query('book', { page: 1, pageSize: 20 });
+
+    // Example of new usage (refactored, paginated)
+    const books = this.store.request<Document<Book[]>>(query('book'));
+
+    const data = await Promise.all([genres, authors, books, oldBooks, oldBooksPaginated]);
 
     return {
       genres: data[0].content.data!,
       authors: data[1].content.data!,
       allBooks: data[2].content,
-      oldBooks: Array.from(data[3]),
+      oldBooks: data[3],
+      oldBooksPaginated: data[4],
     };
   }
 }

tests/incremental-json-api/app/templates/application.hbs

@@ -16,15 +16,28 @@
   </tbody>
 </table>
 
-{{outlet}}
-<section>
-  <h2>Old Books({{@model.oldBooks.length}})</h2>
-    <ul>
-      {{#each @model.oldBooks as |book|}}
-        <li>
-          <strong>{{book.title}}</strong> ({{book.genre}}) - {{book.publicationDate}}
-          <br> by <em>{{book.author}}</em> ISBN: {{book.isbn}}
-        </li>
-      {{/each}}
-    </ul>
-</section>
+<table>
+  <tbody>
+    <tr>
+      <td>
+        <h2>Old Books (All) ({{@model.oldBooks.length}})</h2>
+        <ul>
+          {{#each @model.oldBooks as |book|}}
+            <li>
+              <strong>{{book.title}}</strong> ({{book.genre}}) - {{book.publicationDate}}
+              <br> by <em>{{book.author}}</em> ISBN: {{book.isbn}}
+            </li>
+          {{/each}}
+        </ul>
+      </td>
+      <td>
+        <h2>Old Books (Paginated) ({{@model.oldBooksPaginated.length}})</h2>
+        <div class="scroll-container">
+          <LegacyInfiniteBooks @allBooks={{@model.oldBooksPaginated}} />
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+{{outlet}}