feat(pos-switch): reactive render when forward/backward links are present

Author: jg10-mastodon-social

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

@@ -1,7 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { PosSwitch } from './pos-switch';
 import { when } from 'jest-when';
-import { RdfType, Thing } from '@pod-os/core';
+import { RdfType, Relation, Thing } from '@pod-os/core';
 import { Subject } from 'rxjs';
 
 describe('pos-switch', () => {
@@ -203,16 +203,15 @@ describe('pos-switch', () => {
         </pos-case>
       </pos-switch>`,
     });
+    const observedRelations$ = new Subject<Relation[]>();
     const thing = {
       uri: 'https://pod.example/resource',
-      relations: jest.fn(),
+      observeRelations: () => observedRelations$,
     };
-    when(thing.relations)
-      .calledWith('https://schema.org/video')
-      .mockReturnValue([{ predicate: 'https://schema.org/video', uris: ['https://video.test/video-1'] }]);
-    when(thing.relations).calledWith('https://schema.org/description').mockReturnValue([]);
-
-    await page.rootInstance.receiveResource(thing);
+    page.rootInstance.receiveResource(thing);
+    observedRelations$.next([
+      { predicate: 'https://schema.org/video', label: 'video', uris: ['https://video.test/video-1'] },
+    ]);
     await page.waitForChanges();
     expect(page.root?.innerHTML).toEqualHtml(`
         <div>Resource has video</div>
@@ -236,16 +235,15 @@ describe('pos-switch', () => {
         </pos-case>
       </pos-switch>`,
     });
+    const observedReverseRelations$ = new Subject<Relation[]>();
     const thing = {
       uri: 'https://pod.example/resource',
-      reverseRelations: jest.fn(),
+      observeReverseRelations: () => observedReverseRelations$,
     };
-    when(thing.reverseRelations)
-      .calledWith('https://schema.org/video')
-      .mockReturnValue([{ predicate: 'https://schema.org/video', uris: ['https://video.test/video-1'] }]);
-    when(thing.reverseRelations).calledWith('https://schema.org/subjectOf').mockReturnValue([]);
-
-    await page.rootInstance.receiveResource(thing);
+    page.rootInstance.receiveResource(thing);
+    observedReverseRelations$.next([
+      { predicate: 'https://schema.org/video', label: 'video', uris: ['https://video.test/video-1'] },
+    ]);
     await page.waitForChanges();
     expect(page.root?.innerHTML).toEqualHtml(`
         <div>Resource is video</div>

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

@@ -1,4 +1,4 @@
-import { RdfType, Thing } from '@pod-os/core';
+import { RdfType, Relation, Thing } from '@pod-os/core';
 import { Component, Element, Event, h, Host, State } from '@stencil/core';
 import { ResourceAware, ResourceEventEmitter, subscribeResource } from '../events/ResourceAware';
 import { firstValueFrom, Subject, takeUntil } from 'rxjs';
@@ -18,6 +18,8 @@ export class PosSwitch implements ResourceAware {
   @State() resource: Thing;
   @State() caseElements: HTMLPosCaseElement[];
   @State() types: RdfType[];
+  @State() relations: Relation[];
+  @State() reverseRelations: Relation[];
 
   private readonly disconnected$ = new Subject<void>();
 
@@ -40,12 +42,10 @@ export class PosSwitch implements ResourceAware {
       state = this.types.map(x => x.uri).includes(caseElement.getAttribute('if-typeof'));
     }
     if (caseElement.getAttribute('if-property') !== null) {
-      const relations = this.resource.relations(caseElement.getAttribute('if-property'));
-      state = relations.length > 0;
+      state = this.relations.map(x => x.predicate).includes(caseElement.getAttribute('if-property'));
     }
     if (caseElement.getAttribute('if-rev') !== null) {
-      const reverseRelations = this.resource.reverseRelations(caseElement.getAttribute('if-rev'));
-      state = reverseRelations.length > 0;
+      state = this.reverseRelations.map(x => x.predicate).includes(caseElement.getAttribute('if-rev'));
     }
     if (caseElement.getAttribute('not') != null) {
       state = !state;
@@ -61,6 +61,20 @@ export class PosSwitch implements ResourceAware {
       });
       await firstValueFrom(observeTypes);
     }
+    if (this.caseElements.some(caseElement => caseElement.hasAttribute('if-property'))) {
+      const observeRelations = resource.observeRelations().pipe(takeUntil(this.disconnected$));
+      observeRelations.subscribe(relations => {
+        this.relations = relations;
+      });
+      await firstValueFrom(observeRelations);
+    }
+    if (this.caseElements.some(caseElement => caseElement.hasAttribute('if-rev'))) {
+      const observeReverseRelations = resource.observeReverseRelations().pipe(takeUntil(this.disconnected$));
+      observeReverseRelations.subscribe(reverseRelations => {
+        this.reverseRelations = reverseRelations;
+      });
+      await firstValueFrom(observeReverseRelations);
+    }
     this.resource = resource;
   };