tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

Experimenting with storing drafts. Fixed an old scary tfrpc bug which resulted in localStorageGet returning wrong values on subsequent calls.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4138 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-01-21 00:16:18 +00:00
parent 77df158178
commit dab7050899
8 changed files with 84 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/cory/ssb.json
View File

@ -1 +1 @@
{"type":"tildefriends-app","files":{"app.js":"&1HWTkyCc1doft6dyKF5FDxtRAErNeY25CBrfZbKPpyo=.sha256","lit-all.min.js":"&XKgdRySJuiZeZvchNFGjVWn0XOVhQFmG7/HTWYQ8s68=.sha256","index.html":"&TxhFekB9ov7tf/fmkAg7x5797i27oLidhgxEfDKC0T0=.sha256","script.js":"&G8puK9Q4MngHy3D4ppcKyT49WKbHD2OCeUcAw2ghTDE=.sha256","lit-all.min.js.map":"&lA9iFp1YbqSndxXZuwtgmrj7NDMkN71nJITbtjWL3VA=.sha256","tf-id-picker.js":"&maN8DUFrmRxW5nsVyOAMk5k1ekcz/pfzvSS99ac3jo8=.sha256","tf-app.js":"&7hclNu41CIoNk1JlXHiYmDPDyDIICZfMickJYtnF5eQ=.sha256","tf-message.js":"&oXFucwmn16nvKslQoGKTppO+71EoDZJE54z3WrlNUPI=.sha256","tf-user.js":"&bXTedgBudTQLXEBPY9R8OLfQ/ZLpo8YRU9Oq/wuGG3Y=.sha256","tf-utils.js":"&6RQUuxB3PkOhYEJr9+89Ptx7uijczjn0r035yCcQOQQ=.sha256","commonmark.min.js":"&bfBaMLU19d1p/vPBF9hlARqDX002KXG/UOfxOahZhe4=.sha256","tf-compose.js":"&ZFkTrACfSE3CeacnuHcpqysPuNm2TJ2ATVQfJv+qjzU=.sha256","emojis.json":"&h3P4pez+AI4aYdsN0dJ3pbUEFR0276t9AM20caj/W/s=.sha256","emojis.js":"&NC9VddNdX+ZpyIDUQJvH2y1u3ZczQub5+bNmN9ndj7I=.sha256","tf-styles.js":"&LFeL/vWgrv4N8q/mBrQAnhbaOI+dXNJYvH9bn1bXSqQ=.sha256","tf-profile.js":"&vRKjsnYvOiHCQahzEfznCvP5YDwUPtltlpWf+pxwZ1Y=.sha256","commonmark-linkify.js":"&X+hNNkmSRvKY86khyAun+cXksquXbMakZdINbGbx30g=.sha256","tf-tab-search.js":"&ESt2vMG19sH5j6ungKua/ZuvIGslyuWyb3juXdOCecg=.sha256","tf-tab-news.js":"&F7T3LVS867x7vsKhYRR7eLNdCFZmrZ3JzEMfJEEKRm0=.sha256","tf-tab-connections.js":"&ywqBz3w63R6naH09kZ+01A0SfmtuSfk8QPBXWsli0yg=.sha256","tf-news.js":"&gfG5LwXpugDkwDCOCOxQnNn0jLURZexSmvDu4SpQohA=.sha256","tribute.css":"&9FogMzZHKXCfGb7mlh7z+/wiNZzBsOB/tKoh6MfYJno=.sha256","tribute.esm.js":"&P1wKqCfYULpR/ahSB98JP8xaxfikuZwwtT6I/SAo7/Y=.sha256","commonmark-hashtag.js":"&H+V1OLA9GDdzycKclz276zAtSZLpT3rlNVa4+qQmp4o=.sha256"}}
{"type":"tildefriends-app","files":{"app.js":"&1HWTkyCc1doft6dyKF5FDxtRAErNeY25CBrfZbKPpyo=.sha256","lit-all.min.js":"&XKgdRySJuiZeZvchNFGjVWn0XOVhQFmG7/HTWYQ8s68=.sha256","index.html":"&TxhFekB9ov7tf/fmkAg7x5797i27oLidhgxEfDKC0T0=.sha256","script.js":"&G8puK9Q4MngHy3D4ppcKyT49WKbHD2OCeUcAw2ghTDE=.sha256","lit-all.min.js.map":"&lA9iFp1YbqSndxXZuwtgmrj7NDMkN71nJITbtjWL3VA=.sha256","tf-id-picker.js":"&maN8DUFrmRxW5nsVyOAMk5k1ekcz/pfzvSS99ac3jo8=.sha256","tf-app.js":"&7hclNu41CIoNk1JlXHiYmDPDyDIICZfMickJYtnF5eQ=.sha256","tf-message.js":"&mEvBE2g6disBMLyaqu11wwGFGuBU2VmRJuwMBqORvfA=.sha256","tf-user.js":"&bXTedgBudTQLXEBPY9R8OLfQ/ZLpo8YRU9Oq/wuGG3Y=.sha256","tf-utils.js":"&6RQUuxB3PkOhYEJr9+89Ptx7uijczjn0r035yCcQOQQ=.sha256","commonmark.min.js":"&bfBaMLU19d1p/vPBF9hlARqDX002KXG/UOfxOahZhe4=.sha256","tf-compose.js":"&fTO3L8YlYTZ15ph7Sh54TY8YmAidkGjZa9rmT1YtVt4=.sha256","emojis.json":"&h3P4pez+AI4aYdsN0dJ3pbUEFR0276t9AM20caj/W/s=.sha256","emojis.js":"&NC9VddNdX+ZpyIDUQJvH2y1u3ZczQub5+bNmN9ndj7I=.sha256","tf-styles.js":"&LFeL/vWgrv4N8q/mBrQAnhbaOI+dXNJYvH9bn1bXSqQ=.sha256","tf-profile.js":"&vRKjsnYvOiHCQahzEfznCvP5YDwUPtltlpWf+pxwZ1Y=.sha256","commonmark-linkify.js":"&X+hNNkmSRvKY86khyAun+cXksquXbMakZdINbGbx30g=.sha256","tf-tab-search.js":"&ESt2vMG19sH5j6ungKua/ZuvIGslyuWyb3juXdOCecg=.sha256","tf-tab-news.js":"&+hexNqLjYcjPnpDsU962Hy4wWh++pNWVZHO4gI3f1C8=.sha256","tf-tab-connections.js":"&ywqBz3w63R6naH09kZ+01A0SfmtuSfk8QPBXWsli0yg=.sha256","tf-news.js":"&jPigwc9k+I5nMjsaw14Kdt89I/s6m9LVcKG/udR+LGw=.sha256","tribute.css":"&9FogMzZHKXCfGb7mlh7z+/wiNZzBsOB/tKoh6MfYJno=.sha256","tribute.esm.js":"&P1wKqCfYULpR/ahSB98JP8xaxfikuZwwtT6I/SAo7/Y=.sha256","commonmark-hashtag.js":"&H+V1OLA9GDdzycKclz276zAtSZLpT3rlNVa4+qQmp4o=.sha256"}}

26
apps/cory/ssb/tf-compose.js
View File

@ -1,4 +1,4 @@
import {LitElement, html} from './lit-all.min.js';
import {LitElement, html, unsafeHTML} from './lit-all.min.js';
import * as tfutils from './tf-utils.js';
import * as tfrpc from '/static/tfrpc.js';
import {styles} from './tf-styles.js';
@ -13,6 +13,7 @@ class TfComposeElement extends LitElement {
branch: {type: String},
mentions: {type: Object},
apps: {type: Object},
drafts: {type: Object},
}
}
@ -25,13 +26,13 @@ class TfComposeElement extends LitElement {
this.branch = undefined;
this.mentions = {};
this.apps = undefined;
this.drafts = {};
}
changed(event) {
let edit = this.renderRoot.getElementById('edit');
let preview = this.renderRoot.getElementById('preview');
let text = edit.value;
process_text(text) {
if (!text) {
return '';
}
/* Update mentions. */
for (let match of text.matchAll(/\[([^\[]+)]\(([@&%][^\)]+)/g)) {
let name = match[1];
@ -57,8 +58,14 @@ class TfComposeElement extends LitElement {
this.mentions[link].name = name.startsWith('@') ? name.substring(1) : name;
this.mentions = Object.assign({}, this.mentions);
}
return tfutils.markdown(text);
}
preview.innerHTML = tfutils.markdown(text);
changed(event) {
let edit = this.renderRoot.getElementById('edit');
let preview = this.renderRoot.getElementById('preview');
preview.innerHTML = this.process_text(edit.value);
this.dispatchEvent(new CustomEvent('tf-draft', {detail: {id: this.branch, draft: edit.value, bubbles: true}}));
}
convert_to_format(buffer, type, mime_type) {
@ -157,6 +164,7 @@ class TfComposeElement extends LitElement {
edit.value = '';
self.mentions = {};
self.changed();
this.dispatchEvent(new CustomEvent('tf-draft', {detail: {id: this.branch, discard: undefined}}));
}).catch(function(error) {
alert(error.message);
});
@ -166,7 +174,7 @@ class TfComposeElement extends LitElement {
let edit = this.renderRoot.getElementById('edit');
edit.value = '';
this.changed();
this.dispatchEvent(new CustomEvent('tf-discard'));
this.dispatchEvent(new CustomEvent('tf-draft', {bubble: true, composed: true, detail: {id: this.branch, discard: undefined}}));
}
attach() {
@ -258,7 +266,7 @@ class TfComposeElement extends LitElement {
let self = this;
let result = html`
<div style="display: flex; flex-direction: row; width: 100%">
<textarea id="edit" @input=${this.changed} @paste=${this.paste} style="flex: 1 0 50%"></textarea>
<textarea id="edit" @input=${this.changed} @paste=${this.paste} style="flex: 1 0 50%">${this.drafts[this.id || '']}</textarea>
<div id="preview" style="flex: 1 0 50%"></div>
</div>
${Object.values(this.mentions).map(x => self.render_mention(x))}

21
apps/cory/ssb/tf-message.js
View File

@ -10,7 +10,7 @@ class TfMessageElement extends LitElement {
whoami: {type: String},
message: {type: Object},
users: {type: Object},
reply: {type: Boolean},
drafts: {type: Object},
raw: {type: Boolean},
collapsed: {type: Boolean},
content_warning_expanded: {type: Boolean},
@ -27,13 +27,19 @@ class TfMessageElement extends LitElement {
this.whoami = null;
this.message = {};
this.users = {};
this.reply = false;
this.drafts = {};
this.raw = false;
this.collapsed = false;
}
show_reply() {
this.reply = true;
let event = new CustomEvent('tf-draft', {bubbles: true, composed: true, detail: {id: this.message?.id, draft: ''}});
this.dispatchEvent(event);
}
discard_reply() {
console.log('discard');
this.dispatchEvent(new CustomEvent('tf-draft', {bubbles: true, composed: true, detail: {id: this.id, draft: undefined}}));
}
render_votes() {
@ -186,7 +192,7 @@ class TfMessageElement extends LitElement {
if (this.collapsed) {
return html`<input type="button" value=${this.message.child_messages?.length + ' More'} @click=${() => self.collapsed = false}></input>`;
} else {
return html`<input type="button" value="Collapse" @click=${() => self.collapsed = true}></input>${(this.message.child_messages || []).map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users}></tf-message>`)}`;
return html`<input type="button" value="Collapse" @click=${() => self.collapsed = true}></input>${(this.message.child_messages || []).map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts}></tf-message>`)}`;
}
}
}
@ -214,7 +220,7 @@ class TfMessageElement extends LitElement {
<a target="_top" href=${'#' + this.message.id}>${this.message.id}</a> (placeholder)
<div>${this.render_votes()}</div>
${(this.message.child_messages || []).map(x => html`
<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} collapsed=true></tf-message>
<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} collapsed=true></tf-message>
`)}
</div>`;
} else if (typeof(content?.type === 'string')) {
@ -258,14 +264,13 @@ class TfMessageElement extends LitElement {
</div>
`);
} else if (content.type == 'post') {
let reply = this.reply ? html`
let reply = (this.drafts[this.message?.id] !== undefined) ? html`
<tf-compose
?enabled=${this.reply}
whoami=${this.whoami}
.users=${this.users}
root=${this.message.content.root || this.message.id}
branch=${this.message.id}
@tf-discard=${() => this.reply = false}></tf-compose>
@tf-discard=${this.discard_reply}></tf-compose>
` : html`
<input type="button" value="Reply" @click=${this.show_reply}></input>
`;

4
apps/cory/ssb/tf-news.js
View File

@ -9,6 +9,7 @@ class TfNewsElement extends LitElement {
users: {type: Object},
messages: {type: Array},
following: {type: Array},
drafts: {type: Object},
}
}
@ -21,6 +22,7 @@ class TfNewsElement extends LitElement {
this.users = {};
this.messages = [];
this.following = [];
this.drafts = {};
}
process_messages(messages) {
@ -145,7 +147,7 @@ class TfNewsElement extends LitElement {
let final_messages = this.finalize_messages(messages_by_id);
return html`
<div style="display: flex; flex-direction: column">
${final_messages.map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} collapsed=true></tf-message>`)}
${final_messages.map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} collapsed=true></tf-message>`)}
</div>
`;
}

26
apps/cory/ssb/tf-tab-news.js
View File

@ -10,6 +10,7 @@ class TfTabNewsFeedElement extends LitElement {
hash: {type: String},
following: {type: Array},
messages: {type: Array},
drafts: {type: Object},
}
}
@ -22,6 +23,7 @@ class TfTabNewsFeedElement extends LitElement {
this.users = {};
this.hash = '#';
this.following = [];
this.drafts = {};
}
async fetch_messages() {
@ -102,7 +104,7 @@ class TfTabNewsFeedElement extends LitElement {
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>`;
return html`<tf-news id="news" whoami=${this.whoami} .users=${this.users} .messages=${this.messages} .following=${this.following} .drafts=${this.drafts}></tf-news>`;
}
}
@ -114,6 +116,7 @@ class TfTabNewsElement extends LitElement {
hash: {type: String},
unread: {type: Array},
following: {type: Array},
drafts: {type: Object},
}
}
@ -128,6 +131,10 @@ class TfTabNewsElement extends LitElement {
this.unread = [];
this.following = [];
this.cache = {};
this.drafts = {};
tfrpc.rpc.localStorageGet('drafts').then(function(d) {
self.drafts = JSON.parse(d || '{}');
});
}
show_more() {
@ -156,6 +163,19 @@ class TfTabNewsElement extends LitElement {
return 'Show New: ' + Object.keys(counts).sort().map(x => (counts[x].toString() + ' ' + x + 's')).join(', ');
}
draft(event) {
let id = event.detail.id || '';
if (event.detail.draft !== undefined) {
let draft = {};
draft[id] = event.detail.draft;
this.drafts = Object.assign({}, this.drafts, draft);
} else {
delete this.drafts[id];
this.drafts = Object.assign({}, this.drafts);
}
tfrpc.rpc.localStorageSet('drafts', JSON.stringify(this.drafts));
}
render() {
let profile = this.hash.startsWith('#@') ?
html`<tf-profile id=${this.hash.substring(1)} whoami=${this.whoami} .users=${this.users}></tf-profile>` : undefined;
@ -163,9 +183,9 @@ class TfTabNewsElement extends LitElement {
<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>
<div><tf-compose whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} @tf-draft=${this.draft}></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>
<tf-tab-news-feed id="news" whoami=${this.whoami} .users=${this.users} .following=${this.following} hash=${this.hash} .drafts=${this.drafts} @tf-draft=${this.draft}></tf-tab-news-feed>
`;
}
}

14
core/app.js
View File

@ -22,14 +22,14 @@ App.prototype.readOutput = function(callback) {
App.prototype.makeFunction = function(api) {
let self = this;
let id = g_next_id++;
while (!id || g_calls[id]) {
id = g_next_id++;
}
let promise = new Promise(function(resolve, reject) {
g_calls[id] = {resolve: resolve, reject: reject};
});
let result = function() {
let id = g_next_id++;
while (!id || g_calls[id]) {
id = g_next_id++;
}
let promise = new Promise(function(resolve, reject) {
g_calls[id] = {resolve: resolve, reject: reject};
});
let message = {
message: 'tfrpc',
method: api[0],

10
core/client.js
View File

@ -387,7 +387,7 @@ function api_localStorageSet(key, value) {
window.localStorage.setItem('app:' + key, value);
}
function api_localStorageGet(key, value) {
function api_localStorageGet(key) {
return window.localStorage.getItem('app:' + key);
}
@ -620,17 +620,19 @@ function _receive_websocket_message(message) {
message.message === 'tfrpc' &&
message.method) {
let api = k_api[message.method];
let id = message.id;
let params = message.params;
if (api) {
Promise.resolve(api.func(...message.params)).then(function(result) {
Promise.resolve(api.func(...params)).then(function(result) {
send({
message: 'tfrpc',
id: message.id,
id: id,
result: result,
});
}).catch(function(error) {
send({
message: 'tfrpc',
id: message.id,
id: id,
error: error,
});
});

31
core/tfrpc.js
View File

@ -14,7 +14,7 @@ if (k_is_browser) {
function make_rpc(target, prop, receiver) {
return function() {
let id = g_next_id++;
while (!id || g_calls[id]) {
while (!id || g_calls[id] !== undefined) {
id = g_next_id++;
}
let promise = new Promise(function(resolve, reject) {
@ -39,38 +39,35 @@ function send(response) {
function call_rpc(message) {
if (message && message.message === 'tfrpc') {
let method = g_api[message.method];
let id = message.id;
if (message.method) {
let method = g_api[message.method];
if (method) {
let response = {message: 'tfrpc', id: message.id};
try {
Promise.resolve(method(...message.params)).then(function(result) {
response.result = result;
send(response);
send({message: 'tfrpc', id: id, result: result});
}).catch(function(error) {
response.error = error;
send(response);
send({message: 'tfrpc', id: id, error: error});
});
} catch (error) {
response.error = error;
send(response);
send({message: 'tfrpc', id: id, error: error});
}
} else {
throw new Error(message.method + ' not found.');
}
} else if (message.error !== undefined) {
if (g_calls[message.id]) {
g_calls[message.id].reject(message.error);
delete g_calls[message.id];
if (g_calls[id]) {
g_calls[id].reject(message.error);
delete g_calls[id];
} else {
throw new Error(message.id + ' not found to reply.');
throw new Error(id + ' not found to reply.');
}
} else {
if (g_calls[message.id]) {
g_calls[message.id].resolve(message.result);
delete g_calls[message.id];
if (g_calls[id]) {
g_calls[id].resolve(message.result);
delete g_calls[id];
} else {
throw new Error(message.id + ' not found to reply.');
throw new Error(id + ' not found to reply.');
}
}
}