feat(pos-list): support if-typeof attribute

Author: jg10-mastodon-social

elements/src/components/pos-list/pos-list.spec.tsx

@@ -1,5 +1,6 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { PosList } from './pos-list';
+import { when } from 'jest-when';
 
 describe('pos-list', () => {
   it('contains only template initially', async () => {
@@ -70,6 +71,29 @@ describe('pos-list', () => {
     expect(el.querySelectorAll('pos-resource')).toHaveLength(2);
   });
 
+  it('renders if-typeof objects', async () => {
+    const page = await newSpecPage({
+      components: [PosList],
+      html: `
+      <pos-list if-typeof="http://schema.org/Recipe">
+        <template>
+          Test
+        </template>
+      </pos-list>`,
+    });
+    const os = {
+      store: {
+        findMembers: jest.fn(),
+      },
+    };
+    when(os.store.findMembers).calledWith('http://schema.org/Recipe').mockReturnValue(['https://recipe.test/1']);
+    await page.rootInstance.receivePodOs(os);
+    await page.waitForChanges();
+
+    const el: HTMLElement = page.root as unknown as HTMLElement;
+    expect(el.querySelector('pos-resource')?.getAttribute('about')).toEqual('https://recipe.test/1');
+  });
+
   it('displays error on missing template', async () => {
     const page = await newSpecPage({
       components: [PosList],

elements/src/components/pos-list/pos-list.tsx

@@ -1,32 +1,41 @@
-import { Thing } from '@pod-os/core';
+import { PodOS, Thing } from '@pod-os/core';
 import { Component, Element, Event, h, Prop, State } from '@stencil/core';
 import { ResourceAware, ResourceEventEmitter, subscribeResource } from '../events/ResourceAware';
+import { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';
 
 @Component({
   tag: 'pos-list',
   shadow: false,
 })
-export class PosList implements ResourceAware {
+export class PosList implements PodOsAware, ResourceAware {
   /**
    * URI of the predicate to follow
    */
   @Prop() rel: string;
+  /**
+   * URI of a class for which instances will be listed
+   */
+  @Prop() ifTypeof: string;
   /**
    * Whether listed resources should be fetched before being displayed
    */
   @Prop() fetch: boolean = false;
 
   @Element() host: HTMLElement;
   @State() error: string = null;
+  @State() os: PodOS;
   @State() resource: Thing;
   @State() items: string[] = [];
   @State() templateString: string;
 
   @Event({ eventName: 'pod-os:resource' })
   subscribeResource: ResourceEventEmitter;
+  @Event({ eventName: 'pod-os:init' })
+  subscribePodOs: PodOsEventEmitter;
 
   componentWillLoad() {
-    subscribeResource(this);
+    if (this.rel) subscribeResource(this);
+    if (this.ifTypeof) subscribePodOs(this);
     const templateElement = this.host.querySelector('template');
     if (templateElement == null) {
       this.error = 'No template element found';
@@ -36,10 +45,14 @@ export class PosList implements ResourceAware {
   }
 
   receiveResource = (resource: Thing) => {
-    this.items = [];
     if (this.rel) this.items = resource.relations(this.rel).flatMap(relation => relation.uris);
   };
 
+  receivePodOs = async (os: PodOS) => {
+    this.os = os;
+    this.items = os.store.findMembers(this.ifTypeof);
+  };
+
   render() {
     if (this.error) return this.error;
     const elems = this.items.map(it => (