diff --git a/index.html b/index.html index ccb7025..4829328 100644 --- a/index.html +++ b/index.html @@ -59,13 +59,8 @@
- +
diff --git a/script.js b/script.js index 0ab6609..a99cdb7 100644 --- a/script.js +++ b/script.js @@ -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 = `you ${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 = `${displayUser} ${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 = `you ${text}`; + commentEl.innerHTML = `${authorName} ${text}`; container.appendChild(commentEl); }