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">
<div class="header-logo">Social</div>
<div class="header-actions">
<button class="icon-btn">
<svg viewBox="0 0 24 24" width="24" height="24">
<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>
<button class="text-btn" id="logout-btn"
style="color: var(--text-secondary); font-size: 14px; background: none; border: none; cursor: pointer;">Logout</button>
</div>
</header>

151
script.js
View File

@@ -129,7 +129,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
checkSession();
const logoutBtn = document.querySelector('.header-actions .icon-btn');
const logoutBtn = document.getElementById('logout-btn');
if (logoutBtn) {
logoutBtn.addEventListener('click', () => {
if (confirm('Log out?')) {
@@ -172,30 +172,42 @@ document.addEventListener('DOMContentLoaded', () => {
// Complete Setup Handler
if (completeSetupBtn) {
completeSetupBtn.addEventListener('click', async () => {
const name = displayNameInput.value.trim();
if (!name) { alert('Name is required'); return; }
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 bio = bioInput.value.trim();
const name = displayNameInput.value.trim();
if (!name) { alert('Name is required'); return; }
// Finalize User
const finalUser = {
...pendingUser,
username: name,
bio: bio,
avatar: newAvatarBase64 || 'https://i.pravatar.cc/150?img=12'
};
const bio = bioInput.value.trim();
// Save to DB
const existingUsers = JSON.parse(localStorage.getItem('socialAppUsers') || '[]');
existingUsers.push(finalUser);
localStorage.setItem('socialAppUsers', JSON.stringify(existingUsers));
localStorage.setItem('currentUser', JSON.stringify(finalUser)); // Log them in
// Finalize User
const finalUser = {
...pendingUser,
username: name,
bio: bio,
avatar: newAvatarBase64 || 'https://i.pravatar.cc/150?img=12'
};
// Transition
onboardingView.classList.add('hidden');
feedView.classList.remove('hidden');
feedView.classList.add('fade-in');
initFeed();
// Save to DB
const existingUsers = JSON.parse(localStorage.getItem('socialAppUsers') || '[]');
existingUsers.push(finalUser);
localStorage.setItem('socialAppUsers', JSON.stringify(existingUsers));
localStorage.setItem('currentUser', JSON.stringify(finalUser)); // Log them in
// Transition
onboardingView.classList.add('hidden');
feedView.classList.remove('hidden');
feedView.classList.add('fade-in');
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 && 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 likesText = card.querySelector('.likes');
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.style.fill = '#EF4444';
likeIcon.style.stroke = '#EF4444';
}
likesText.innerText = data.likesCount + ' likes';
likesText.innerText = (data.likesCount || likedBy.length) + ' likes';
}
const commentsContainer = card.querySelector('.added-comments');
if (commentsContainer) {
commentsContainer.innerHTML = '';
if (data.comments) {
data.comments.forEach(text => {
data.comments.forEach(comment => {
const el = document.createElement('div');
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);
});
}
@@ -584,7 +610,7 @@ document.addEventListener('DOMContentLoaded', () => {
// --- FEED LISTENERS ---
if (feedView) {
initFeed();
// initFeed(); // REMOVED: Prevent premature rendering. Only render on login/checkSession.
feedView.addEventListener('click', (e) => {
const target = e.target;
const trigger = target.closest('.options-trigger');
@@ -644,27 +670,38 @@ document.addEventListener('DOMContentLoaded', () => {
const postCard = likeBtn.closest('.post-card');
const likesText = postCard.querySelector('.likes');
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');
let count = parseInt(likesText.innerText);
let isLiked = false;
if (icon.classList.contains('liked')) {
let isLiked = icon.classList.contains('liked');
if (isLiked) {
icon.style.fill = '#EF4444';
icon.style.stroke = '#EF4444';
count++;
isLiked = true;
} else {
icon.style.fill = 'none';
icon.style.stroke = 'white';
count--;
isLiked = false;
}
likesText.innerText = count + ' likes';
if (postId) {
const state = getPostState();
if (!state[postId]) state[postId] = { comments: [] };
state[postId].liked = isLiked;
if (!state[postId]) state[postId] = { comments: [], likedBy: [], likesCount: 0 };
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;
if (!state[postId].comments) state[postId].comments = [];
likesText.innerText = count + ' likes';
savePostState(state);
}
return;
@@ -690,12 +727,25 @@ document.addEventListener('DOMContentLoaded', () => {
const postCard = wrapper.closest('.post-card');
const postId = postCard.getAttribute('data-post-id');
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) {
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 = [];
state[postId].comments.push(text);
// Push Object
state[postId].comments.push({
text: text,
username: username,
email: email,
timestamp: new Date().toISOString()
});
savePostState(state);
}
input.value = '';
@@ -709,12 +759,23 @@ document.addEventListener('DOMContentLoaded', () => {
const postCard = wrapper.closest('.post-card');
const postId = postCard.getAttribute('data-post-id');
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) {
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 = [];
state[postId].comments.push(text);
state[postId].comments.push({
text: text,
username: username,
email: email,
timestamp: new Date().toISOString()
});
savePostState(state);
}
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 commentEl = document.createElement('div');
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);
}