front/src/ForumPage.js

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { API_BASE_URL } from "./config";

// 示例数据
const posts = [
    {
        post_id: "1",
        title: "欢迎来到G10论坛",
        content: "这里是G10 PT站的官方论坛,欢迎大家发帖交流!",
        author_id: "u1",
        author_name: "Alice",
        created_at: "2024-06-01 12:00",
        reply_count: 3,
        view_count: 120,
    },
    {
        post_id: "2",
        title: "经典电影合集",
        content: "90年代经典电影大家有什么推荐吗?",
        author_id: "u2",
        author_name: "Bob",
        created_at: "2024-06-02 09:30",
        reply_count: 1,
        view_count: 45,
    },
];

export default function ForumPage() {
    const navigate = useNavigate();
    const [posts, setPosts] = useState([]);
    const [searchQuery, setSearchQuery] = useState('');

    useEffect(() => {
        // get userId from cookie
        const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
        const userId = match ? match[2] : null;
        console.log("User ID from cookie:", userId);
        // if (!userId) return;
        console.log("Fetching forum posts...");
        fetch(`${API_BASE_URL}/api/forum`)
            .then(res => {
                // console.log("fetch raw response:", res);
                return res.json();
            })
            .then(data => {
                // console.log("fetch forum data:", data);
                const formattedPosts = data.map(post => ({
                    post_id: post.postid,
                    title: post.posttitle,
                    content: post.postcontent,
                    author_id: post.postuserid,
                    author_name: post.author?.username || '',
                    created_at: new Date(post.posttime).toLocaleString(),
                    reply_count: post.replytime,
                    view_count: post.readtime,
                }));
                setPosts(formattedPosts);
            })
            .catch(() => setPosts([]));
    }, []);
    
    // Handler to perform search based on input value
    const handleSearch = () => {
      fetch(`${API_BASE_URL}/api/search-posts?keyword=${encodeURIComponent(searchQuery)}`)
        .then(res => res.json())
        .then(data => {
          const formattedPosts = data.map(post => ({
            post_id: post.postid,
            title: post.posttitle,
            content: post.postcontent,
            author_id: post.postuserid,
            author_name: post.author?.username || '',
            created_at: new Date(post.posttime).toLocaleString(),
            reply_count: post.replytime,
            view_count: post.readtime,
          }));
          setPosts(formattedPosts);
        })
        .catch(() => setPosts([]));
    };

    return (
        <div style={{ maxWidth: 700, margin: "40px auto" }}>
            <div style={{ display: "flex", alignItems: "center", marginBottom: 24 }}>
                <h2 style={{ color: "#1a237e", margin: 0, marginRight: 24 }}>G10 论坛</h2>
                <input
                    type="text"
                    placeholder="搜索帖子内容"
                    value={searchQuery}
                    onChange={e => setSearchQuery(e.target.value)}
                    style={{
                        flex: 1,
                        fontSize: 16,
                        padding: "8px 14px",
                        border: "1px solid #bfcfff",
                        borderRadius: 8,
                        outline: "none",
                        minWidth: 0,
                    }}
                />
                <button
                    style={{
                        marginLeft: 8,
                        fontSize: 16,
                        padding: "8px 18px",
                        border: "1px solid #bfcfff",
                        background: "#e0e7ff",
                        borderRadius: 8,
                        cursor: "pointer",
                    }}
                    onClick={handleSearch}
                >
                    🔍
                </button>
            </div>
            {posts.map(post => (
                <div
                    key={post.post_id}
                    style={{
                        background: "#fff",
                        borderRadius: 12,
                        boxShadow: "0 2px 8px #e0e7ff",
                        padding: 24,
                        marginBottom: 24,
                        cursor: "pointer",
                        transition: "box-shadow 0.2s",
                    }}
                    onClick={() => navigate(`/forum/${post.post_id}`)}
                >
                    <div style={{ fontSize: 15, color: "#1976d2", marginBottom: 6 }}>
                        {post.author_name} · {post.created_at}
                    </div>
                    <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8, color: "#222" }}>
                        {post.title}
                    </div>
                    <div style={{ fontSize: 16, color: "#444", marginBottom: 18 }}>
                        {post.content}
                    </div>
                    <div style={{ display: "flex", justifyContent: "flex-start", gap: 32, fontSize: 14, color: "#888" }}>
                        <span>回复数: {post.reply_count}</span>
                        <span>观看数: {post.view_count}</span>
                    </div>
                </div>
            ))}
        </div>
    );
}