Welcome to Dandelion v0.1!
Loading posts for the default feed...
`;
}
// keep a map of posts to dom nodes.
// on re-render
// posts that are not in our list that we need at add
// posts that are in our list that we need to remove
private renderedPosts = new Map();
async render() {
if (this.isHeadless) {
console.log.apply(null, log('Headless so skipping render...'));
return;
}
performance.mark("render-start");
this.timerStart();
let existingPosts = this.posts;
this.posts = [];
switch (this.router.route) {
case App.Route.HOME:
case App.Route.CONNECT: {
this.following = new Set(await this.loadFollowersFromStorage(this.userID) ?? []);
this.posts = await this.getPostsForFeed();
// this.posts = await this.loadPostsFromStorage(this.userID) ?? [];
// let compose = document.getElementById('compose');
// if (!compose) {
// break;
// }
// compose.style.display = "block";
break;
}
case App.Route.USER: {
this.posts = await this.loadPostsFromStorage(this.router.userID) ?? [];
let compose = document.getElementById('compose');
if (!compose) {
break;
}
compose.style.display = "none";
break;
}
case App.Route.POST: {
this.posts = await this.loadPostsFromStorage(this.router.userID, this.router.postID) ?? [];
let compose = document.getElementById('compose');
if (!compose) {
break;
}
compose.style.display = "none";
break;
}
default: {
console.log.apply(null, log("Render: got a route I didn't understand. Rendering HOME:", this.router.route));
this.posts = await this.loadPostsFromStorage(this.userID) ?? [];
break;
}
}
let contentDiv = document.getElementById("content");
if (!contentDiv) {
throw new Error();
}
if (this.posts.length === 0) {
this.renderWelcome(contentDiv as HTMLDivElement);
return;
}
// let existingPostSet = new Set(existingPosts.map(post => post.post_id));
// let incomingPostSet = new Set(this.posts.map(post => post.post_id));
// let addedPosts = [];
// for (let post of this.posts) {
// if (!existingPostSet.has(post.post_id)) {
// addedPosts.push(post);
// }
// }
// let deletedPosts = [];
// for (let post of existingPosts) {
// if (!incomingPostSet.has(post.post_id)) {
// deletedPosts.push(post);
// }
// }
// console.log.apply(null, log("added:", addedPosts, "removed:", deletedPosts);
const fragment = document.createDocumentFragment();
contentDiv.innerHTML = "";
let count = 0;
this.renderedPosts.clear();
let first = true;
for (let i = this.posts.length - 1; i >= 0; i--) {
let postData = this.posts[i];
// this.postsSet.add(postData);
// TODO return promises for all image loads and await those.
let post = this.renderPost(postData.data, first);
first = false;
// this.renderedPosts.set(postData.post_id, post);
if (post) {
fragment.appendChild(post);
count++;
}
if (count > this.limitPosts) {
break;
}
}
if (!contentDiv) {
throw new Error("Couldn't get content div!");
}
contentDiv.appendChild(fragment);
let renderTime = this.timerDelta();
console.log.apply(null, log(`render took: ${renderTime.toFixed(2)}ms`));;
performance.mark("render-end");
performance.measure('render-time', 'render-start', 'render-end');
// if ((performance as any)?.memory) {
// console.log.apply(null, log(`memory used: ${((performance as any).memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}Mb`));
// }
}
async deletePost(userID: string, postID: string) {
deleteData(userID, postID)
this.render();
}
renderComposeReplyArea(replyToID:string) {
let composeReplyArea = document.getElementById('compose-reply-area') as HTMLElement;
composeReplyArea.innerText = replyToID;
composeReplyArea.classList.add("show");
}
renderPost(post: Post, first: boolean) {
if (!(post.hasOwnProperty("text"))) {
throw new Error("Post is malformed!");
}
let containerDiv = document.createElement("div");
let timestamp = `${post.post_timestamp.toLocaleTimeString()} · ${post.post_timestamp.toLocaleDateString()}`;
let deleteButton = document.createElement('button'); deleteButton.innerText = 'delete';
deleteButton.onclick = () => { this.deletePost(post.author_id, post.post_id) };
// let editButton = document.createElement('button'); editButton.innerText = 'edit';
let shareButton = document.createElement('button'); shareButton.innerText = 'share';
shareButton.onclick = async () => {
let shareUrl = `${document.location.origin}/user/${post.author_id}/post/${post.post_id}`;
await navigator.clipboard.writeText(shareUrl)
};
let replyButton = document.createElement('button'); replyButton.innerText = 'reply';
replyButton.onclick = async () => {
console.log(`replying to post ${post.post_id}`);
this.enterCompose(post.post_id);
// let shareUrl = `${document.location.origin}/user/${post.author_id}/post/${post.post_id}`;
// await navigator.clipboard.writeText(shareUrl)
};
let ownPost = post.author_id === this.userID;
let markdown = post.text;
if (this.markedAvailable) {
markdown = marked.parse(post.text);
}
// if (markdown.includes("Loading posts for the default feed...