Boss Battle: เพิ่ม Loading, Error, Empty State

เป้าหมายของ Mission นี้: เพิ่ม Loading, Error, และ Empty State ให้หน้ารวมโพสต์ครบสมบูรณ์

เช็คลิสต์ก่อนส่งงาน

flowchart LR
    A["fetch เริ่มทำงาน"] --> B{"loading?"}
    B -->|ใช่| C["โชว์ กำลังโหลด..."]
    B -->|ไม่| D{"error?"}
    D -->|ใช่| E["โชว์ ข้อความ error"]
    D -->|ไม่| F{"posts ว่างไหม?"}
    F -->|ว่าง| G["โชว์ ยังไม่มีโพสต์"]
    F -->|ไม่ว่าง| H["โชว์รายการโพสต์"]

สิ่งที่ต้องทำ

1. ระหว่างรอ — โชว์ข้อความ "กำลังโหลด..."
2. ถ้าโหลดพัง — โชว์ข้อความ error
3. ถ้าโหลดสำเร็จแต่ไม่มีข้อมูลเลย (array ว่าง) — โชว์ข้อความ "ยังไม่มีโพสต์"

ต่อยอดจาก Mission ก่อนหน้า

"use client";
import { useState, useEffect } from "react";

type Post = { id: number; title: string; body: string };

export default function PostsPage() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    async function loadPosts() {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        if (!response.ok) throw new Error("โหลดข้อมูลไม่สำเร็จ");
        const data = await response.json();
        setPosts(data);
      } catch (err) {
        setError("เกิดข้อผิดพลาด ลองใหม่อีกครั้ง");
      } finally {
        setLoading(false);
      }
    }
    loadPosts();
  }, []);

  if (loading) return <p>กำลังโหลด...</p>;
  if (error) return <p className="text-red-600">{error}</p>;
  if (posts.length === 0) return <p>ยังไม่มีโพสต์</p>;

  return (
    <ul className="flex flex-col gap-4 p-8">
      {posts.map((post) => (
        <li key={post.id} className="rounded-lg border p-4">
          <h2 className="font-bold">{post.title}</h2>
          <p className="text-neutral-600">{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

ทดสอบ: ลองปิดเน็ตแล้วรีเฟรชหน้าดู ควรเห็นข้อความ error ไม่ใช่หน้าขาวเปล่า — Chapter นี้จบ แล้ว ไปเรียน Dynamic Route กันต่อ