tildefriends/apps/ssb/tf-app.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

400 lines
10 KiB
JavaScript
Raw Normal View History

import {LitElement, html, css, guard, until} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';
import {styles} from './tf-styles.js';
class TfElement extends LitElement {
static get properties() {
return {
whoami: {type: String},
hash: {type: String},
unread: {type: Array},
tab: {type: String},
broadcasts: {type: Array},
connections: {type: Array},
loading: {type: Boolean},
loaded: {type: Boolean},
following: {type: Array},
users: {type: Object},
ids: {type: Array},
tags: {type: Array},
};
}
static styles = styles;
constructor() {
super();
let self = this;
this.hash = '#';
this.unread = [];
this.tab = 'news';
this.broadcasts = [];
this.connections = [];
this.following = [];
this.users = {};
this.loaded = false;
this.tags = [];
2024-02-24 11:09:34 -05:00
tfrpc.rpc.getBroadcasts().then((b) => {
self.broadcasts = b || [];
});
tfrpc.rpc.getConnections().then((c) => {
self.connections = c || [];
});
tfrpc.rpc.getHash().then((hash) => self.set_hash(hash));
tfrpc.register(function hashChanged(hash) {
self.set_hash(hash);
});
tfrpc.register(async function notifyNewMessage(id) {
await self.fetch_new_message(id);
});
tfrpc.register(function set(name, value) {
if (name === 'broadcasts') {
self.broadcasts = value;
} else if (name === 'connections') {
self.connections = value;
} else if (name === 'identity') {
self.whoami = value;
}
});
this.initial_load();
}
async initial_load() {
let whoami = await tfrpc.rpc.getActiveIdentity();
let ids = (await tfrpc.rpc.getIdentities()) || [];
this.whoami = whoami ?? (ids.length ? ids[0] : undefined);
this.ids = ids;
}
set_hash(hash) {
this.hash = decodeURIComponent(hash || '#');
if (this.hash.startsWith('#q=')) {
this.tab = 'search';
} else if (this.hash === '#connections') {
this.tab = 'connections';
} else if (this.hash === '#mentions') {
this.tab = 'mentions';
} else if (this.hash.startsWith('#sql=')) {
this.tab = 'query';
} else {
this.tab = 'news';
}
}
async fetch_about(ids, users) {
const k_cache_version = 1;
let cache = await tfrpc.rpc.databaseGet('about');
cache = cache ? JSON.parse(cache) : {};
if (cache.version !== k_cache_version) {
cache = {
version: k_cache_version,
about: {},
last_row_id: 0,
};
}
2024-02-24 11:09:34 -05:00
let max_row_id = (
await tfrpc.rpc.query(
`
SELECT MAX(rowid) AS max_row_id FROM messages
2024-02-24 11:09:34 -05:00
`,
[]
)
)[0].max_row_id;
for (let id of Object.keys(cache.about)) {
if (ids.indexOf(id) == -1) {
delete cache.about[id];
}
}
let abouts = await tfrpc.rpc.query(
`
SELECT
messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
FROM
messages,
json_each(?1) AS following
WHERE
messages.author = following.value AND
messages.rowid > ?3 AND
messages.rowid <= ?4 AND
json_extract(messages.content, '$.type') = 'about'
UNION
SELECT
messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
FROM
messages,
json_each(?2) AS following
WHERE
messages.author = following.value AND
messages.rowid <= ?4 AND
json_extract(messages.content, '$.type') = 'about'
ORDER BY messages.author, messages.sequence
`,
[
2024-02-24 11:09:34 -05:00
JSON.stringify(ids.filter((id) => cache.about[id])),
JSON.stringify(ids.filter((id) => !cache.about[id])),
cache.last_row_id,
max_row_id,
2024-02-24 11:09:34 -05:00
]
);
for (let about of abouts) {
let content = JSON.parse(about.content);
if (content.about === about.author) {
delete content.type;
delete content.about;
2024-02-24 11:09:34 -05:00
cache.about[about.author] = Object.assign(
cache.about[about.author] || {},
content
);
}
}
cache.last_row_id = max_row_id;
await tfrpc.rpc.databaseSet('about', JSON.stringify(cache));
users = users || {};
for (let id of Object.keys(cache.about)) {
users[id] = Object.assign(users[id] || {}, cache.about[id]);
}
return Object.assign({}, users);
}
async fetch_new_message(id) {
let messages = await tfrpc.rpc.query(
`
2024-02-28 20:41:27 -05:00
SELECT messages.id, previous, author, sequence, timestamp, hash, json(content) AS content, signature
FROM messages
JOIN json_each(?) AS following ON messages.author = following.value
WHERE messages.id = ?
`,
2024-02-24 11:09:34 -05:00
[JSON.stringify(this.following), id]
);
if (messages && messages.length) {
this.unread = [...this.unread, ...messages];
this.unread = this.unread.slice(this.unread.length - 1024);
}
}
async _handle_whoami_changed(event) {
let old_id = this.whoami;
let new_id = event.srcElement.selected;
console.log('received', new_id);
if (this.whoami !== new_id) {
console.log(event);
this.whoami = new_id;
console.log(`whoami ${old_id} => ${new_id}`);
await tfrpc.rpc.localStorageSet('whoami', new_id);
}
}
async create_identity() {
2024-02-24 11:09:34 -05:00
if (confirm('Are you sure you want to create a new identity?')) {
await tfrpc.rpc.createIdentity();
this.ids = (await tfrpc.rpc.getIdentities()) || [];
if (this.ids && !this.whoami) {
this.whoami = this.ids[0];
}
}
}
async load_recent_tags() {
let start = new Date();
2024-02-24 11:09:34 -05:00
this.tags = await tfrpc.rpc.query(
`
WITH
recent AS (SELECT id, json(content) AS content FROM messages
WHERE messages.timestamp > ? AND json_extract(content, '$.type') = 'post'
ORDER BY timestamp DESC LIMIT 1024),
recent_channels AS (SELECT recent.id, '#' || json_extract(content, '$.channel') AS tag
FROM recent
WHERE json_extract(content, '$.channel') IS NOT NULL),
recent_mentions AS (SELECT recent.id, json_extract(mention.value, '$.link') AS tag
FROM recent, json_each(recent.content, '$.mentions') AS mention
WHERE json_valid(mention.value) AND tag LIKE '#%'),
combined AS (SELECT id, tag FROM recent_channels UNION ALL SELECT id, tag FROM recent_mentions),
by_message AS (SELECT DISTINCT id, tag FROM combined)
SELECT tag, COUNT(*) AS count FROM by_message GROUP BY tag ORDER BY count DESC LIMIT 10
2024-02-24 11:09:34 -05:00
`,
[new Date() - 7 * 24 * 60 * 60 * 1000]
);
console.log('tags took', (new Date() - start) / 1000.0, 'seconds');
}
async load() {
let whoami = this.whoami;
let tags = this.load_recent_tags();
let following = await tfrpc.rpc.following([whoami], 2);
let users = {};
let by_count = [];
for (let [id, v] of Object.entries(following)) {
users[id] = {
following: v.of,
blocking: v.ob,
followed: v.if,
blocked: v.ib,
};
by_count.push({count: v.of, id: id});
}
console.log(by_count.sort((x, y) => y.count - x.count).slice(0, 20));
2024-04-21 14:18:06 -04:00
let start_time = new Date();
users = await this.fetch_about(Object.keys(following).sort(), users);
2024-04-24 19:23:13 -04:00
console.log(
'about took',
(new Date() - start_time) / 1000.0,
'seconds for',
Object.keys(users).length,
'users'
);
this.following = Object.keys(following);
this.users = users;
await tags;
console.log(`load finished ${whoami} => ${this.whoami}`);
this.whoami = whoami;
this.loaded = whoami;
}
render_tab() {
let following = this.following;
let users = this.users;
if (this.tab === 'news') {
return html`
2024-02-24 11:09:34 -05:00
<tf-tab-news
id="tf-tab-news"
.following=${this.following}
whoami=${this.whoami}
.users=${this.users}
hash=${this.hash}
.unread=${this.unread}
@refresh=${() => (this.unread = [])}
?loading=${this.loading}
2024-02-24 11:09:34 -05:00
></tf-tab-news>
`;
} else if (this.tab === 'connections') {
return html`
2024-02-24 11:09:34 -05:00
<tf-tab-connections
.users=${this.users}
.connections=${this.connections}
.broadcasts=${this.broadcasts}
></tf-tab-connections>
`;
} else if (this.tab === 'mentions') {
return html`
2024-02-24 11:09:34 -05:00
<tf-tab-mentions
.following=${this.following}
whoami=${this.whoami}
.users="${this.users}}"
></tf-tab-mentions>
`;
} else if (this.tab === 'search') {
return html`
2024-02-24 11:09:34 -05:00
<tf-tab-search
.following=${this.following}
whoami=${this.whoami}
.users=${this.users}
query=${this.hash?.startsWith('#q=')
? decodeURIComponent(this.hash.substring(3))
: null}
></tf-tab-search>
`;
} else if (this.tab === 'query') {
return html`
2024-02-24 11:09:34 -05:00
<tf-tab-query
.following=${this.following}
whoami=${this.whoami}
.users=${this.users}
query=${this.hash?.startsWith('#sql=')
? decodeURIComponent(this.hash.substring(5))
: null}
></tf-tab-query>
`;
}
}
async set_tab(tab) {
this.tab = tab;
if (tab === 'news') {
await tfrpc.rpc.setHash('#');
} else if (tab === 'connections') {
await tfrpc.rpc.setHash('#connections');
} else if (tab === 'mentions') {
await tfrpc.rpc.setHash('#mentions');
} else if (tab === 'query') {
await tfrpc.rpc.setHash('#sql=');
}
}
refresh() {
tfrpc.rpc.sync();
}
render() {
let self = this;
if (!this.loading && this.whoami && this.loaded !== this.whoami) {
this.loading = true;
2024-02-24 11:09:34 -05:00
this.load().finally(function () {
self.loading = false;
});
}
const k_tabs = {
'📰': 'news',
'📡': 'connections',
'@': 'mentions',
'🔍': 'search',
'👩‍💻': 'query',
};
let tabs = html`
<div class="w3-bar w3-theme-l1">
<button
class="w3-bar-item w3-button w3-circle w3-ripple"
@click=${this.refresh}
>
</button>
2024-02-24 11:09:34 -05:00
${Object.entries(k_tabs).map(
([k, v]) => html`
<button
title=${v}
2024-05-12 07:48:34 -04:00
class="w3-bar-item w3-padding w3-hover-theme tab ${self.tab == v
2024-04-04 20:35:09 -04:00
? 'w3-theme-l2'
: 'w3-theme-l1'}"
2024-02-24 11:09:34 -05:00
@click=${() => self.set_tab(v)}
>
${k}
2024-05-12 07:48:34 -04:00
<span class=${self.tab == v ? '' : 'w3-hide-small'}
>${v.charAt(0).toUpperCase() + v.substring(1)}</span
>
2024-02-24 11:09:34 -05:00
</button>
`
)}
</div>
`;
2024-02-24 11:09:34 -05:00
let contents = !this.loaded
? this.loading
2024-05-12 07:48:34 -04:00
? html`<div
class="w3-panel w3-theme-l5 w3-card-4 w3-padding-large w3-round-xlarge"
>
Loading...
</div>
${this.render_tab()}`
2024-02-24 11:09:34 -05:00
: html`<div>Select or create an identity.</div>`
: this.render_tab();
return html`
2024-04-11 18:36:31 -04:00
<div
style="width: 100vw; min-height: 100vh; height: 100%"
class="w3-theme-dark"
>
2024-05-02 20:35:00 -04:00
${tabs}
<div style="padding: 8px">
${this.tags.map(
(x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`
)}
${contents}
</div>
2024-04-04 20:35:09 -04:00
</div>
`;
}
}
customElements.define('tf-app', TfElement);