tildefriends/apps/cory/ssb/tf.js

import * as tfrpc from '/static/tfrpc.js';
import * as tfshared from './tf-shared.js';

export var g_data = {
	whoami: null,
	selected: null,
	identities: [],
	connections: [],
	messages: [],
	messages_by_id: {},
	users: {},
	broadcasts: [],
	show_connect_dialog: false,
	show_user_dialog: null,
	connect: null,
	pubs: [],
	votes: {},
	apps: {},
	reply_root: null,
	reply_branch: null,
	mentions: {},
	unread: 0,
	loading: true,
	edit_profile_name: null,
	edit_profile_description: null,
	edit_profile_image: null,
	post_text: null,
	times: {},
};

var g_load_start = new Date();
var g_data_initial = JSON.parse(JSON.stringify(g_data));

function updateEditUser() {
	g_data.edit_profile_name = g_data.users[g_data.whoami] ? g_data.users[g_data.whoami].name : null;
	g_data.edit_profile_description = g_data.users[g_data.whoami] ? g_data.users[g_data.whoami].description : null;
	g_data.edit_profile_image = g_data.users[g_data.whoami] ? g_data.users[g_data.whoami].image : null;
}

tfrpc.register(function clear() {
	g_load_start = new Date();
	g_data.loading = true;
	Object.keys(g_data_initial).forEach(function(key) {
		if (key != 'identities' && key != 'whoami' && key != 'selected') {
			Vue.set(g_data, key, JSON.parse(JSON.stringify(g_data_initial[key])));
		}
	});
});

tfrpc.register(function set(key, value) {
	g_data[key] = value;
});

tfrpc.register(function set_identities(value) {
	if (JSON.stringify(g_data.identities) != JSON.stringify(value)) {
		g_data.identities = value.map(x => x);
	}
});

tfrpc.register(function push_users(users) {
	for (let [id, user] of Object.entries(users)) {
		Vue.set(g_data.users, id, Object.assign({}, g_data.users[id] || {}, user));
		if (id == g_data.whoami) {
			updateEditUser();
		}
	}
});

tfrpc.register(function push_posts(posts) {
	for (let new_message of posts) {
		new_message.children = [];
		var found = false;
		var root = JSON.parse(new_message.content).root;

		/* If we had inserted a fake root, replace it if we see the real message. */
		if (g_data.messages_by_id[new_message.id]) {
			var old_message = g_data.messages_by_id[new_message.id];
			new_message.children = old_message.children;
			for (let child of new_message.children) {
				child.parent = new_message;
			}
			if (old_message.parent) {
				old_message.parent.children = old_message.parent.children.filter(x => x != old_message);
			} else {
				g_data.messages = g_data.messages.filter(x => x != old_message);
			}
		}

		Vue.set(g_data.messages_by_id, new_message.id, new_message);

		if (root) {
			/* If we don't know of the message's root, add it. */
			if (!g_data.messages_by_id[root]) {
				var fake_root = {
					id: root,
					children: [],
					timestamp: new_message.timestamp,
					content: '{}',
				};
				Vue.set(g_data.messages_by_id, root, fake_root);
				g_data.messages.push(fake_root);
				g_data.messages.sort((x, y) => y.timestamp - x.timestamp);
				found = true;
			}
			var message = g_data.messages_by_id[root];
			new_message.parent = message;
			message.children.push(new_message);
			message.children.sort((x, y) => x.timestamp - y.timestamp);
		} else {
			/* This is just a new message with no root.  Add it. */
			g_data.messages.push(new_message);
			g_data.messages.sort((x, y) => y.timestamp - x.timestamp);
			g_data.messages = g_data.messages.slice(0, 32);
		}
	}
});

tfrpc.register(function push_votes(votes) {
	votes.forEach(function(vote) {
		var content = JSON.parse(vote.content);
		var link = content.vote.link;
		if (!g_data.votes[link]) {
			Vue.set(g_data.votes, link, {});
		}
		if (!g_data.votes[link][content.vote.expression]) {
			Vue.set(g_data.votes[link], content.vote.expression, []);
		}
		g_data.votes[link][content.vote.expression].push({author: vote.author, value: content.vote.value});
	});
});

tfrpc.register(function push_following(following) {
	for (let [id, users] of Object.entries(following)) {
		if (!g_data.users[id]) {
			Vue.set(g_data.users, id, {});
		}
		if (!g_data.users[id].following) {
			Vue.set(g_data.users[id], 'following', {});
		}
		for (let user of users) {
			Vue.set(g_data.users[id].following, user, true);
			if (!g_data.users[user]) {
				Vue.set(g_data.users, user, {});
			}
			if (!g_data.users[user].followers) {
				Vue.set(g_data.users[user], 'followers', {});
			}
			Vue.set(g_data.users[user].followers, id, true);
		}
	}
});

tfrpc.register(function push_blocking(id, blocking) {
	if (!g_data.users[id]) {
		Vue.set(g_data.users, id, {});
	}
	if (!g_data.users[id].blocking) {
		Vue.set(g_data.users[id], 'blocking', {});
	}
	for (let user of blocking) {
		Vue.set(g_data.users[id].blocking, user, true);
	}
});

tfrpc.register(function add_unread(unread) {
	g_data.unread += unread;
});

tfrpc.register(function ready(times) {
	g_data.loading = false;
	g_data.times = times;
});

window.addEventListener('load', function() {
	Vue.use(VueMaterial.default);
	var vue = new Vue({
		el: '#app',
		data: g_data,
		watch: {
			whoami: function(newValue, oldValue) {
				let self = this;
				setTimeout(function() { self.set_hash(); }, 100);
			},
			selected: function(newValue, oldValue) {
				let self = this;
				setTimeout(function() { self.set_hash(); }, 100);
			},
		},
		methods: {
			post_message: function() {
				var message = {
					type: 'post',
					text: document.getElementById('post_text').value,
				};
				if (g_data.reply_root || g_data.reply_branch) {
					message.root = g_data.reply_root;
					message.branch = g_data.reply_branch;
				}
				if (Object.keys(g_data.mentions).length) {
					message.mentions = Object.values(g_data.mentions);
				}
				window.parent.postMessage({appendMessage: message}, '*');
				g_data.post_text = null;
				Vue.set(g_data, 'mentions', {});
				g_data.reply_root = null;
				g_data.reply_branch = null;
			},
			ssb_connect: function(connection) {
				window.parent.postMessage({connect: connection}, '*');
			},
			content_json: function(message) {
				try {
					return JSON.parse(message.content);
				} catch {
					return undefined;
				}
			},
			markdown: tfshared.markdown,
			refresh: function() {
				tfrpc.rpc.refresh(this.whoami, this.selected, true);
			},
			add_app_to_mentions: function(app) {
				Vue.set(g_data.mentions, g_data.apps[app], {
					link: g_data.apps[app],
					name: app,
					type: 'application/tildefriends',
				});
			},
			remove_from_mentions: function(link) {
				Vue.delete(g_data.mentions, link);
			},
			save_profile: function() {
				var message = {
					appendMessage: {
						type: 'about',
						about: g_data.selected,
						name: g_data.edit_profile_name,
						description: g_data.edit_profile_description,
						image: g_data.edit_profile_image,
					}
				};
				window.parent.postMessage(message, '*');
			},
			follow: function(id) {
				if (confirm('Are you sure you want to follow ' + id + '?')) {
					window.parent.postMessage({appendMessage: {type: "contact", following: true, contact: id}}, '*');
				}
			},
			unfollow: function(id) {
				if (confirm('Are you sure you want to unfollow ' + id + '?')) {
					window.parent.postMessage({appendMessage: {type: "contact", following: false, contact: id}}, '*');
				}
			},
			block: function(id) {
				if (confirm('Are you sure you want to block ' + id + '?')) {
					window.parent.postMessage({appendMessage: {type: "contact", blocking: true, contact: id}}, '*');
				}
			},
			unblock: function(id) {
				if (confirm('Are you sure you want to unblock ' + id + '?')) {
					window.parent.postMessage({appendMessage: {type: "contact", blocking: false, contact: id}}, '*');
				}
			},
			set_hash() {
				let hash = this.whoami && this.selected ?
						this.whoami + ':' + this.selected :
						(this.whoami ? this.whoami : '#');
				window.parent.postMessage({
					action: 'setHash',
					hash: hash,
				}, '*');
			},
			attach(context) {
				var input = document.createElement('input');
				input.type = 'file';
				input.onchange = function(event) {
					var file = event.target.files[0];
					file.arrayBuffer().then(function(buffer) {
						let bin = Array.from(new Uint8Array(buffer));
						return tfrpc.rpc.store_blob(bin);
					}).then(function(id) {
						if (context == 'profile') {
							g_data.edit_profile_image = id;
						} else {
							g_data.post_text = `${g_data.post_text || ''}\n![${file.name}](${id})`;
							Vue.set(g_data.mentions, id, {
								link: id,
								name: file.name,
								type: file.type,
							});
						}
					}).catch(function(e) {
						console.log('error', e);
					});
				};
				input.click();
			},
			paste(event) {
				var items = (event.clipboardData || event.originalEvent.clipboardData).items;
				for (let item of items) {
					var file = item.getAsFile();
					if (file) {
						file.arrayBuffer().then(function(buffer) {
							let bin = Array.from(new Uint8Array(buffer));
							return tfrpc.rpc.store_blob(bin);
						}).then(function(id) {
							g_data.post_text = `${g_data.post_text || ''}\n![${file.name}](${id})`;
							Vue.set(g_data.mentions, id, {
								link: id,
								name: file.name,
								type: file.type,
							});
						});
						event.preventDefault();
						break;
					}
				}
			},
			human_size(bytes) {
				if (typeof bytes == 'number') {
					let value = bytes;
					let unit = 'B';
					const k_units = ['kB', 'MB', 'GB', 'TB'];
					for (let u of k_units) {
						if (value > 1024) {
							value /= 1024;
							unit = u;
						}
					}
					return Math.round(value * 10) / 10 + ' ' + unit;
				} else {
					return bytes;
				}
			},
			create_identity() {
				if (confirm("Are you sure you would like to create a new identity?")) {
					tfrpc.rpc.createIdentity().then(function(id) {
						alert(`Identity '${id}' created.`);
					}).catch(function(e) {
						alert('Error creating a new identity: ' + e);
					});
				}
			},
		}
	});
	tfrpc.rpc.ready();
});