Skip to content

Commit

Permalink
UI working
Browse files Browse the repository at this point in the history
  • Loading branch information
@guillemcordoba
guillemcordoba committed Oct 29, 2024
1 parent 4f7580a commit ae126f0
Show file tree
Hide file tree
Showing 10 changed files with 108 additions and 193 deletions.
29 changes: 21 additions & 8 deletions tests/src/linked-devices.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { toPromise, watch } from '@holochain-open-dev/signals';
import { EntryRecord } from '@holochain-open-dev/utils';
import { encodeHashToBase64 } from '@holochain/client';
import { dhtSync, pause, runScenario } from '@holochain/tryorama';
import { assert, test } from 'vitest';
import { assert, expect, test } from 'vitest';

import { sampleProfile } from '../../ui/src/mocks.js';
import { Profile } from '../../ui/src/types.js';
Expand Down Expand Up @@ -40,10 +40,19 @@ test('create Profile and link devices', async () => {
encodeHashToBase64(alice.player.agentPubKey),
);

await linkDevices(
alice.store.linkedDevicesStore,
bob.store.linkedDevicesStore,
);
// Bob can't link to Alice's profile yet because they haven't linked their devices
await expect(() =>
bob.store.client.linkMyAgentToProfile(profile.actionHash),
).rejects.toThrowError();

await linkDevices(alice.linkedDevicesStore, bob.linkedDevicesStore);

await dhtSync(
[alice.player, bob.player, carol.player],
alice.player.cells[0].cell_id[0],
); // Difference in time between the create the processing of the signal

await bob.store.client.linkMyAgentToProfile(profile.actionHash);

await dhtSync(
[alice.player, bob.player, carol.player],
Expand Down Expand Up @@ -87,11 +96,15 @@ test('create Profile and link devices', async () => {

/** Bob's device now links carol's **/

await linkDevices(
bob.store.linkedDevicesStore,
carol.store.linkedDevicesStore,
await linkDevices(bob.linkedDevicesStore, carol.linkedDevicesStore);

await dhtSync(
[alice.player, bob.player, carol.player],
alice.player.cells[0].cell_id[0],
);

await carol.store.client.linkMyAgentToProfile(profile.actionHash);

await dhtSync(
[alice.player, bob.player, carol.player],
alice.player.cells[0].cell_id[0],
Expand Down
18 changes: 9 additions & 9 deletions tests/src/setup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,25 +85,16 @@ export async function setup3(scenario: Scenario) {

const aliceStore = new ProfilesStore(
new ProfilesClient(alice.appWs as AppClient, 'profiles-test', 'profiles'),
new LinkedDevicesStore(
new LinkedDevicesClient(alice.appWs as any, 'profiles-test'),
),
);
patchCallZome(alice.appWs as AppWebsocket);

const bobStore = new ProfilesStore(
new ProfilesClient(bob.appWs as AppClient, 'profiles-test', 'profiles'),
new LinkedDevicesStore(
new LinkedDevicesClient(bob.appWs as any, 'profiles-test'),
),
);
patchCallZome(bob.appWs as AppWebsocket);

const carolStore = new ProfilesStore(
new ProfilesClient(carol.appWs as AppClient, 'profiles-test', 'profiles'),
new LinkedDevicesStore(
new LinkedDevicesClient(carol.appWs as any, 'profiles-test'),
),
);
patchCallZome(carol.appWs as AppWebsocket);

Expand All @@ -120,14 +111,23 @@ export async function setup3(scenario: Scenario) {
alice: {
player: alice,
store: aliceStore,
linkedDevicesStore: new LinkedDevicesStore(
new LinkedDevicesClient(alice.appWs as any, 'profiles-test'),
),
},
bob: {
player: bob,
store: bobStore,
linkedDevicesStore: new LinkedDevicesStore(
new LinkedDevicesClient(bob.appWs as any, 'profiles-test'),
),
},
carol: {
player: carol,
store: carolStore,
linkedDevicesStore: new LinkedDevicesStore(
new LinkedDevicesClient(carol.appWs as any, 'profiles-test'),
),
},
};
}
Expand Down
101 changes: 52 additions & 49 deletions ui/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
LinkedDevicesClient,
LinkedDevicesStore,
} from '@darksoil-studio/linked-devices';
import '@darksoil-studio/linked-devices/dist/elements/link-devices-recipient';
import '@darksoil-studio/linked-devices/dist/elements/linked-devices-context';
import '@darksoil-studio/linked-devices/dist/elements/link-devices-recipient.js';
import '@darksoil-studio/linked-devices/dist/elements/linked-devices-context.js';
import { onSubmit } from '@holochain-open-dev/elements';
import { AppWebsocket } from '@holochain/client';
import '@shoelace-style/shoelace/dist/themes/dark.css';
Expand Down Expand Up @@ -56,12 +56,11 @@

const service = new ProfilesClient(client, 'profiles-test');

const linkedDevicesStore = new LinkedDevicesStore(
new LinkedDevicesClient(client),
'profiles-test',
this.linkedDevicesStore = new LinkedDevicesStore(
new LinkedDevicesClient(client, 'profiles-test'),
);

this.store = new ProfilesStore(service, linkedDevicesStore, {
this.store = new ProfilesStore(service, {
avatarMode: 'avatar-required',
additionalFields: [
{
Expand Down Expand Up @@ -94,7 +93,7 @@
if (!this.loaded) return html`<span>Loading...</span>`;
if (this.linkAgent)
return html`
<linked-devices-context .store=${this.store.linkedDevicesStore}>
<linked-devices-context .store=${this.linkedDevicesStore}>
<profiles-context .store=${this.store}>
<link-devices-recipient
style="flex: 1"
Expand All @@ -108,50 +107,54 @@
</linked-devices-context>
`;
return html`
<profiles-context .store=${this.store}>
<profile-prompt
@profile-created=${e => console.log(e)}
>
<div style="flex-direction: row; display:flex; flex-wrap: wrap">
<form ${onSubmit(f => this.onSubmit(f))}>
<textarea-with-mentions
name="hi"
label="hey"
></textarea-with-mentions>
<input type="submit" />
</form>
<all-profiles></all-profiles>
<my-profile style="height: 200px; width: 200px;"></my-profile>
<agent-avatar .agentPubKey=${this.store.client.client.myPubKey}>
<div
style="background-color: lightgreen; width: 12px; height: 12px; border-radius: 50%"
slot="badge"
></div>
</agent-avatar>
<search-profile
name="author"
required
@profile-selected=${e => console.log(e)}
></search-profile>
<search-profiles name="hosts" required></search-profiles>
<agent-avatar
.agentPubKey=${this.store.client.client.myPubKey}
.showOnHover=${false}
.copyOnClick=${false}
<linked-devices-context .store=${this.linkedDevicesStore}>
<profiles-context .store=${this.store}>
<profile-prompt
@profile-created=${e => console.log(e)}
>
</agent-avatar>
<agent-mention
.agentPubKey=${this.store.client.client.myPubKey}
>
</agent-mention>
<sl-button @click=${() => {
this.linkAgent = true;
this.requestUpdate();
}}>Link Device
</sl-button>
<div style="flex-direction: row; display:flex; flex-wrap: wrap">
<form ${onSubmit(f => this.onSubmit(f))}>
<textarea-with-mentions
name="hi"
label="hey"
></textarea-with-mentions>
<input type="submit" />
</form>
<all-profiles></all-profiles>
<my-profile style="height: 200px; width: 200px;"></my-profile>
<agent-avatar .agentPubKey=${this.store.client.client.myPubKey}>
<div
style="background-color: lightgreen; width: 12px; height: 12px; border-radius: 50%"
slot="badge"
></div>
</agent-avatar>
<search-profile
name="author"
required
@profile-selected=${e => console.log(e)}
></search-profile>
<search-profiles name="hosts" required></search-profiles>
<agent-avatar
.agentPubKey=${this.store.client.client.myPubKey}
.showOnHover=${false}
.copyOnClick=${false}
>
</agent-avatar>
<agent-mention
.agentPubKey=${this.store.client.client.myPubKey}
>
</agent-mention>
<div>
<sl-button @click=${() => {
this.linkAgent = true;
this.requestUpdate();
}}>Link Device
</sl-button>
</div>
</profile-prompt>
</profiles-context>
</profile-prompt>
</profiles-context>
</linked-devices-context>
`;
}
}
Expand Down
3 changes: 3 additions & 0 deletions ui/src/elements/agent-avatar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,9 @@ export class AgentAvatar extends SignalWatcher(LitElement) {
right: 0;
bottom: 0;
}
:host {
height: 32px;
}
`,
];
}
10 changes: 6 additions & 4 deletions ui/src/elements/agent-mention.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,15 @@ export class AgentMention extends SignalWatcher(LitElement) {
width: `${this.size}px`,
})}
>
<holo-identicon
<agent-avatar
.disableCopy=${true}
.disableTooltip=${true}
.hash=${this.agentPubKey}
.agentPubKey=${this.agentPubKey}
.profileHash=${this.profileHash}
.size=${this.size}
style="height: ${this.size}px"
>
</holo-identicon>
</agent-avatar>
</div>`;
}
return html`
Expand All @@ -79,7 +81,7 @@ export class AgentMention extends SignalWatcher(LitElement) {

renderProfile(profile: EntryRecord<Profile> | undefined) {
return html`
<div class="row">
<div class="row" style="align-items: center">
${this.renderAvatar(profile)}
<span style="margin-left: 8px">${profile?.entry.nickname}</span>
</div>
Expand Down
19 changes: 17 additions & 2 deletions ui/src/elements/profile-prompt.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import '@darksoil-studio/linked-devices/dist/elements/link-devices-requestor.js';
import { sharedStyles, wrapPathInSvg } from '@holochain-open-dev/elements';
import '@holochain-open-dev/elements/dist/elements/display-error.js';
import { SignalWatcher } from '@holochain-open-dev/signals';
Expand All @@ -12,7 +13,6 @@ import { customElement, property, state } from 'lit/decorators.js';
import { profilesStoreContext } from '../context.js';
import { ProfilesStore } from '../profiles-store.js';
import './create-profile.js';
import './link-agent-requestor.js';

/**
* @element profile-prompt
Expand Down Expand Up @@ -65,7 +65,22 @@ export class ProfilePrompt extends SignalWatcher(LitElement) {
<sl-icon slot="prefix" .src=${wrapPathInSvg(mdiArrowLeft)}></sl-icon>
${msg('Back')}</sl-button
>
<link-agent-requestor></link-agent-requestor>
<link-devices-requestor
@device-linked=${async (e: CustomEvent) => {
const linkedDevice = e.detail.agentPubKey;
const profileForLinkedDeviceLinks =
await this.store.client.getAgentProfile(linkedDevice);
if (profileForLinkedDeviceLinks.length > 0) {
const profileForLinkedDevice =
profileForLinkedDeviceLinks[0].target;
await this.store.client.linkMyAgentToProfile(
profileForLinkedDevice,
);
}
}}
></link-devices-requestor>
</div>`;

return html`
Expand Down
33 changes: 0 additions & 33 deletions ui/src/profiles-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,42 +29,9 @@ export class ProfilesStore {

constructor(
public client: ProfilesClient,
public linkedDevicesStore?: LinkedDevicesStore,
config: Partial<ProfilesConfig> = {},
) {
this.config = { ...defaultConfig, ...config };

if (linkedDevicesStore) {
linkedDevicesStore.client.onSignal(async signal => {
// console.log(
// 'signal',
// encodeHashToBase64(client.client.myPubKey),
// signal,
// );
if (
signal.type !== 'LinkCreated' ||
signal.link_type !== 'AgentToLinkedDevices'
)
return;

const linkedDevice = retype(
signal.action.hashed.content.target_address,
HashType.AGENT,
);

const myProfile = await toPromise(this.myProfile);

if (myProfile !== undefined) return;

const profileForLinkedDeviceLinks =
await this.client.getAgentProfile(linkedDevice);

if (profileForLinkedDeviceLinks.length > 0) {
const profileForLinkedDevice = profileForLinkedDeviceLinks[0].target;
await this.client.linkMyAgentToProfile(profileForLinkedDevice);
}
});
}
}

/**
Expand Down
21 changes: 0 additions & 21 deletions ui/test/elements.test.js
View file

This file was deleted.

19 changes: 0 additions & 19 deletions ui/test/mocks/index.js
View file

This file was deleted.

Loading

0 comments on commit ae126f0

Please sign in to comment.