frontend/src/pages/admin-pages/AdminNewsEditPage.js

import { Container, Row, Col, Card, Form, Image, Alert, Button } from "react-bootstrap";
import AdminTemplate from "../../templates/AdminTemplate";
import { useSearchParams } from 'react-router-dom';
import axios from "axios";
import DataStorage from "../../organisms/DataStorage";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

export default function AdminNewsEditPage() {

    const [error, setError] = useState("");
    const [searchParams] = useSearchParams();
    const newsId = Number(searchParams.get('id')) || null;

    const [feedDetail, setFeedItem] = useState({});
    const [initialUrl, setInitialUrl] = useState("");
    const [initialTitle, setInitialTitle] = useState("");
    const [initialDesc, setInitialDesc] = useState("");
    // const [loading, setLoading] = useState(true);
    const [isChanged, setChanged] = useState(false);

    const navigate = useNavigate();

    useEffect(() => {
        if (!DataStorage.get('isLoggedInAdmin')) {
            navigate('/admin-login');
        }
    }, [navigate]);

    const checkChange = () => {
        if (feedDetail.title.trim() !== initialTitle.trim()
            || feedDetail.description.trim() !== initialDesc.trim()
            || feedDetail.image_url.trim() !== initialUrl.trim()) {
            setChanged(true);
        } else {
            setChanged(false);
        }
    }

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFeedItem({ ...feedDetail, [name]: value });
        checkChange();
    };

    const handleAvatarUrlChange = (e) => {
        const url = e.target.value;
        setFeedItem((prevData) => ({
            ...prevData,
            image_url: url // Cập nhật URL ảnh
        }));
        setChanged(true);
    };

    useEffect(() => {
        if (newsId) {
            axios.get(process.env.REACT_APP_API_URL + `/feeds/${newsId}`)
                .then((response) => {
                    setFeedItem(response.data);
                    // setLoading(false);
                    setInitialDesc(response.data.description);
                    setInitialTitle(response.data.title);
                    setInitialUrl(response.data.image_url);
                })
                .catch((error) => {
                    setError(JSON.stringify(error));
                })
        }
    }, [newsId]);

    const handleSubmit = () => {
        const submit_data = {
            'title': feedDetail.title,
            'description': feedDetail.description,
            'image_url': feedDetail.image_url
        }
        if (newsId) {
            axios.patch(process.env.REACT_APP_API_URL + `/feeds/${newsId}`, submit_data)
                .then((response) => {
                    // setFeedItem(response.data);
                    // // setLoading(false);
                    // setInitialDesc(response.data.description);
                    // setInitialTitle(response.data.title);
                    // setChanged(false);
                    navigate('/admin-feed');
                    // window.location.reload();
                })
                .catch((error) => {
                    setError(JSON.stringify(error));
                })
        } else {
            axios.post(process.env.REACT_APP_API_URL + `/feeds`, submit_data)
                .then((response) => {
                    navigate('/admin-feed');
                })
                .catch((error) => {
                    setError(JSON.stringify(error));
                })
        }
    }

    return (
        <AdminTemplate content={
            (
                <Container fluid className="d-flex align-items-center justify-content-center mt-5">
                    <Row className="align-items-center">
                        {/* <Col xs={1} md={2}></Col> */}
                        <Col>
                            <Card style={{ width: '100%' }} className='justify-content-center'>
                                <Card.Header>
                                    <Card.Title className='mt-1 text-center'>{newsId ? 'Chỉnh sửa bài đăng' : 'Tạo bài đăng'}</Card.Title>
                                </Card.Header>
                                <Card.Body>

                                    <Form>
                                        {error && <Alert variant="danger">{error}</Alert>}
                                        <Row className="mb-3">
                                            <Col xs={12} className="text-center mb-3">
                                                {/* Hiển thị ảnh từ URL */}
                                                <Image
                                                    src={feedDetail.image_url} // Hiển thị ảnh đại diện từ URL
                                                    alt="Ảnh bài đăng"
                                                    width="auto"
                                                    height={400}
                                                    className="mb-3"
                                                />
                                                <Form.Group controlId="formImageUrl">
                                                    <Form.Label>URL ảnh bài đăng</Form.Label>
                                                    <Form.Control
                                                        type="text"
                                                        placeholder="Nhập URL ảnh"
                                                        value={feedDetail.image_url || ''}
                                                        onChange={handleAvatarUrlChange} // Gọi hàm khi URL thay đổi
                                                    />
                                                </Form.Group>
                                            </Col>
                                            <Col xs={12} className="mb-3">
                                                <Form.Group controlId="formTitle">
                                                    <Form.Label>Tiêu đề bài đăng</Form.Label>
                                                    <Form.Control
                                                        type="text"
                                                        name="title"
                                                        placeholder={newsId ? 'Đang tải dữ liệu...' : 'Tiêu đề'}
                                                        value={feedDetail.title || ''}
                                                        onChange={handleChange}
                                                    />
                                                </Form.Group>
                                            </Col>
                                        </Row>

                                        <Form.Group controlId="formText" className="mb-3">
                                            <Form.Label>Nội dung</Form.Label>
                                            <Form.Control
                                                as="textarea"
                                                name="description"
                                                placeholder={newsId ? 'Đang tải dữ liệu...' : 'Nội dung'}
                                                rows={10}
                                                value={feedDetail.description || ''}
                                                onChange={handleChange}
                                            />
                                        </Form.Group>

                                        <Button variant="primary" type="button" disabled={!isChanged} onClick={handleSubmit}>
                                            {newsId ? 'Cập nhật' : 'Tạo mới'}
                                        </Button>
                                    </Form>
                                </Card.Body>
                            </Card>

                        </Col>
                        {/* <Col xs={1} md={2}></Col> */}
                    </Row>
                </Container>
            )
        } />
    )
}