tildefriends/apps/ssb/tf-tab-search.js

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

class TfTabSearchElement extends LitElement {
	static get properties() {
		return {
			whoami: {type: String},
			users: {type: Object},
			following: {type: Array},
			query: {type: String},
			expanded: {type: Object},
		};
	}

	static styles = styles;

	constructor() {
		super();
		let self = this;
		this.whoami = null;
		this.users = {};
		this.following = [];
		this.expanded = {};
	}

	async search(query) {
		console.log('Searching...', this.whoami, query);
		let search = this.renderRoot.getElementById('search');
		if (search) {
			search.value = query;
			search.focus();
			search.select();
		}
		await tfrpc.rpc.setHash('#q=' + encodeURIComponent(query));
		let results = await tfrpc.rpc.query(
			`
				SELECT messages.*
				FROM messages_fts(?)
				JOIN messages ON messages.rowid = messages_fts.rowid
				JOIN json_each(?) AS following ON messages.author = following.value
				ORDER BY timestamp DESC limit 100
			`,
			['"' + query.replace('"', '""') + '"', JSON.stringify(this.following)]
		);
		console.log('Done.');
		search = this.renderRoot.getElementById('search');
		if (search) {
			search.value = query;
			search.focus();
			search.select();
		}
		this.renderRoot.getElementById('news').messages = results;
	}

	search_keydown(event) {
		if (event.keyCode == 13) {
			this.query = this.renderRoot.getElementById('search').value;
		}
	}

	on_expand(event) {
		if (event.detail.expanded) {
			let expand = {};
			expand[event.detail.id] = true;
			this.expanded = Object.assign({}, this.expanded, expand);
		} else {
			delete this.expanded[event.detail.id];
			this.expanded = Object.assign({}, this.expanded);
		}
	}

	render() {
		if (this.query !== this.last_query) {
			this.last_query = this.query;
			this.search(this.query);
		}
		let self = this;
		return html`
			<div style="display: flex; flex-direction: row; gap: 4px">
				<input type="text" class="w3-input w3-dark-grey" id="search" value=${this.query} style="flex: 1" @keydown=${this.search_keydown}></input>
				<button class="w3-button w3-dark-grey" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}>Search</button>
			</div>
			<tf-news id="news" whoami=${this.whoami} .messages=${this.messages} .users=${this.users} .expanded=${this.expanded} @tf-expand=${this.on_expand}></tf-news>
		`;
	}
}

customElements.define('tf-tab-search', TfTabSearchElement);