Feat/render data from pod

packages/semcom-components/lib/components/profile.component.ts

@@ -47,7 +47,7 @@ export class ProfileComponent extends BaseComponent {
     const store = new Store(event.detail.data);
 
     this.name = store.getQuads(null,  new NamedNode(`${foaf}name`), null, null)[0]?.object.value;
-    this.avatar = store.getQuads(null, new NamedNode(`${n}hasPhoto`), null, null)[0]?.object.value;
+    this.avatar = store.getQuads(null, new NamedNode(`${n}hasPhoto`), null, null)[0]?.object.value ?? this.avatar;
     this.job = store.getQuads(null, new NamedNode(`${n}role`), null, null)[0]?.object.value;
     this.company = store.getQuads(null, new NamedNode(`${n}organization-name`), null, null)[0]?.object.value;
     this.city = store.getQuads(null, new NamedNode(`${n}locality`), null, null)[0]?.object.value;

packages/semcom-components/lib/demo.ts

@@ -20,9 +20,13 @@ document.addEventListener(ComponentEventType.READ, (event: ComponentReadEvent) =
 
   fetch(event.detail.uri).then((response) => response.text().then((profileText) => {
 
+    const target = event.target;
+
+    event.stopPropagation();
+
     const quads = parser.parse(profileText);
 
-    event.target?.dispatchEvent(new ComponentResponseEvent({
+    target?.dispatchEvent(new ComponentResponseEvent({
       detail: { uri: event.detail.uri, cause: event, data: quads, success: true },
     }));
 
@@ -32,6 +36,10 @@ document.addEventListener(ComponentEventType.READ, (event: ComponentReadEvent) =
 
 document.addEventListener(ComponentEventType.WRITE, (event: ComponentWriteEvent) => {
 
+  const target = event.target;
+
+  event.stopPropagation();
+
   if (!event || !event.detail || !event.detail.uri) {
 
     throw new Error('Argument event || !event.detail || !event.detail.uri should be set.');
@@ -42,13 +50,13 @@ document.addEventListener(ComponentEventType.WRITE, (event: ComponentWriteEvent)
 
     new URL(event.detail.uri);
 
-    setTimeout(() => event.target?.dispatchEvent(new ComponentResponseEvent({
+    setTimeout(() => target?.dispatchEvent(new ComponentResponseEvent({
       detail: { ...event.detail, cause: event, success: true },
     })), 2000);
 
   } catch(e) {
 
-    event.target?.dispatchEvent(new ComponentResponseEvent({
+    target?.dispatchEvent(new ComponentResponseEvent({
       detail: { ...event.detail, cause: event, success: false },
     }));
 

packages/semcom-demo-app/src/demo.component.ts

@@ -3,9 +3,12 @@ import { createMachine, interpret, State } from 'xstate';
 import { from } from 'rxjs';
 import { RxLitElement } from 'rx-lit';
 import { map } from 'rxjs/operators';
-import { AuthenticateComponent, LoadingComponent, ProviderListComponent, ProviderListItemComponent, SolidSDKService } from '@digita-ai/ui-transfer-components';
+import { AuthenticateComponent, LoadingComponent, ProviderListComponent, ProviderListItemComponent, Session, SolidSDKService } from '@digita-ai/ui-transfer-components';
 import { ComponentMetadata } from '@digita-ai/semcom-core';
 import { Theme } from '@digita-ai/ui-transfer-theme';
+import { ComponentEventType, ComponentReadEvent, ComponentResponseEvent, ComponentWriteEvent } from '@digita-ai/semcom-sdk';
+import { Parser } from 'n3';
+import { fetch } from '@digita-ai/inrupt-solid-client';
 import { demoMachine, DemoContext, DemoEvent, DemoState, DemoStates, AuthenticatedEvent } from './demo.machine';
 import { SemComService } from './services/semcom.service';
 
@@ -28,6 +31,9 @@ export class DemoComponent extends RxLitElement {
   @state()
   components: ComponentMetadata[];
 
+  @state()
+  session: Session;
+
   @query('.components')
   contentElement: HTMLDivElement;
 
@@ -42,6 +48,7 @@ export class DemoComponent extends RxLitElement {
     this.define('provider-list-item', ProviderListItemComponent);
 
     this.subscribe('state', from(this.actor));
+    this.subscribe('session', from(this.actor).pipe(map((appState) => appState.context.session)));
     this.subscribe('components', from(this.actor).pipe(map((appState) => appState.context.components)));
 
     this.actor.start();
@@ -57,8 +64,65 @@ export class DemoComponent extends RxLitElement {
       for (const component of this.components) {
 
         const element = document.createElement('demo-' + component.tag);
+
+        const parser = new Parser();
+
+        element.addEventListener(ComponentEventType.READ, async (event: ComponentReadEvent) => {
+
+          const target = event.target;
+
+          event.stopPropagation();
+
+          if (!event || !event.detail || !event.detail.uri) {
+
+            throw new Error('Argument event || !event.detail || !event.detail.uri should be set.');
+
+          }
+
+          const response = await fetch(event.detail.uri);
+          const profileText = await response.text();
+          const quads = parser.parse(profileText);
+
+          target?.dispatchEvent(new ComponentResponseEvent({
+            detail: { uri: event.detail.uri, cause: event, data: quads, success: true },
+          }));
+
+        });
+
+        element.addEventListener(ComponentEventType.WRITE, (event: ComponentWriteEvent) => {
+
+          const target = event.target;
+
+          event.stopPropagation();
+
+          if (!event || !event.detail || !event.detail.uri) {
+
+            throw new Error('Argument event || !event.detail || !event.detail.uri should be set.');
+
+          }
+
+          try {
+
+            new URL(event.detail.uri);
+
+            setTimeout(() => target?.dispatchEvent(new ComponentResponseEvent({
+              detail: { ...event.detail, cause: event, success: true },
+            })), 2000);
+
+          } catch(e) {
+
+            target?.dispatchEvent(new ComponentResponseEvent({
+              detail: { ...event.detail, cause: event, success: false },
+            }));
+
+          }
+
+        });
+
         this.contentElement.appendChild(element);
 
+        element.setAttribute('entry', this.session.webId);
+
       }
 
     }