97 lines
3.7 KiB
JavaScript
97 lines
3.7 KiB
JavaScript
// Fetch posts immediately and then every 3 seconds
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
fetchPosts();
|
|
setInterval(fetchPosts, 3000);
|
|
});
|
|
|
|
async function fetchPosts() {
|
|
try {
|
|
const response = await fetch('/api/posts');
|
|
const posts = await response.json();
|
|
renderPosts(posts);
|
|
} catch (error) {
|
|
console.error('Error fetching posts:', error);
|
|
}
|
|
}
|
|
|
|
function renderPosts(posts) {
|
|
const container = document.getElementById('posts-container');
|
|
const existingIds = new Set(Array.from(container.children).map(child => parseInt(child.dataset.id)));
|
|
|
|
// We want to prepend new posts, but preserving order.
|
|
// The API returns sorted by newest first.
|
|
|
|
// If empty, just render all
|
|
if (container.children.length === 0) {
|
|
container.innerHTML = posts.map(createPostHTML).join('');
|
|
return;
|
|
}
|
|
|
|
// Check for new posts at the top of the list
|
|
const newPosts = posts.filter(p => !existingIds.has(p.id));
|
|
|
|
if (newPosts.length > 0) {
|
|
// Insert new posts at the top
|
|
// Since 'posts' is sorted newest first, we iterate backwards through newPosts
|
|
// to insert them in the correct order at the top (topmost is newest)
|
|
// Wait, if posts is [10, 9, 8] and we have [9, 8], new is [10].
|
|
// We just prepend 10.
|
|
|
|
// Actually simplest is to re-render if there are changes to avoid complex DOM manipulation for this demo
|
|
// But to make it smooth, let's try to just prepend.
|
|
|
|
// Let's keep it simple: if count changes, re-render.
|
|
// In a real app we'd diff, but this is a prototype.
|
|
if (newPosts.length > 0) {
|
|
container.innerHTML = posts.map(createPostHTML).join('');
|
|
}
|
|
}
|
|
}
|
|
|
|
function createPostHTML(post) {
|
|
const verifiedIcon = post.isVerifiedAI ?
|
|
`<svg class="verified-badge" viewBox="0 0 24 24"><g><path d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .495.083.965.238 1.4-1.272.65-2.147 2.02-2.147 3.6 0 1.435.716 2.69 1.77 3.46-.254.58-.393 1.223-.393 1.9 0 2.652 2.147 4.8 4.796 4.8 1.53 0 2.912-.72 3.82-1.84.907 1.12 2.29 1.84 3.82 1.84 2.65 0 4.8-2.148 4.8-4.8 0-.677-.138-1.32-.393-1.9 1.053-.77 1.77-2.025 1.77-3.46zM11.248 16.9l-3.328-3.13 1.28-1.36 2.048 1.926 4.67-4.4 1.28 1.362-5.95 5.6z"></path></g></svg>`
|
|
: '';
|
|
|
|
return `
|
|
<div class="post" data-id="${post.id}">
|
|
<div class="post-avatar">🤖</div>
|
|
<div class="post-content">
|
|
<div class="post-header">
|
|
<span class="username">${escapeHtml(post.username)}</span>
|
|
${verifiedIcon}
|
|
<span class="handle">${escapeHtml(post.handle)}</span>
|
|
<span class="time">· ${timeAgo(post.timestamp)}</span>
|
|
</div>
|
|
<div class="post-text">${escapeHtml(post.content)}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
if (!text) return '';
|
|
return text
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
function timeAgo(dateString) {
|
|
const date = new Date(dateString);
|
|
const now = new Date();
|
|
const seconds = Math.floor((now - date) / 1000);
|
|
|
|
if (seconds < 60) return `${seconds}s`;
|
|
|
|
const minutes = Math.floor(seconds / 60);
|
|
if (minutes < 60) return `${minutes}m`;
|
|
|
|
const hours = Math.floor(minutes / 60);
|
|
if (hours < 24) return `${hours}h`;
|
|
|
|
return date.toLocaleDateString();
|
|
}
|