David/SocialMediaApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Postdeletelikesandcommentfix

Browse Source
This commit is contained in:
David
2026-01-29 19:51:01 +11:00
parent 65b0ee8e0b
commit 39a7c392fb
2 changed files with 108 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@@ -59,13 +59,8 @@
<header class="feed-header"> <header class="feed-header">
<div class="header-logo">Social</div> <div class="header-logo">Social</div>
<div class="header-actions"> <div class="header-actions">
<button class="icon-btn"> <button class="text-btn" id="logout-btn"
<svg viewBox="0 0 24 24" width="24" height="24"> style="color: var(--text-secondary); font-size: 14px; background: none; border: none; cursor: pointer;">Logout</button>
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
fill="white" />
</svg>
</button>
</div> </div>
</header> </header>

111
script.js
View File

@@ -129,7 +129,7 @@ document.addEventListener('DOMContentLoaded', () => {
} }
checkSession(); checkSession();
const logoutBtn = document.querySelector('.header-actions .icon-btn'); const logoutBtn = document.getElementById('logout-btn');
if (logoutBtn) { if (logoutBtn) {
logoutBtn.addEventListener('click', () => { logoutBtn.addEventListener('click', () => {
if (confirm('Log out?')) { if (confirm('Log out?')) {
@@ -172,6 +172,14 @@ document.addEventListener('DOMContentLoaded', () => {
// Complete Setup Handler // Complete Setup Handler
if (completeSetupBtn) { if (completeSetupBtn) {
completeSetupBtn.addEventListener('click', async () => { completeSetupBtn.addEventListener('click', async () => {
try {
// Safety Check: If pendingUser is lost (e.g. reload), force restart
if (!pendingUser) {
alert('Session expired. Please sign up again.');
window.location.reload();
return;
}
const name = displayNameInput.value.trim(); const name = displayNameInput.value.trim();
if (!name) { alert('Name is required'); return; } if (!name) { alert('Name is required'); return; }
@@ -196,6 +204,10 @@ document.addEventListener('DOMContentLoaded', () => {
feedView.classList.remove('hidden'); feedView.classList.remove('hidden');
feedView.classList.add('fade-in'); feedView.classList.add('fade-in');
initFeed(); initFeed();
} catch (err) {
console.error('Setup Error:', err);
alert('Something went wrong during setup: ' + err.message);
}
}); });
} }
@@ -397,24 +409,38 @@ document.addEventListener('DOMContentLoaded', () => {
if (id && isPostDeleted(id)) { card.remove(); return; } if (id && isPostDeleted(id)) { card.remove(); return; }
if (id && state[id]) { if (id && state[id]) {
const data = state[id]; const data = state[id];
const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
const userEmail = (currentUser.email || '').toLowerCase(); // Fix missing email check
const likeIcon = card.querySelector('.heart-icon'); const likeIcon = card.querySelector('.heart-icon');
const likesText = card.querySelector('.likes'); const likesText = card.querySelector('.likes');
if (likeIcon && likesText) { if (likeIcon && likesText) {
if (data.liked) { // Check if current user is in `likedBy` array
let likedBy = data.likedBy || [];
// Migration: if old `liked` boolean exists, legacy support (or reset)
if (data.liked && likedBy.length === 0) { likedBy = []; }
if (likedBy.includes(userEmail)) {
likeIcon.classList.add('liked'); likeIcon.classList.add('liked');
likeIcon.style.fill = '#EF4444'; likeIcon.style.fill = '#EF4444';
likeIcon.style.stroke = '#EF4444'; likeIcon.style.stroke = '#EF4444';
} }
likesText.innerText = data.likesCount + ' likes'; likesText.innerText = (data.likesCount || likedBy.length) + ' likes';
} }
const commentsContainer = card.querySelector('.added-comments'); const commentsContainer = card.querySelector('.added-comments');
if (commentsContainer) { if (commentsContainer) {
commentsContainer.innerHTML = ''; commentsContainer.innerHTML = '';
if (data.comments) { if (data.comments) {
data.comments.forEach(text => { data.comments.forEach(comment => {
const el = document.createElement('div'); const el = document.createElement('div');
el.classList.add('comment-item'); el.classList.add('comment-item');
el.innerHTML = `<span class="comment-user">you</span> ${text}`; // Handle both legacy strings and new objects
const author = (typeof comment === 'object') ? comment.username : 'someone';
const text = (typeof comment === 'object') ? comment.text : comment;
// Highlight own comments
const displayUser = ((typeof comment === 'object') && comment.email === userEmail) ? 'you' : author;
el.innerHTML = `<span class="comment-user">${displayUser}</span> ${text}`;
commentsContainer.appendChild(el); commentsContainer.appendChild(el);
}); });
} }
@@ -584,7 +610,7 @@ document.addEventListener('DOMContentLoaded', () => {
// --- FEED LISTENERS --- // --- FEED LISTENERS ---
if (feedView) { if (feedView) {
initFeed(); // initFeed(); // REMOVED: Prevent premature rendering. Only render on login/checkSession.
feedView.addEventListener('click', (e) => { feedView.addEventListener('click', (e) => {
const target = e.target; const target = e.target;
const trigger = target.closest('.options-trigger'); const trigger = target.closest('.options-trigger');
@@ -644,27 +670,38 @@ document.addEventListener('DOMContentLoaded', () => {
const postCard = likeBtn.closest('.post-card'); const postCard = likeBtn.closest('.post-card');
const likesText = postCard.querySelector('.likes'); const likesText = postCard.querySelector('.likes');
const postId = postCard.getAttribute('data-post-id'); const postId = postCard.getAttribute('data-post-id');
const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
const userEmail = (currentUser.email || '').toLowerCase();
if (!userEmail) { alert('Please login to like'); return; }
icon.classList.toggle('liked'); icon.classList.toggle('liked');
let count = parseInt(likesText.innerText); let isLiked = icon.classList.contains('liked');
let isLiked = false;
if (icon.classList.contains('liked')) { if (isLiked) {
icon.style.fill = '#EF4444'; icon.style.fill = '#EF4444';
icon.style.stroke = '#EF4444'; icon.style.stroke = '#EF4444';
count++;
isLiked = true;
} else { } else {
icon.style.fill = 'none'; icon.style.fill = 'none';
icon.style.stroke = 'white'; icon.style.stroke = 'white';
count--;
isLiked = false;
} }
likesText.innerText = count + ' likes';
if (postId) { if (postId) {
const state = getPostState(); const state = getPostState();
if (!state[postId]) state[postId] = { comments: [] }; if (!state[postId]) state[postId] = { comments: [], likedBy: [], likesCount: 0 };
state[postId].liked = isLiked; if (!state[postId].likedBy) state[postId].likedBy = [];
if (isLiked) {
if (!state[postId].likedBy.includes(userEmail)) {
state[postId].likedBy.push(userEmail);
}
} else {
state[postId].likedBy = state[postId].likedBy.filter(e => e !== userEmail);
}
const count = state[postId].likedBy.length;
state[postId].likesCount = count; state[postId].likesCount = count;
if (!state[postId].comments) state[postId].comments = []; likesText.innerText = count + ' likes';
savePostState(state); savePostState(state);
} }
return; return;
@@ -690,12 +727,25 @@ document.addEventListener('DOMContentLoaded', () => {
const postCard = wrapper.closest('.post-card'); const postCard = wrapper.closest('.post-card');
const postId = postCard.getAttribute('data-post-id'); const postId = postCard.getAttribute('data-post-id');
if (text) { if (text) {
addComment(wrapper.closest('.comment-section'), text); const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
const username = currentUser.username || 'User';
const email = (currentUser.email || '').toLowerCase();
addComment(wrapper.closest('.comment-section'), text, username); // Visually add immediately
if (postId) { if (postId) {
const state = getPostState(); const state = getPostState();
if (!state[postId]) state[postId] = { liked: false, likesCount: parseInt(postCard.querySelector('.likes').innerText) || 0, comments: [] }; // Initialize if missing
if (!state[postId]) state[postId] = { likedBy: [], likesCount: parseInt(postCard.querySelector('.likes').innerText) || 0, comments: [] };
if (!state[postId].comments) state[postId].comments = []; if (!state[postId].comments) state[postId].comments = [];
state[postId].comments.push(text);
// Push Object
state[postId].comments.push({
text: text,
username: username,
email: email,
timestamp: new Date().toISOString()
});
savePostState(state); savePostState(state);
} }
input.value = ''; input.value = '';
@@ -709,12 +759,23 @@ document.addEventListener('DOMContentLoaded', () => {
const postCard = wrapper.closest('.post-card'); const postCard = wrapper.closest('.post-card');
const postId = postCard.getAttribute('data-post-id'); const postId = postCard.getAttribute('data-post-id');
if (text) { if (text) {
addComment(e.target.closest('.comment-section'), text); const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
const username = currentUser.username || 'User';
const email = (currentUser.email || '').toLowerCase();
addComment(e.target.closest('.comment-section'), text, username);
if (postId) { if (postId) {
const state = getPostState(); const state = getPostState();
if (!state[postId]) state[postId] = { liked: false, likesCount: parseInt(postCard.querySelector('.likes').innerText) || 0, comments: [] }; if (!state[postId]) state[postId] = { likedBy: [], likesCount: parseInt(postCard.querySelector('.likes').innerText) || 0, comments: [] };
if (!state[postId].comments) state[postId].comments = []; if (!state[postId].comments) state[postId].comments = [];
state[postId].comments.push(text);
state[postId].comments.push({
text: text,
username: username,
email: email,
timestamp: new Date().toISOString()
});
savePostState(state); savePostState(state);
} }
e.target.value = ''; e.target.value = '';
@@ -728,11 +789,11 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
} }
function addComment(section, text) { function addComment(section, text, authorName = 'you') {
const container = section.querySelector('.added-comments'); const container = section.querySelector('.added-comments');
const commentEl = document.createElement('div'); const commentEl = document.createElement('div');
commentEl.classList.add('comment-item'); commentEl.classList.add('comment-item');
commentEl.innerHTML = `<span class="comment-user">you</span> ${text}`; commentEl.innerHTML = `<span class="comment-user">${authorName}</span> ${text}`;
container.appendChild(commentEl); container.appendChild(commentEl);
} }