【JavaScript入門】過去投稿のタイムライン表示と「いいね」（postListArea.js）

node-js/
 └─ app/
     ├─ index.html
     ├─ style.css
     └─ js/
          ├─ common.js
          ├─ storage.js
          ├─ imageArea.js
          ├─ imageEffects.js
          ├─ controlArea.js
          ├─ commentArea.js
          ├─ sendArea.js
          ├─ dateFormat.js
          └─ postListArea.js   ← ★今回実装

/* ---------------------------------------------------
   postListArea.js  （フロントのみで完結）
   - 過去投稿タイムラインを Ajax で取得して描画
   - ❤️ いいね！をクリックすると即座に +1
   - サーバー戻り値が文字列でも安全に数値化
   - 連打防止に disabled 制御
--------------------------------------------------- */
window.addEventListener('DOMContentLoaded', () => {
  updatePostList();                                    // 初回ロード
  document.querySelector('#postListArea')
          .addEventListener('click', onLikeClicked);   // いいね！はイベント委任
});

/* ========== タイムライン取得 ========== */
function updatePostList(){
  const root = document.querySelector('#postListArea');

  fetch('/get')                                        // ← API 例: /get
    .then(r => {
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      return r.json();                                 // { list:[…] } を想定
    })
    .then(({ list }) => {
      root.innerHTML = '';                             // 旧 DOM を一掃
      list.forEach(post => root.appendChild(buildItem(post)));
    })
    .catch(console.error);
}

/* ========== 投稿 1 件を DOM 化 ========== */
function buildItem(post){
  const wrap = document.createElement('div');
  wrap.className = 'postListItem';

  const likeCnt = parseInt(post.likes, 10) || 0;       // 文字列対策 (例 "5")

  wrap.innerHTML = `
    <div class="plImage">
      <img src="/${post.dir}${post.image}" alt="投稿画像">
    </div>
    <div class="plBody">
      <p class="plComment">${post.comment}</p>
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <time class="plDate">
          ${dateFormat('YYYY/MM/DD hh:mm:ss', new Date(post.date))}
        </time>
        <button type="button"
                class="likeBtn"
                data-id="${post.id}">
          ❤️ <span>${likeCnt}</span>
        </button>
      </div>
    </div>`;
  return wrap;
}

/* ========== いいね！処理 (イベント委任) ========== */
function onLikeClicked(e){
  const btn = e.target.closest('button.likeBtn');      // img や span クリック対策
  if (!btn) return;

  e.preventDefault();
  const id   = btn.dataset.id;                         // 投稿 ID
  const span = btn.querySelector('span');
  let   cnt  = parseInt(span.textContent, 10) || 0;

  /* ➀ 楽観的 UI 更新 (即時 +1) */
  btn.disabled = true;                                 // 連打防止
  span.textContent = ++cnt;                            // 1 行でカウントアップ

  /* ➁ サーバーへ POST */
  fetch(`/like/${encodeURIComponent(id)}`, {
    method:      'POST',
    credentials: 'same-origin',
    headers:     { 'Accept': 'application/json' }
  })
    .then(res => {
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const ct = res.headers.get('Content-Type') || '';
      return ct.includes('application/json') ? res.json() : null;
    })
    .then(data => {
      // サーバーが正式な likes を返せば UI を上書き
      if (data && data.likes != null) {
        const serverCnt = parseInt(data.likes, 10);
        if (!Number.isNaN(serverCnt)) span.textContent = serverCnt;
      }
    })
    .catch(err => {
      console.error('Like リクエストに失敗:', err);
      // エラー時は楽観的更新を維持 (必要ならリトライ UI を実装)
    })
    .finally(() => { btn.disabled = false; });
}