Progress toward viewing user profile pages.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3737 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/cory/index.json

@@ -1 +1 @@
-{"type":"tildefriends-app","files":{"app.js":"&og7bNeqxTfUqVTdtPsrJTjirJxyE3xDQYp0Pj7KmL2U=.sha256","index.html":"&dyJyLJJqx+qcGXY9CYLY6Jxj/T/ZK+Z8ARa8MhLVhJI=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&EuejzX/iNHsGkscTHJHeJ8YXukGb31KE8YGUMonXJB0=.sha256","tf-message.js":"&oQggZN26PtRi4Ce9HY8TKVJ9jRrYWLRE5tN+3yHwEJE=.sha256","tf.js":"&27+G0/I9PyIu7zl2yk8jesy6uEI1ZJlax0u5enVDdUw=.sha256","commonmark.min.js":"&5x6ek3tFrKTZX6hXNNyFsjmhvrjmWpUkwuuaiyVV1Us=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256"}}
+{"type":"tildefriends-app","files":{"app.js":"&l8lBRLBokCaXK/v4sF5qMgQHGqizkMjY8ady4FYaD0U=.sha256","index.html":"&ayK1muTik0h4UYNvT0QNm0WrygVrL8kxBoEyrQkHyHs=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&fXhPpneuYuseoaYk25ODN3QecFAeOfuMOZd98OgvjsQ=.sha256","tf-message.js":"&oQggZN26PtRi4Ce9HY8TKVJ9jRrYWLRE5tN+3yHwEJE=.sha256","tf.js":"&EgrrFfINhqFL/Kj8qkJwH/DHTLrZ8CxhHDBxZjcyjUY=.sha256","commonmark.min.js":"&5x6ek3tFrKTZX6hXNNyFsjmhvrjmWpUkwuuaiyVV1Us=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256"}}

apps/cory/index/app.js

@@ -3,6 +3,8 @@
 const k_posts_max = 20;
 const k_votes_max = 20;
 
+var g_selected = null;
+
 var g_following_cache = {};
 var g_followers_cache = {};
 var g_following_deep_cache = {};
@@ -171,6 +173,13 @@ async function getRecentPostIds(db, id, ids, limit) {
 	}
 	f.rowid = row_id_max;
 	f.recent = [].concat(recent, f.recent);
+	var have = {};
+	f.recent = f.recent.filter(function(x) {
+		if (!have[x.id]) {
+			have[x.id] = true;
+			return true;
+		}
+	});
 	f.recent.sort((x, y) => y.timestamp - x.timestamp);
 	f.recent = f.recent.slice(0, limit);
 	var j = JSON.stringify(f);
@@ -231,7 +240,7 @@ async function getPosts(db, ids) {
 }
 
 async function ready() {
-	return refresh();
+	return refresh(g_selected);
 }
 
 ssb.addEventListener('broadcasts', async function() {
@@ -243,51 +252,55 @@ core.register('onConnectionsChanged', async function() {
 	await app.postMessage({connections: connections});
 });
 
-async function refresh() {
+async function refresh(selected) {
 	g_following_cache = {};
 	g_followers_cache = {};
 	g_following_deep_cache = {};
 	await app.postMessage({clear: true});
 	var whoami = await ssb.whoami();
 	var db = await database("ssb");
+	var all_followed = await followingDeep(db, [whoami], 2);
+	if (selected) {
+		g_selected = selected;
+	} else {
+		g_selected = all_followed;
+	}
 	await Promise.all([
 		app.postMessage({whoami: whoami}),
-		app.postMessage({broadcasts: await ssb.getBroadcasts()}),
-		app.postMessage({connections: await ssb.connections()}),
-		app.postMessage({apps: await core.apps()}),
-		followingDeep(db, [whoami], 2).then(function(f) {
-			return getRecentPostIds(db, whoami, [].concat([whoami], f), k_posts_max).then(async function(ids) {
-				var posts = await getPosts(db, ids);
-				var roots = posts.map(function(x) {
-					try {
-						return JSON.parse(x.content).root;
-					} catch {
-						return null;
-					}
-				});
-				roots = roots.filter(function(root) {
-					return root && posts.every(post => post.id != root);
-				});
-				var all_posts = [].concat(posts, await getPosts(db, roots));
-				await Promise.all(all_posts.map(x => app.postMessage({message: x})));
-				return Promise.all([].concat(f.map(function(id) {
-					return [
-						getVotes(db, id).then(function(votes) {
-							return app.postMessage({votes: votes});
-						}),
-						getAbout(db, id).then(function(user) {
-							return app.postMessage({user: {user: id, about: user}});
-						}),
-						following(db, id).then(function(following) {
-							return app.postMessage({following: {id: id, users: following}});
-						}),
-						followers(db, id).then(function(followers) {
-							return app.postMessage({followers: {id: id, users: followers}});
-						}),
-					];
-				})));
+		ssb.getBroadcasts().then(broadcasts => app.postMessage({broadcasts: broadcasts})),
+		ssb.connections().then(connections => app.postMessage({connections: connections})),
+		core.apps().then(apps => app.postMessage({apps: apps})),
+		getRecentPostIds(db, whoami, g_selected, k_posts_max).then(async function(ids) {
+			var posts = await getPosts(db, ids);
+			var roots = posts.map(function(x) {
+				try {
+					return JSON.parse(x.content).root;
+				} catch {
+					return null;
+				}
 			});
+			roots = roots.filter(function(root) {
+				return root && posts.every(post => post.id != root);
+			});
+			var all_posts = [].concat(posts, await getPosts(db, roots));
+			return Promise.all(all_posts.map(x => app.postMessage({message: x})));
 		}),
+		Promise.all([].concat(all_followed.map(function(id) {
+			return [
+				getVotes(db, id).then(function(votes) {
+					return app.postMessage({votes: votes});
+				}),
+				getAbout(db, id).then(function(user) {
+					return app.postMessage({user: {user: id, about: user}});
+				}),
+				following(db, id).then(function(following) {
+					return app.postMessage({following: {id: id, users: following}});
+				}),
+				followers(db, id).then(function(followers) {
+					return app.postMessage({followers: {id: id, users: followers}});
+				}),
+			];
+		}))),
 	]);
 }
 
@@ -304,6 +317,7 @@ ssb.addEventListener('message', async function(id) {
 });
 
 core.register('message', async function(m) {
+	print(JSON.stringify(m));
 	if (m.message == 'ready') {
 		await ready();
 	} else if (m.message) {
@@ -312,7 +326,13 @@ core.register('message', async function(m) {
 		} else if (m.message.appendMessage) {
 			await ssb.appendMessage(m.message.appendMessage);
 		} else if (m.message.refresh) {
-			await refresh();
+			await refresh(g_selected);
+		}
+	} else if (m.event == 'hashChange') {
+		if (m.hash.length > 1) {
+			refresh([m.hash.substring(1)]);
+		} else {
+			refresh();
 		}
 	} else if (m.event == 'focus' || m.event == 'blur') {
 		/* Shh. */

apps/cory/index/index.html

@@ -39,7 +39,7 @@
 						<md-list-item v-for="connection in connections" v-bind:key="'connection-' + JSON.stringify(connection)"><tf-user :id="connection"></tf-user></md-list-item>
 						<md-list-item @click="show_connect_dialog = true">Connect</md-list-item>
 						<md-subheader>Users</md-subheader>
-						<md-list-item v-for="user in Object.keys(users).sort((x, y) => (users[x].name || x).localeCompare(users[y].name || y))" v-bind:key="'user-' + user"><tf-user v-bind:id="user"/></md-list-item>
+						<!-- <md-list-item v-for="user in Object.keys(users).sort((x, y) => (users[x].name || x).localeCompare(users[y].name || y))" v-bind:key="'user-' + user"><tf-user v-bind:id="user"/></md-list-item> -->
 					</md-list>
 				</md-app-drawer>
 				<md-app-toolbar class="md-secondary" v-show="unread > 0">
@@ -74,12 +74,18 @@
 							<md-button class="md-raised md-primary" v-on:click="post_message()">Submit Post</md-button>
 						</md-card-actions>
 					</md-card>
-					<tf-message
-						v-for="message in messages"
-						v-bind:message="message"
-						v-bind:messages="messages"
-						v-bind:key="message.id"
-						v-bind:votes="votes"></tf-message>
+					<template v-if="messages.length">
+						<tf-message
+							v-for="message in messages"
+							v-bind:message="message"
+							v-bind:messages="messages"
+							v-bind:key="message.id"
+							v-bind:votes="votes"></tf-message>
+					</template>
+					<md-empty-state v-else-if="loading" md-label="Loading...">
+						<md-progress-spinner md-mode="indeterminate"></md-progress-spinner>
+					</md-empty-state>
+					<md-empty-state v-else md-label="Nothing to see here."></md-empty-state>
 				</md-app-content>
 			</md-app>
 		</div>

apps/cory/index/tf-user.js

@@ -12,6 +12,7 @@ Vue.component('tf-user', {
 			get: function() {
 				return g_data.users &&
 					g_data.users[g_data.whoami] &&
+					g_data.users[g_data.whoami].following &&
 					g_data.users[g_data.whoami].following[this.id];
 			},
 			set: function(newValue) {
@@ -45,7 +46,7 @@ Vue.component('tf-user', {
 			window.parent.postMessage(message, '*');
 		},
 		show_user: function() {
-			this.show_user_dialog = true;
+			window.parent.postMessage({action: 'setHash', hash: this.id}, '*');
 			if (this.id == this.whoami) {
 				this.edit_profile_name = this.users[this.id].name;
 				this.edit_profile_description = this.users[this.id].description;

apps/cory/index/tf.js

@@ -15,6 +15,7 @@ var g_data = {
 	reply_branch: null,
 	mentions: {},
 	unread: 0,
+	loading: true,
 };
 
 var g_data_initial = JSON.parse(JSON.stringify(g_data));
@@ -94,11 +95,16 @@ function processMessages() {
 				g_data.votes[link][content.vote.expression].push({author: vote.author, value: content.vote.value});
 			});
 		} else if (key == 'clear') {
+			g_data.loading = true;
 			Object.keys(g_data_initial).forEach(function(key) {
 				Vue.set(g_data, key, JSON.parse(JSON.stringify(g_data_initial[key])));
 			});
+		} else if (key == 'ready') {
+			g_data.loading = false;
 		} else if (key == 'unread') {
 			g_data.unread += event.data.unread;
+		} else if (key == 'hash') {
+			console.log(event.data);
 		} else {
 			g_data[key] = event.data[key];
 		}
@@ -114,6 +120,7 @@ window.addEventListener('message', function(event) {
 		setTimeout(processMessages, 250);
 	}
 });
+
 window.addEventListener('load', function() {
 	Vue.use(VueMaterial.default);
 	var vue = new Vue({

core/client.js

@@ -103,7 +103,6 @@ function trace() {
 	request.addEventListener("loadend", function() {
 		if (request.status == 200) {
 			/* The trace is loaded. */
-			console.log(typeof(request.response));
 			var perfetto = window.open('/perfetto/');
 			var done = false;
 			if (perfetto) {
@@ -589,6 +588,8 @@ function message(event) {
 		var iframe = document.getElementById("iframe_" + event.data.name);
 		iframe.setAttribute("width", event.data.width);
 		iframe.setAttribute("height", event.data.height);
+	} else if (event.data && event.data.action == "setHash") {
+		window.location.hash = event.data.hash;
 	} else {
 		send({event: "message", message: event.data});
 	}