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

LikeandCommentSave

Browse Source
This commit is contained in:
David
2026-01-28 21:01:03 +11:00
parent 39da3c825f
commit 109e463724
3 changed files with 268 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
script.js
View File

@@ -96,6 +96,9 @@ document.addEventListener('DOMContentLoaded', () => {
void feedView.offsetWidth;
feedView.classList.add('fade-in');
// Load persisted state for posts
loadPostState();
// Remove fade-in class after animation to fix fixed positioning context
setTimeout(() => {
feedView.classList.remove('fade-in');
@@ -159,4 +162,169 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
}
// --- PERSISTENCE LOGIC ---
function getPostState() {
return JSON.parse(localStorage.getItem('socialAppPostState') || '{}');
}
function savePostState(state) {
localStorage.setItem('socialAppPostState', JSON.stringify(state));
}
function loadPostState() {
const state = getPostState();
const posts = document.querySelectorAll('.post-card');
posts.forEach(card => {
const id = card.getAttribute('data-post-id');
if (id && state[id]) {
const data = state[id];
// Restore Likes
const likeIcon = card.querySelector('.heart-icon');
const likesText = card.querySelector('.likes');
if (data.liked) {
likeIcon.classList.add('liked');
likeIcon.style.fill = '#EF4444';
likeIcon.style.stroke = '#EF4444';
} else {
likeIcon.classList.remove('liked');
likeIcon.style.fill = 'none';
likeIcon.style.stroke = 'white';
}
likesText.innerText = data.likesCount + ' likes';
// Restore Comments
const commentsContainer = card.querySelector('.added-comments');
commentsContainer.innerHTML = ''; // Clear existing to prevent dupes on re-run
if (data.comments && data.comments.length > 0) {
data.comments.forEach(text => {
const commentEl = document.createElement('div');
commentEl.classList.add('comment-item');
commentEl.innerHTML = `<span class="comment-user">you</span> ${text}`;
commentsContainer.appendChild(commentEl);
});
}
}
});
}
// --- FEED INTERACTIONS ---
if (feedView) {
feedView.addEventListener('click', (e) => {
const target = e.target;
// 1. LIKE ACTION
const likeBtn = target.closest('.heart-icon')?.closest('.icon-btn');
if (likeBtn) {
const icon = likeBtn.querySelector('.heart-icon');
const postCard = likeBtn.closest('.post-card');
const likesText = postCard.querySelector('.likes');
const postId = postCard.getAttribute('data-post-id');
// Toggle State
icon.classList.toggle('liked');
// Update Count (Simple parsing)
let count = parseInt(likesText.innerText);
let isLiked = false;
if (icon.classList.contains('liked')) {
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';
// Save State
if (postId) {
const state = getPostState();
if (!state[postId]) state[postId] = { comments: [] };
state[postId].liked = isLiked;
state[postId].likesCount = count;
// Preserve existing comments if we didn't just load them
if (!state[postId].comments) state[postId].comments = [];
savePostState(state);
}
return;
}
// 2. COMMENT TOGGLE ACTION
const commentBtn = target.closest('.icon-btn');
if (commentBtn && !commentBtn.querySelector('.heart-icon')) {
// Check if it's the comment button (has specific path)
const path = commentBtn.querySelector('path');
if (path && (path.getAttribute('d').startsWith('M21 11.5') || path.closest('svg')?.innerHTML.includes('M21 11.5'))) {
const postCard = commentBtn.closest('.post-card');
const commentSection = postCard.querySelector('.comment-section');
commentSection.classList.toggle('active');
if (commentSection.classList.contains('active')) {
commentSection.querySelector('input').focus();
}
return;
}
}
// 3. POST COMMENT ACTION
if (target.classList.contains('post-btn')) {
const wrapper = target.closest('.comment-input-wrapper');
const input = wrapper.querySelector('.comment-input');
const text = input.value.trim();
const postCard = wrapper.closest('.post-card');
const postId = postCard.getAttribute('data-post-id');
if (text) {
addComment(wrapper.closest('.comment-section'), text);
if (postId) {
const state = getPostState();
if (!state[postId]) state[postId] = { liked: false, likesCount: parseInt(postCard.querySelector('.likes').innerText) || 0, comments: [] };
if (!state[postId].comments) state[postId].comments = [];
state[postId].comments.push(text);
savePostState(state);
}
input.value = '';
}
}
});
// Enter key for comments
feedView.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && e.target.classList.contains('comment-input')) {
const text = e.target.value.trim();
const wrapper = e.target.closest('.comment-input-wrapper');
const postCard = wrapper.closest('.post-card');
const postId = postCard.getAttribute('data-post-id');
if (text) {
addComment(e.target.closest('.comment-section'), text);
if (postId) {
const state = getPostState();
if (!state[postId]) state[postId] = { liked: false, likesCount: parseInt(postCard.querySelector('.likes').innerText) || 0, comments: [] };
if (!state[postId].comments) state[postId].comments = [];
state[postId].comments.push(text);
savePostState(state);
}
e.target.value = '';
}
}
});
}
function addComment(section, text) {
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}`;
container.appendChild(commentEl);
}
});