tildefriends/apps/collections/tf-collections.js

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

class TfCollectionsElement extends LitElement {
	static get properties() {
		return {
			whoami: {type: String},
			collections: {type: Object},
			collections_loading: {type: Number},
			type: {type: String},
			kind: {type: String},
			parent: {type: String},
		};
	}

	constructor() {
		super();
		this.ids = [];
		this.load();
		this.type = 'collection';
		this.collections_loading = 0;
	}

	async load() {
		try {
			this.collections_loading++;
			if (this.whoami) {
				let following = await tfrpc.rpc.following([this.whoami], 2);
				if (this.type || this.kind) {
					let collections = await tfrpc.rpc.query(`
						SELECT messages.id, author, content, timestamp
						FROM messages JOIN json_each(?1) AS id ON messages.author = id.value
						WHERE
							json_extract(content, '$.type') = ?2 AND
							(?3 IS NULL OR json_extract(content, '$.kind') = ?3) AND
							(?4 IS NULL OR json_extract(content, '$.parent') = ?4)
						ORDER BY timestamp
					`, [JSON.stringify(following), this.type, this.kind, this.parent]);
					let by_id = {};
					for (let collection of collections) {
						let content = JSON.parse(collection.content);
						console.log(content);
						if (content?.key) {
							if (content?.tombstone) {
								delete by_id[content.key];
							} else if (by_id[content.key]) {
								by_id[content.key] = Object.assign(by_id[content.key], content);
							}
						} else {
							by_id[collection.id] = Object.assign(content, {id: collection.id});
						}
					}
					this.collections = Object.values(by_id);
				}
			}
		} finally {
			this.collections_loading--;
		}
	}

	async create(name, editors) {
		let message = {
			type: this.type,
			kind: this.kind,
			name: name,
			parent: this.parent,
			editors: editors,
		};
		print(message);
		await tfrpc.rpc.appendMessage(this.whoami, message);
		return this.load();
	}

	async on_create(event) {
		let name = this.shadowRoot.getElementById('create_name').value;
		if (name) {
			await this.create(name, [this.whoami]);
		}
	}

	async on_tombstone(id) {
		let message = {
			type: this.type,
			kind: this.kind,
			key: id,
			tombstone: {
				date: new Date().valueOf(),
				reason: 'archived',
			},
		};
		print(message);
		await tfrpc.rpc.appendMessage(this.whoami, message);
		return this.load();
	}

	set_selected(id, value) {
		this.dispatchEvent(new CustomEvent('selected', {
			bubbles: true,
			detail: {
				id: id,
				value: value,
			},
		}));
	}

	render_collection(collection) {
		return html`
		<div>
			<button @click=${() => this.set_selected(collection.id, collection)}>${collection.name}</button>
			<span>${collection.id}</span>
			<button @click=${() => this.on_tombstone(collection.id)}>🪦</button>
		</div>
		<div>
			${collection.editors.map(id => html`<span>${id}</span>`)}
		</div>
		`;
	}

	render() {
		let state = JSON.stringify([this.whoami, this.ids, this.kind, this.parent]);
		if (state !== this.loaded_for) {
			this.loaded_for = state;
			this.load();
		}
		return html`
			<h2 style="color: #fff">${this.kind ?? this.type}s</h2>
			<div style="color: #fff">${this.whoami}</div>
			<input type="text" id="create_name"></input><button @click=${this.on_create}>Create ${this.kind}</button>
			${this.collections_loading ? html`<div>Loading...</div>` : html`
				<ul>
					${this.collections?.map(x => html`<li>${this.render_collection(x)}</li>`)}
				</ul>
			`}
		`;
	}
}

customElements.define('tf-collections', TfCollectionsElement);