feat(elements): pos-container-contents reactively updates contents

Author: jg10-mastodon-social

elements/src/components/pos-container-contents/pos-container-contents.spec.tsx

@@ -8,8 +8,24 @@ import { PosContainerContents } from './pos-container-contents';
 import { Components, LdpContainer } from '../../components';
 import PosCreateNewContainerItem = Components.PosCreateNewContainerItem;
 import { pressKey } from '../../test/pressKey';
+import { Subject } from 'rxjs';
+import { ContainerContent, Thing } from '@pod-os/core';
 
 describe('pos-container-contents', () => {
+  let container: LdpContainer, observed$: Subject<ContainerContent[]>, resource: Thing;
+  beforeEach(() => {
+    // Given a container
+    observed$ = new Subject<ContainerContent[]>();
+    container = {
+      observeContains: () => observed$,
+    } as unknown as LdpContainer;
+
+    // available as a resource
+    resource = {
+      assume: () => container,
+    } as unknown as Thing;
+  });
+
   it('are empty initially', async () => {
     const page = await newSpecPage({
       components: [PosContainerContents],
@@ -28,16 +44,13 @@ describe('pos-container-contents', () => {
       html: `<pos-container-contents />`,
       supportsShadowDom: false,
     });
-    await page.rootInstance.receiveResource({
-      assume: () => ({
-        contains: () => [
-          {
-            uri: 'https://pod.test/container/file',
-            name: 'file',
-          },
-        ],
-      }),
-    });
+    await page.rootInstance.receiveResource(resource);
+    observed$.next([
+      {
+        uri: 'https://pod.test/container/file',
+        name: 'file',
+      },
+    ]);
     await page.waitForChanges();
 
     expect(page.root).toEqualHtml(`
@@ -60,11 +73,8 @@ describe('pos-container-contents', () => {
       components: [PosContainerContents],
       html: `<pos-container-contents />`,
     });
-    await page.rootInstance.receiveResource({
-      assume: () => ({
-        contains: () => [],
-      }),
-    });
+    await page.rootInstance.receiveResource(resource);
+    observed$.next([]);
     await page.waitForChanges();
 
     expect(page.root).toEqualHtml(`<pos-container-contents>
@@ -84,24 +94,21 @@ describe('pos-container-contents', () => {
       html: `<pos-container-contents />`,
       supportsShadowDom: false,
     });
-    await page.rootInstance.receiveResource({
-      assume: () => ({
-        contains: () => [
-          {
-            uri: 'https://pod.test/container/file',
-            name: 'file',
-          },
-          {
-            uri: 'https://pod.test/container/subdir/',
-            name: 'subdir',
-          },
-          {
-            uri: 'https://pod.test/container/a-file-on-top-of-the-list',
-            name: 'a-file-on-top-of-the-list',
-          },
-        ],
-      }),
-    });
+    await page.rootInstance.receiveResource(resource);
+    observed$.next([
+      {
+        uri: 'https://pod.test/container/file',
+        name: 'file',
+      },
+      {
+        uri: 'https://pod.test/container/subdir/',
+        name: 'subdir',
+      },
+      {
+        uri: 'https://pod.test/container/a-file-on-top-of-the-list',
+        name: 'a-file-on-top-of-the-list',
+      },
+    ]);
     await page.waitForChanges();
 
     expect(page.root).toEqualHtml(`
@@ -134,24 +141,75 @@ describe('pos-container-contents', () => {
     `);
   });
 
+  it('re-renders when container contents in store change', async () => {
+    const page = await newSpecPage({
+      components: [PosContainerContents],
+      html: `<pos-container-contents />`,
+      supportsShadowDom: false,
+    });
+
+    await page.rootInstance.receiveResource(resource);
+
+    observed$.next([
+      {
+        uri: 'https://pod.test/container/file',
+        name: 'file',
+      },
+    ]);
+    await page.waitForChanges();
+
+    expect(page.root).toEqualHtml(`
+      <pos-container-contents>
+        <pos-container-toolbar></pos-container-toolbar>
+        <ul aria-label="Container contents">
+          <li>
+            <pos-resource lazy="" uri="https://pod.test/container/file">
+              <pos-container-item>
+                file
+              </pos-container-item>
+            </pos-resource>
+          </li>
+        </ul>
+      </pos-container-contents>`);
+
+    observed$.next([
+      {
+        uri: 'https://pod.test/container/file-1',
+        name: 'file-1',
+      },
+    ]);
+    await page.waitForChanges();
+
+    expect(page.root).toEqualHtml(`
+      <pos-container-contents>
+        <pos-container-toolbar></pos-container-toolbar>
+        <ul aria-label="Container contents">
+          <li>
+            <pos-resource lazy="" uri="https://pod.test/container/file-1">
+              <pos-container-item>
+                file-1
+              </pos-container-item>
+            </pos-resource>
+          </li>
+        </ul>
+      </pos-container-contents>`);
+  });
+
   describe('new files and folders', () => {
-    let page;
-    let container: LdpContainer;
+    let page: any;
     beforeEach(async () => {
-      // Given a page with container contents
+      // and given a page with container contents
       page = await newSpecPage({
         components: [PosContainerContents],
         html: `<pos-container-contents />`,
         supportsShadowDom: false,
       });
 
       // and a container resource is available
-      container = {
-        contains: () => [],
-      } as LdpContainer;
-      await page.rootInstance.receiveResource({
-        assume: () => container,
-      });
+      await page.rootInstance.receiveResource(resource);
+
+      // as well as (empty) container contents
+      observed$.next([]);
       await page.waitForChanges();
     });
 

elements/src/components/pos-container-contents/pos-container-contents.tsx

@@ -1,6 +1,7 @@
 import { ContainerContent, LdpContainer, Thing } from '@pod-os/core';
 import { Component, Event, EventEmitter, h, Host, Listen, State } from '@stencil/core';
 import { ResourceAware, subscribeResource } from '../events/ResourceAware';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   tag: 'pos-container-contents',
@@ -21,6 +22,8 @@ export class PosContainerContents implements ResourceAware {
   @State()
   private createNewItem: 'file' | 'folder' | null = null;
 
+  private readonly disconnected$ = new Subject<void>();
+
   onCreateNewFile() {
     this.createNewItem = 'file';
   }
@@ -43,7 +46,10 @@ export class PosContainerContents implements ResourceAware {
   receiveResource = (resource: Thing) => {
     this.container = resource.assume(LdpContainer);
     this.loading = false;
-    this.contents = this.container.contains().sort((a, b) => a.name.localeCompare(b.name));
+    this.container
+      .observeContains()
+      .pipe(takeUntil(this.disconnected$))
+      .subscribe(contains => (this.contents = contains.sort((a, b) => a.name.localeCompare(b.name))));
   };
 
   render() {
@@ -75,4 +81,9 @@ export class PosContainerContents implements ResourceAware {
       </Host>
     );
   }
+
+  disconnectedCallback() {
+    this.disconnected$.next();
+    this.disconnected$.unsubscribe();
+  }
 }