tildefriends/apps/collections/tf-collections-app.js

import {LitElement, html} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';

class TfCollectionsAppElement extends LitElement {
	static get properties() {
		return {
			ids: {type: Array},
			owner_ids: {type: Array},
			whoami: {type: String},
			wiki: {type: Object},
			wiki_doc: {type: Object},
			hash: {type: String},
		};
	}

	constructor() {
		super();
		this.ids = [];
		this.owner_ids = [];
		this.load();
		let self = this;
		tfrpc.register(function notify_new_message(message) {
			self.notify_new_message(message);
		});
		tfrpc.register(function hash_changed(hash) {
			self.hash = hash;
		});
		tfrpc.rpc.get_hash().then(hash => self.hash = hash);
	}

	async load() {
		this.ids = await tfrpc.rpc.getIdentities();
		this.owner_ids = await tfrpc.rpc.getOwnerIdentities();
		this.whoami = await tfrpc.rpc.localStorageGet('collections_whoami');
	}

	notify_new_message(message) {
		console.log('notify_new_message', message);
		console.log('this', this);
		console.log('qs', this.shadowRoot.querySelectorAll('tf-collection'));
		for (let element of this.shadowRoot.querySelectorAll('tf-collection')) {
			element.notify_new_message(message);
		}
	}

	async notify_hash_changed(hash) {
		this.hash = hash;
	}

	async on_whoami_changed(event) {
		let new_id = event.srcElement.selected;
		await tfrpc.rpc.localStorageSet('collections_whoami', new_id);
		this.whoami = new_id;
	}

	update_hash() {
		tfrpc.rpc.set_hash(this.wiki_doc ? `${this.wiki.name}/${this.wiki_doc.name}` : `${this.wiki.name}`);
	}

	async on_wiki_changed(event) {
		this.wiki = event.detail.value;
		if (event.detail.by_user) {
			this.update_hash();
		}
	}

	async on_wiki_doc_changed(event) {
		this.wiki_doc = Object.assign({}, event.detail.value);
		if (event.detail.by_user) {
			this.update_hash();
		}
	}

	async on_wiki_publish(event) {
		let blob_id = event.detail.id;
		let message = {
			type: 'wiki-doc',
			key: this.wiki_doc.id,
			parent: this.wiki_doc.parent,
			blob: blob_id,
		};
		print(message);
		await tfrpc.rpc.appendMessage(this.whoami, message);
		return this.shadowRoot.getElementById('docs').load();
	}

	render() {
		let self = this;
		console.log('render', this.wiki?.name, this.wiki_doc?.name, this.hash);
		return html`
			<div>
				<tf-id-picker .ids=${this.ids} selected=${this.whoami} @change=${this.on_whoami_changed}></tf-id-picker>
			</div>
			<div>
				<tf-collection
					whoami=${this.whoami}
					.ids=${this.owner_ids}
					type="wiki"
					selectname=${this.hash?.substring(1)?.split('/')?.[0]}
					@selected=${this.on_wiki_changed}></tf-collection>
				<tf-collection
					id="docs"
					whoami=${this.whoami}
					.ids=${this.owner_ids}
					type="wiki-doc"
					parent=${this.wiki?.id}
					?hidden=${!this.wiki?.id}
					selectname=${this.hash?.split('/')?.[1]}
					@selected=${this.on_wiki_doc_changed}></tf-collection>
			</div>
			${this.wiki_doc && this.wiki_doc.parent === this.wiki?.id ? html`
				<tf-wiki-doc
					whoami=${this.whoami}
					.value=${this.wiki_doc}
					@publish=${this.on_wiki_publish}></tf-wiki-doc>
			` : undefined}
		`;
	}
}

customElements.define('tf-collections-app', TfCollectionsAppElement);