From 7805c730e8ead9cd421f45d4720fd7f4062675e6 Mon Sep 17 00:00:00 2001 From: Tyler Murphy Date: Sun, 29 Jan 2023 00:35:06 -0500 Subject: no mass rerendering html plus logging fix --- public/css/home.css | 4 +-- public/js/header.js | 3 +- public/js/home.js | 88 ++++++++++++++++++++++++++++++++++------------------ public/js/main.js | 31 ++++++++++++------ public/js/people.js | 26 +++++++++++----- public/js/profile.js | 40 +++++++++++++++++------- 6 files changed, 128 insertions(+), 64 deletions(-) (limited to 'public') diff --git a/public/css/home.css b/public/css/home.css index 33d72c0..2686ffd 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -2,7 +2,7 @@ body { background-color: #f0f2f5; } -#posts { +#posts, #create { display: flex; flex-direction: column; align-items: center; @@ -172,7 +172,7 @@ body { flex-direction: row; } -#comments input { +.comments input { all: unset; padding: 10px; border-radius: 10px; diff --git a/public/js/header.js b/public/js/header.js index 8fe03e5..5a12408 100644 --- a/public/js/header.js +++ b/public/js/header.js @@ -20,6 +20,5 @@ function header(home, people) {
` - - add(html, 'header') + append(html) } \ No newline at end of file diff --git a/public/js/home.js b/public/js/home.js index 688cbf5..ee3d6f0 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -41,19 +41,19 @@ function parsePost(post) {
- - - Like + + + Like Comment
-
+
- ${post.comments.map(parseComment).join('')} -
+ ${post.comments.map(parseComment).join('')} +
@@ -64,7 +64,6 @@ function parsePost(post) {
` - return html } @@ -78,7 +77,8 @@ function getPost(post_id) { } async function like(span) { - const id = parseInt(span.parentElement.parentElement.getAttribute('postid')) + const container = span.parentElement.parentElement; + const id = parseInt(container.getAttribute('postid')) const post = data.posts[getPost(id)] const index = post.likes.indexOf(data.user.user_id) const current = index !== -1 @@ -89,26 +89,40 @@ async function like(span) { } else { post.likes.push(data.user.user_id) } - render() + const buttons = container + .getElementsByClassName("postbuttons")[0] + .getElementsByClassName("likeclicky")[0] + .getElementsByClassName("liketoggle") + if (current) { + buttons[0].classList.remove("blue") + buttons[1].classList.remove("blue") + } else { + buttons[0].classList.add("blue") + buttons[1].classList.add("blue") + } } async function comment(event) { event.preventDefault(); const text = event.target.elements.text.value.trim(); if (text.length < 1) return; - const id = parseInt(event.target.parentElement.parentElement.parentElement.getAttribute('postid')) - var index = getPost(id); + const container = event.target.parentElement.parentElement.parentElement; + const post_id = parseInt(container.getAttribute('postid')) + var index = getPost(post_id); if (index === -1) return; - const response = await postcomment(id, text) + const response = await postcomment(post_id, text) if (response.status != 200) return; event.target.elements.text.value = ''; - data.posts[index].comments.push([data.user.user_id, text]) - render() + let new_comment = [data.user.user_id, text] + data.posts[index].comments.push(new_comment) + let comments = container.getElementsByClassName("comments")[0] + prepend(parseComment(new_comment), comments, comments.getElementsByClassName("commentsubmit")[0]) } async function post() { const text = document.getElementById("text").value.trim() const error = document.getElementsByClassName('error')[0] + const posts_block = document.getElementById("posts") if (text.length < 1) return; const response = await createpost(text); if (response.status != 201) { @@ -116,20 +130,32 @@ async function post() { return; } error.innerHTML = ''; - data.posts.unshift({ + let post = { post_id: response.json.post_id, user_id: data.user.user_id, date: Date.now(), content: text, likes: [], comments: [] - }) - render() + } + data.posts.unshift(post) + let html = parsePost(post) + prepend(html, posts_block) + document.getElementById('popup').classList.add('hidden') +} + +async function loadMore() { + const posts = await load() + data.posts.push(... posts) + const posts_block = document.getElementById("posts") + for (p of posts) { + append(parsePost(p), posts_block) + } } function render() { const html = ` -
+ +
${data.posts.map(p => parsePost(p)).join('')}
` - add(html, 'posts') + append(html) const popup = ` ` - add(popup, 'popup') + append(popup) const load = ` ` - if (page !== -1) { - add(load, 'load') - } else { - remove('load') - } + append(load) } var page = 0 @@ -194,10 +218,11 @@ async function load() { const posts = (await loadpostspage(page)).json if (posts.length === 0) { page = -1 + remove('load') + return [] } else { page++ } - data.posts.push(... posts) const batch = [] for (const post of posts) { for(const comment of post.comments) { @@ -209,17 +234,18 @@ async function load() { if (batch.includes(post.user_id)) continue batch.push(post.user_id) } - const users = (await loadusers(batch)).json + const users = batch.length == 0 ? [] : (await loadusers(batch)).json for (const user of users) { data.users[user.user_id] = user } - render() + return posts } - async function init() { header(true, false) data.user = (await loadself()).json data.users[data.user.user_id] = data.user - load() + const posts = await load() + data.posts.push(... posts) + render() } \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js index 06736ee..12f53ec 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,15 +1,26 @@ -var range; - -function add(html, id) { - const old = document.getElementById(id) - if (old !== null) { - old.remove() +function prepend(html, container, before) { + if (container === undefined) { + container = document.body } - if (range === undefined) { - var range = document.createRange() - range.setStart(document.body, 0) + if (before === undefined) { + before = container.firstChild + } + console.log(html, container, before) + var range = document.createRange() + range.setStart(container, 0); + container.insertBefore( + range.createContextualFragment(html), + before + ) +} + +function append(html, container) { + if (container === undefined) { + container = document.body } - document.body.appendChild( + var range = document.createRange() + range.setStart(container, 0); + container.appendChild( range.createContextualFragment(html) ) } diff --git a/public/js/people.js b/public/js/people.js index e9f5db6..5c1026b 100644 --- a/public/js/people.js +++ b/public/js/people.js @@ -23,19 +23,15 @@ function render() {
` - add(html, 'users') + append(html) const load = ` ` - if (page !== -1) { - add(load, 'load') - } else { - remove('load') - } + append(load) } var page = 0 @@ -43,16 +39,30 @@ var data = { users: [] } +async function loadMore() { + let users = await load() + const users_block = document.getElementById("users") + for (user of users) { + append(parseUser(user), users_block) + } +} + async function load() { const users = (await loaduserspage(page)).json if (users.length === 0) { page = -1 + remove('load') } else { page++ } + return users +} + +async function init() { + let users = await load() data.users.push(... users) render() } header(false, true) -load() \ No newline at end of file +init() \ No newline at end of file diff --git a/public/js/profile.js b/public/js/profile.js index 1f72b17..787e2b2 100644 --- a/public/js/profile.js +++ b/public/js/profile.js @@ -1,3 +1,21 @@ +function swap(value) { + let postsb = document.getElementById("profilepostbutton"); + let aboutb = document.getElementById("profileaboutbutton"); + let posts = document.getElementById("posts"); + let about = document.getElementById("about"); + if (value) { + postsb.classList.add("selected") + aboutb.classList.remove("selected") + about.classList.add("hidden") + posts.classList.remove("hidden") + } else { + postsb.classList.remove("selected") + aboutb.classList.add("selected") + about.classList.remove("hidden") + posts.classList.add("hidden") + } +} + function render() { const html = `
@@ -17,10 +35,10 @@ function render() {
- -
@@ -29,7 +47,7 @@ function render() {
` - add(html, 'top') + append(html) const postsh = `
@@ -37,7 +55,7 @@ function render() {
` - add(postsh, 'posts') + append(postsh) const about = `
@@ -52,7 +70,7 @@ function render() {
` - add(about, 'about') + append(about) } async function logout_button() { @@ -72,21 +90,22 @@ async function load() { params[key] = value } - let self = (await loadself()).json; + data.user = (await loadself()).json; + data.users[data.user.user_id] = data.user let id; if (params.id !== undefined && !isNaN(params.id)) { id = parseInt(params.id); } else { - id = self.user_id + id = data.user.user_id } - isself = id === self.user_id + isself = id === data.user.user_id const posts = (await loadusersposts(id)).json data.posts.push(... posts) - const batch = [id] + const batch = [] for (const post of posts) { for(const comment of post.comments) { if (data.users[comment[0]] !== undefined) continue @@ -97,11 +116,10 @@ async function load() { if (batch.includes(post.user_id)) continue batch.push(post.user_id) } - const users = (await loadusers(batch)).json + const users = batch.length == 0 ? [] : (await loadusers(batch)).json for (const user of users) { data.users[user.user_id] = user } - data.user = data.users[id] render() } -- cgit v1.2.3-freya