forked from cory/tildefriends
Cory McWilliams
1abc611e54
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4016 ed5197a5-7fde-0310-b194-c3ffbd925b24
168 lines
4.4 KiB
JavaScript
168 lines
4.4 KiB
JavaScript
import {LitElement, html, unsafeHTML, until} from './lit-all.min.js';
|
|
import * as tfrpc from '/static/tfrpc.js';
|
|
import {styles} from './tf-styles.js';
|
|
|
|
class TfTabNewsFeedElement extends LitElement {
|
|
static get properties() {
|
|
return {
|
|
whoami: {type: String},
|
|
users: {type: Object},
|
|
hash: {type: String},
|
|
following: {type: Array},
|
|
messages: {type: Array},
|
|
}
|
|
}
|
|
|
|
static styles = styles;
|
|
|
|
constructor() {
|
|
super();
|
|
let self = this;
|
|
this.whoami = null;
|
|
this.users = {};
|
|
this.hash = '#';
|
|
this.following = [];
|
|
}
|
|
|
|
async fetch_messages() {
|
|
if (this.hash.startsWith('#@')) {
|
|
let r = await tfrpc.rpc.query(
|
|
`
|
|
WITH mine AS (SELECT messages.*
|
|
FROM messages
|
|
WHERE messages.author = ?
|
|
ORDER BY sequence DESC
|
|
LIMIT 20)
|
|
SELECT messages.*
|
|
FROM mine
|
|
JOIN messages_refs ON mine.id = messages_refs.ref
|
|
JOIN messages ON messages_refs.message = messages.id
|
|
UNION
|
|
SELECT * FROM mine
|
|
`,
|
|
[
|
|
this.hash.substring(1),
|
|
]);
|
|
return r;
|
|
} else if (this.hash.startsWith('#%')) {
|
|
return await tfrpc.rpc.query(
|
|
`
|
|
SELECT messages.*
|
|
FROM messages
|
|
WHERE id = ?1
|
|
UNION
|
|
SELECT messages.*
|
|
FROM messages JOIN messages_refs
|
|
ON messages.id = messages_refs.message
|
|
WHERE messages_refs.ref = ?1
|
|
`,
|
|
[
|
|
this.hash.substring(1),
|
|
]);
|
|
} else {
|
|
return await tfrpc.rpc.query(
|
|
`
|
|
WITH news AS (SELECT messages.*
|
|
FROM messages
|
|
JOIN json_each(?) AS following ON messages.author = following.value
|
|
WHERE messages.timestamp > ?
|
|
ORDER BY messages.timestamp DESC)
|
|
SELECT messages.*
|
|
FROM news
|
|
JOIN messages_refs ON news.id = messages_refs.ref
|
|
JOIN messages ON messages_refs.message = messages.id
|
|
UNION
|
|
SELECT * FROM news
|
|
`,
|
|
[
|
|
JSON.stringify(this.following),
|
|
new Date().valueOf() - 24 * 60 * 60 * 1000,
|
|
]);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (!this.messages ||
|
|
this._messages_hash !== this.hash ||
|
|
this._messages_following !== this.following) {
|
|
console.log('loading messages');
|
|
let self = this;
|
|
this.messages = [];
|
|
this._messages_hash = this.hash;
|
|
this._messages_following = this.following;
|
|
this.fetch_messages().then(function(messages) {
|
|
self.messages = messages;
|
|
}).catch(function(error) {
|
|
alert(JSON.stringify(error, null, 2));
|
|
});
|
|
}
|
|
return html`<tf-news id="news" whoami=${this.whoami} .users=${this.users} .messages=${this.messages} .following=${this.following}></tf-news>`;
|
|
}
|
|
}
|
|
|
|
class TfTabNewsElement extends LitElement {
|
|
static get properties() {
|
|
return {
|
|
whoami: {type: String},
|
|
users: {type: Object},
|
|
hash: {type: String},
|
|
unread: {type: Array},
|
|
following: {type: Array},
|
|
}
|
|
}
|
|
|
|
static styles = styles;
|
|
|
|
constructor() {
|
|
super();
|
|
let self = this;
|
|
this.whoami = null;
|
|
this.users = {};
|
|
this.hash = '#';
|
|
this.unread = [];
|
|
this.following = [];
|
|
this.cache = {};
|
|
}
|
|
|
|
show_more() {
|
|
let unread = this.unread;
|
|
let news = this.renderRoot?.getElementById('news');
|
|
if (news) {
|
|
console.log('injecting messages', news.messages);
|
|
news.messages = [...this.unread, ...news.messages];
|
|
this.dispatchEvent(new CustomEvent('refresh'));
|
|
}
|
|
}
|
|
|
|
new_messages_text() {
|
|
if (!this.unread?.length) {
|
|
return 'No new messages.';
|
|
}
|
|
let counts = {};
|
|
for (let message of this.unread) {
|
|
let type = 'private';
|
|
try {
|
|
type = JSON.parse(message.content).type || type;
|
|
} catch {
|
|
}
|
|
counts[type] = (counts[type] || 0) + 1;
|
|
}
|
|
return 'Show New: ' + Object.keys(counts).sort().map(x => (counts[x].toString() + ' ' + x + 's')).join(', ');
|
|
}
|
|
|
|
render() {
|
|
let profile = this.hash.startsWith('#@') ?
|
|
html`<tf-profile id=${this.hash.substring(1)} whoami=${this.whoami} .users=${this.users}></tf-profile>` : undefined;
|
|
return html`
|
|
<div><input type="button" value=${this.new_messages_text()} @click=${this.show_more}></input></div>
|
|
<a target="_top" href="#" ?hidden=${this.hash.length <= 1}>🏠Home</a>
|
|
<div>Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!</div>
|
|
<div><tf-compose whoami=${this.whoami} .users=${this.users}></tf-compose></div>
|
|
${profile}
|
|
<tf-tab-news-feed id="news" whoami=${this.whoami} .users=${this.users} .following=${this.following} hash=${this.hash}></tf-tab-news-feed>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('tf-tab-news-feed', TfTabNewsFeedElement);
|
|
customElements.define('tf-tab-news', TfTabNewsElement); |