Workshop : การดึงค่า API มาแสดงผล + ทำหน้า Detail

src/
  pages/
    Posts.jsx
    PostDetail.jsx
  services/
    postService.js
  components/
    Loading.jsx
    ErrorMessage.jsx

const BASE_URL = "https://jsonplaceholder.typicode.com";

export async function getPosts() {
  const res = await fetch(`${BASE_URL}/posts`);
  if (!res.ok) throw new Error("Failed to fetch posts");
  return res.json();
}

export async function getPostById(id) {
  const res = await fetch(`${BASE_URL}/posts/${id}`);
  if (!res.ok) throw new Error("Failed to fetch post detail");
  return res.json();
}

export default function ErrorMessage({ message = "Something went wrong" }) {
  return (
    <div className="alert alert-danger my-3" role="alert">
      {message}
    </div>
  );
}

import { useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";
import { getPosts } from "../services/postService";
import Loading from "../components/Loading";
import ErrorMessage from "../components/ErrorMessage";

export default function Posts() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [q, setQ] = useState("");

  useEffect(() => {
    let ignore = false;

    async function load() {
      try {
        setLoading(true);
        setError("");
        const data = await getPosts();
        if (!ignore) setPosts(data);
      } catch (e) {
        if (!ignore) setError(e?.message || "Fetch error");
      } finally {
        if (!ignore) setLoading(false);
      }
    }

    load();
    return () => {
      ignore = true;
    };
  }, []);

  const filtered = useMemo(() => {
    const keyword = q.trim().toLowerCase();
    if (!keyword) return posts;
    return posts.filter((p) => p.title.toLowerCase().includes(keyword));
  }, [posts, q]);

  return (
    <div className="container-fluid">
      <div className="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <h1 className="h4 m-0">Posts</h1>

        <input
          className="form-control"
          style={{ maxWidth: 360 }}
          placeholder="Search title..."
          value={q}
          onChange={(e) => setQ(e.target.value)}
        />
      </div>

      {loading && <Loading text="Fetching posts..." />}
      {error && <ErrorMessage message={error} />}

      {!loading && !error && (
        <div className="row g-3">
          {filtered.slice(0, 12).map((p) => (
            <div className="col-12 col-md-6 col-xl-4" key={p.id}>
              <div className="card h-100 shadow-sm">
                <div className="card-body">
                  <div className="d-flex justify-content-between align-items-start gap-2">
                    <h2 className="h6">{p.title}</h2>
                    <span className="badge text-bg-light">#{p.id}</span>
                  </div>

                  <p className="text-muted mb-3">
                    {p.body.length > 90 ? p.body.slice(0, 90) + "..." : p.body}
                  </p>

                  <Link className="btn btn-outline-primary btn-sm" to={`/posts/${p.id}`}>
                    View Detail
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {!loading && !error && filtered.length === 0 && (
        <div className="alert alert-warning mt-3">No results.</div>
      )}
    </div>
  );
}

import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { getPostById } from "../services/postService";
import Loading from "../components/Loading";
import ErrorMessage from "../components/ErrorMessage";

export default function PostDetail() {
  const { id } = useParams();
  const [post, setPost] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    let ignore = false;

    async function load() {
      try {
        setLoading(true);
        setError("");
        const data = await getPostById(id);
        if (!ignore) setPost(data);
      } catch (e) {
        if (!ignore) setError(e?.message || "Fetch error");
      } finally {
        if (!ignore) setLoading(false);
      }
    }

    load();
    return () => {
      ignore = true;
    };
  }, [id]);

  return (
    <div className="container-fluid">
      <div className="d-flex align-items-center justify-content-between mb-3">
        <h1 className="h4 m-0">Post Detail</h1>
        <Link className="btn btn-outline-secondary btn-sm" to="/posts">
          ← Back
        </Link>
      </div>

      {loading && <Loading text={`Loading post #${id}...`} />}
      {error && <ErrorMessage message={error} />}

      {!loading && !error && post && (
        <div className="card shadow-sm">
          <div className="card-body">
            <div className="d-flex justify-content-between align-items-start gap-2">
              <h2 className="h5">{post.title}</h2>
              <span className="badge text-bg-light">#{post.id}</span>
            </div>
            <p className="text-muted mb-0">{post.body}</p>
          </div>
        </div>
      )}
    </div>
  );
}

{/* ตัวอย่างเมนูใน Sidebar */}
<NavLink className="nav-link d-flex align-items-center" to="/posts">
  <i className="bi bi-journal-text me-2"></i>
  <span className="nav-label">Posts</span>
</NavLink>