index.js

const BASE_URL = 'http://localhost:3000';

function main() {
  displayPosts();
  addNewPostListener();
}

async function displayPosts() {
  const res = await fetch(`${BASE_URL}/posts`);
  const posts = await res.json();
  const listDiv = document.getElementById('post-list');
  listDiv.innerHTML = '';

  posts.forEach(post => {
    const el = document.createElement('div');
    el.className = 'post-item';
    el.dataset.id = post.id;
    el.innerHTML = `
      <img src="${post.image_url}" alt="${post.title}" width="50" />
      <strong>${post.title}</strong>
    `;
    el.addEventListener('click', () => handlePostClick(post.id));
    listDiv.appendChild(el);
  });

  // Optional: display details of first post on load
  if (posts.length > 0) handlePostClick(posts[0].id);
}

async function handlePostClick(id) {
  const res = await fetch(`${BASE_URL}/posts/${id}`);
  const post = await res.json();
  const detailDiv = document.getElementById('post-detail');
  detailDiv.innerHTML = `
    <h2>${post.title}</h2>
    <p><em>by ${post.author}</em></p>
    <img src="${post.image_url}" alt="${post.title}" width="200" />
    <p>${post.content}</p>
  `;
}

function addNewPostListener() {
  const form = document.getElementById('new-post-form');
  form.addEventListener('submit', async e => {
    e.preventDefault();
    const { blog, kimanzi, content } = form.elements;
    const newPost = {
      blog: title.value,
      kimanzi: author.value,
      content: content.value,
      image_url: 'https://via.placeholder.com/150'
    };
    // Display immediately on frontend:
    await fetch(`${BASE_URL}/posts`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newPost)
    });
    form.reset();
    displayPosts();
  });
}

document.addEventListener('DOMContentLoaded', main);