Add frontend JavaScript with full interactivity

2026-08-01 11:57:05 -04:00
parent 205e725865
commit 10747b8fcd
1 changed files with 376 additions and 0 deletions
@@ -0,0 +1,376 @@
+let currentSort = 'new';
+let currentPosts = [];
+let currentPostId = null;
+let selectedFile = null;
+
+document.addEventListener('DOMContentLoaded', () => {
+  loadPosts();
+  setupDragDrop();
+});
+
+async function apiGet(endpoint) {
+  const res = await fetch(endpoint);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+async function apiPost(endpoint, formData = null, body = null) {
+  let res;
+  if (formData) {
+    res = await fetch(endpoint, { method: 'POST', body: formData });
+  } else {
+    res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+  }
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
+    throw new Error(err.error || `HTTP ${res.status}`);
+  }
+  return res.json();
+}
+
+async function loadPosts() {
+  const loading = document.getElementById('loading');
+  loading.style.display = 'block';
+  try {
+    currentPosts = await apiGet(`/api/posts?sort=${currentSort}`);
+    renderGallery();
+  } catch (err) {
+    showToast('Failed to load posts', 'error');
+  } finally {
+    loading.style.display = 'none';
+  }
+}
+
+function renderGallery() {
+  const gallery = document.getElementById('gallery');
+  const count = document.getElementById('postCount');
+  count.textContent = `${currentPosts.length} posts`;
+  if (currentPosts.length === 0) {
+    gallery.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:48px;color:var(--text-muted);">No posts found</div>';
+    return;
+  }
+  gallery.innerHTML = currentPosts.map(post => `
+    <article class="post-card" onclick="openPostModal('${post.id}')">
+      <img class="post-card-image" src="${post.url}" alt="${escapeHtml(post.title)}" loading="lazy" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22300%22><rect fill=%22%23252540%22 width=%22400%22 height=%22300%22/><text fill=%22%236c6c85%22 x=%2250%25%22 y=%2250%25%22 text-anchor=%22middle%22 dy=%22.3em%22 font-size=%2216%22>Image not available</text></svg>'">
+      <div class="post-card-body">
+        <h3 class="post-card-title">${escapeHtml(post.title)}</h3>
+        <div class="post-card-stats">
+          <span class="upvotes">▲ ${formatNumber(post.upvotes)}</span>
+          <span>👁️ ${formatNumber(post.views)}</span>
+          <span>💬 ${post.commentCount || 0}</span>
+        </div>
+        ${post.tags && post.tags.length ? `
+          <div class="post-card-tags">
+            ${post.tags.slice(0, 3).map(t => `<span class="tag-pill">${escapeHtml(t)}</span>`).join('')}
+          </div>
+        ` : ''}
+      </div>
+    </article>
+  `).join('');
+}
+
+function setSort(sort) {
+  currentSort = sort;
+  document.querySelectorAll('.filter-tab').forEach(tab => {
+    tab.classList.toggle('active', tab.dataset.sort === sort);
+  });
+  loadPosts();
+}
+
+function filterPosts() {
+  const query = document.getElementById('searchInput').value.toLowerCase();
+  if (!query) { loadPosts(); return; }
+  const filtered = currentPosts.filter(p =>
+    p.title.toLowerCase().includes(query) ||
+    (p.tags && p.tags.some(t => t.toLowerCase().includes(query)))
+  );
+  const gallery = document.getElementById('gallery');
+  const count = document.getElementById('postCount');
+  count.textContent = `${filtered.length} posts matching "${query}"`;
+  if (filtered.length === 0) {
+    gallery.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:48px;color:var(--text-muted);">No posts match your search</div>';
+    return;
+  }
+  gallery.innerHTML = filtered.map(post => `
+    <article class="post-card" onclick="openPostModal('${post.id}')">
+      <img class="post-card-image" src="${post.url}" alt="${escapeHtml(post.title)}" loading="lazy">
+      <div class="post-card-body">
+        <h3 class="post-card-title">${escapeHtml(post.title)}</h3>
+        <div class="post-card-stats">
+          <span class="upvotes">▲ ${formatNumber(post.upvotes)}</span>
+          <span>👁️ ${formatNumber(post.views)}</span>
+          <span>💬 ${post.commentCount || 0}</span>
+        </div>
+        ${post.tags && post.tags.length ? `
+          <div class="post-card-tags">
+            ${post.tags.slice(0, 3).map(t => `<span class="tag-pill">${escapeHtml(t)}</span>`).join('')}
+          </div>
+        ` : ''}
+      </div>
+    </article>
+  `).join('');
+}
+
+function openUploadModal() {
+  document.getElementById('uploadModal').classList.add('active');
+  selectedFile = null;
+  document.getElementById('uploadPreview').style.display = 'none';
+  document.querySelector('.upload-prompt').style.display = '';
+  document.getElementById('postTitle').value = '';
+  document.getElementById('postTags').value = '';
+  document.getElementById('postAuthor').value = '';
+  hideError();
+}
+
+function closeUploadModal() {
+  document.getElementById('uploadModal').classList.remove('active');
+}
+
+function setupDragDrop() {
+  const zone = document.getElementById('uploadZone');
+  const input = document.getElementById('fileInput');
+  zone.addEventListener('click', () => input.click());
+  zone.addEventListener('dragover', (e) => { e.preventDefault(); zone.classList.add('dragover'); });
+  zone.addEventListener('dragleave', () => zone.classList.remove('dragover'));
+  zone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    zone.classList.remove('dragover');
+    const file = e.dataTransfer.files[0];
+    if (file) handleFile(file);
+  });
+  input.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (file) handleFile(file);
+  });
+}
+
+function handleFile(file) {
+  const allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+  if (!allowed.includes(file.type)) {
+    showError(`Unsupported file type: ${file.type}. Please upload JPEG, PNG, GIF, or WebP.`);
+    return;
+  }
+  if (file.size > 20 * 1024 * 1024) {
+    showError('File too large. Maximum size is 20MB.');
+    return;
+  }
+  selectedFile = file;
+  hideError();
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    document.getElementById('previewImage').src = e.target.result;
+    document.getElementById('uploadPreview').style.display = 'block';
+    document.querySelector('.upload-prompt').style.display = 'none';
+  };
+  reader.readAsDataURL(file);
+}
+
+function removePreview() {
+  selectedFile = null;
+  document.getElementById('uploadPreview').style.display = 'none';
+  document.querySelector('.upload-prompt').style.display = '';
+  document.getElementById('fileInput').value = '';
+}
+
+async function submitPost() {
+  const btn = document.getElementById('submitBtn');
+  const title = document.getElementById('postTitle').value.trim();
+  const tags = document.getElementById('postTags').value.trim();
+  const author = document.getElementById('postAuthor').value.trim() || 'Anonymous';
+  if (!selectedFile && !title) {
+    showError('Please upload an image or enter a title.');
+    return;
+  }
+  btn.disabled = true;
+  btn.textContent = 'Uploading...';
+  try {
+    if (selectedFile) {
+      const formData = new FormData();
+      formData.append('image', selectedFile);
+      formData.append('title', title || 'Untitled');
+      formData.append('tags', tags);
+      formData.append('author', author);
+      await apiPost('/api/upload', formData);
+      showToast('Post uploaded successfully! 🎉', 'success');
+    }
+    closeUploadModal();
+    await loadPosts();
+  } catch (err) {
+    showError(err.message);
+    showToast(err.message, 'error');
+  } finally {
+    btn.disabled = false;
+    btn.textContent = 'Upload Post';
+  }
+}
+
+async function openPostModal(postId) {
+  currentPostId = postId;
+  const modal = document.getElementById('postModal');
+  try {
+    const post = await apiGet(`/api/posts/${postId}`);
+    document.getElementById('postModalTitle').textContent = post.title;
+    document.getElementById('postModalImage').src = post.url;
+    document.getElementById('postModalImage').alt = post.title;
+    document.getElementById('postModalVotes').textContent = formatNumber(post.upvotes);
+    document.getElementById('postModalViews').textContent = formatNumber(post.views);
+    document.getElementById('postModalComments').textContent = post.commentCount || 0;
+    document.getElementById('postModalAuthor').innerHTML = `By <strong>${escapeHtml(post.author)}</strong>`;
+    document.getElementById('postModalDate').textContent = timeAgo(post.createdAt);
+    const tagsEl = document.getElementById('postModalTags');
+    tagsEl.innerHTML = post.tags && post.tags.length
+      ? post.tags.map(t => `<span class="tag-pill">${escapeHtml(t)}</span>`).join('')
+      : '';
+    await loadComments(postId);
+    modal.classList.add('active');
+  } catch (err) {
+    showToast('Failed to load post details', 'error');
+  }
+}
+
+function closePostModal() {
+  document.getElementById('postModal').classList.remove('active');
+  currentPostId = null;
+}
+
+async function votePost(direction) {
+  if (!currentPostId) return;
+  try {
+    const result = await apiPost('/api/posts/' + currentPostId + '/vote', null, {
+      direction,
+      userId: 'session-' + Math.random().toString(36).slice(2, 8)
+    });
+    document.getElementById('postModalVotes').textContent = formatNumber(result.upvotes);
+    document.getElementById('postModalViews').textContent = formatNumber(result.views);
+    await loadPosts();
+  } catch (err) {
+    showToast('Failed to vote', 'error');
+  }
+}
+
+async function loadComments(postId) {
+  try {
+    const postComments = await apiGet(`/api/comments/${postId}`);
+    const list = document.getElementById('commentsList');
+    if (postComments.length === 0) {
+      list.innerHTML = '<p style="color:var(--text-muted);text-align:center;padding:24px;">No comments yet. Be the first!</p>';
+      return;
+    }
+    const topLevel = postComments.filter(c => !c.parentId);
+    const replies = postComments.filter(c => c.parentId);
+    list.innerHTML = topLevel.map(c => {
+      const childReplies = replies.filter(r => r.parentId === c.id);
+      return `
+        <div class="comment-item">
+          <div class="comment-author">${escapeHtml(c.author)}</div>
+          <div class="comment-text">${escapeHtml(c.text)}</div>
+          <div class="comment-time">${timeAgo(c.timestamp)}</div>
+          ${childReplies.map(r => `
+            <div class="comment-item reply">
+              <div class="comment-author">${escapeHtml(r.author)}</div>
+              <div class="comment-text">${escapeHtml(r.text)}</div>
+              <div class="comment-time">${timeAgo(r.timestamp)}</div>
+            </div>
+          `).join('')}
+        </div>
+      `;
+    }).join('');
+    document.getElementById('postModalComments').textContent = postComments.length;
+  } catch (err) {
+    showToast('Failed to load comments', 'error');
+  }
+}
+
+async function postComment() {
+  const input = document.getElementById('commentInput');
+  const text = input.value.trim();
+  if (!text || !currentPostId) return;
+  try {
+    await apiPost('/api/comments', null, {
+      postId: currentPostId,
+      text,
+      author: 'Anonymous'
+    });
+    input.value = '';
+    await loadComments(currentPostId);
+    showToast('Comment posted! 💬', 'success');
+  } catch (err) {
+    showToast('Failed to post comment', 'error');
+  }
+}
+
+function openFullscreen() {
+  const img = document.getElementById('postModalImage').src;
+  document.getElementById('fullscreenImage').src = img;
+  document.getElementById('fullscreenOverlay').classList.add('active');
+}
+
+function closeFullscreen() {
+  document.getElementById('fullscreenOverlay').classList.remove('active');
+}
+
+function navigateHome() {
+  document.getElementById('searchInput').value = '';
+  loadPosts();
+}
+
+function escapeHtml(str) {
+  if (!str) return '';
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+function formatNumber(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
+  return n.toString();
+}
+
+function timeAgo(dateStr) {
+  const now = new Date();
+  const date = new Date(dateStr);
+  const diff = Math.floor((now - date) / 1000);
+  if (diff < 60) return 'just now';
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
+  return date.toLocaleDateString();
+}
+
+function showToast(message, type = 'success') {
+  const container = document.getElementById('toastContainer');
+  const toast = document.createElement('div');
+  toast.className = `toast ${type}`;
+  toast.textContent = message;
+  container.appendChild(toast);
+  setTimeout(() => toast.remove(), 3000);
+}
+
+function showError(msg) {
+  const el = document.getElementById('uploadError');
+  el.textContent = msg;
+  el.style.display = 'block';
+}
+
+function hideError() {
+  document.getElementById('uploadError').style.display = 'none';
+}
+
+document.getElementById('uploadModal').addEventListener('click', (e) => {
+  if (e.target === e.currentTarget) closeUploadModal();
+});
+document.getElementById('postModal').addEventListener('click', (e) => {
+  if (e.target === e.currentTarget) closePostModal();
+});
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    closeFullscreen();
+    closePostModal();
+    closeUploadModal();
+  }
+});