From 79626f19ff4703e0f42d0dfe3638830e483fe944 Mon Sep 17 00:00:00 2001 From: Arne Vandoorslaer Date: Tue, 6 Jul 2021 15:42:39 +0200 Subject: [PATCH] feat: render information from pod (#114) --- .../lib/components/profile.component.ts | 2 +- packages/semcom-components/lib/demo.ts | 14 +++- .../semcom-demo-app/src/demo.component.ts | 66 ++++++++++++++++++- 3 files changed, 77 insertions(+), 5 deletions(-) diff --git a/packages/semcom-components/lib/components/profile.component.ts b/packages/semcom-components/lib/components/profile.component.ts index b782711e..3189357c 100644 --- a/packages/semcom-components/lib/components/profile.component.ts +++ b/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; diff --git a/packages/semcom-components/lib/demo.ts b/packages/semcom-components/lib/demo.ts index df2116df..05e0e5db 100644 --- a/packages/semcom-components/lib/demo.ts +++ b/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 }, })); diff --git a/packages/semcom-demo-app/src/demo.component.ts b/packages/semcom-demo-app/src/demo.component.ts index 32961d6b..8dabc669 100644 --- a/packages/semcom-demo-app/src/demo.component.ts +++ b/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); + } }