0 likes
${post.username} ${post.caption}
`;
// This is a bit tricky with existing static posts.
// Ideally we keep static posts static and just inject dynamic ones.
if (prepend) {
feedContainer.insertBefore(article, feedContainer.firstChild);
// Note: index.html has static articles directly. `firstChild` might be text node or first article.
// A safer insert would be after the first spacer if I had one, or simply `prepend`.
// Let's use `prepend` on the container, but strict ordering might be weird with existing static HTML.
// Actually, `prepend` puts it before the first child, which IS the first post card. Perfect.
} else {
feedContainer.appendChild(article);
}
}
// Load User Posts on Init
const savedUserPosts = JSON.parse(localStorage.getItem('socialAppUserPosts') || '[]');
savedUserPosts.forEach(post => {
// Check if already in DOM to avoid dupes (simple check)
if (!document.querySelector(`[data-post-id="${post.id}"]`)) {
renderPost(post, true); // Keep order inverted?
// If we loop saved posts [newest, ..., oldest], we should Append?
// Actually saved as [newest, oldest].
// If we prepend one by one:
// 1. Newest -> Prepend -> Top.
// 2. Oldest -> Prepend -> Top (Wrong).
// So we should iterate in reverse if we prepend, OR just append at top once properly sorted.
// Let's keep it simple: Iterate in reverse order [oldest ... newest] and prepend each, so newest ends up on top.
}
});
// Fix order: Reverse iteration for prepend logic
// savedUserPosts.reverse().forEach(...) -> Wait, `unshift` adds to start. So [0] is newest.
// Loop:
// Post 0 (Newest) -> Prepend (become first).
// Post 1 (Older) -> Prepend (become first).
// Result: Post 1 is above Post 0. WRONG.
// Correct: Iterate from last to first (reverse) and prepend.
// Post Last (Oldest) -> Prepend.
// ...
// Post 0 (Newest) -> Prepend (Top). CORRECT.
// So:
[...savedUserPosts].reverse().forEach(post => {
if (!document.querySelector(`[data-post-id="${post.id}"]`)) {
renderPost(post, true);
}
});
});