Spaces:
Sleeping
Sleeping
File size: 7,102 Bytes
0d37b12 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
import { Container, Row, Col, Card, Button, Modal } from "react-bootstrap";
import AdminTemplate from "../../templates/AdminTemplate";
import axios from 'axios';
import { useNavigate } from "react-router-dom";
import DataStorage from "../../organisms/DataStorage";
import { useEffect, useState } from "react";
export default function AdminFeedPage() {
const navigate = useNavigate();
useEffect(() => {
if (!DataStorage.get('isLoggedInAdmin')) {
navigate('/admin-login');
}
}, [navigate]);
const [feeds, setFeeds] = useState([]);
const [loading, setLoading] = useState(true);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [selectedFeedId, setSelectedFeedId] = useState(null);
// Mở modal và lưu trữ id của bài đăng cần xóa
const handleShowDeleteModal = (feedId) => {
setSelectedFeedId(feedId);
setShowDeleteModal(true);
};
// Đóng modal
const handleCloseDeleteModal = () => {
setShowDeleteModal(false);
setSelectedFeedId(null);
};
const confirmDelete = async () => {
if (selectedFeedId) {
axios.delete(process.env.REACT_APP_API_URL + `/feeds/${selectedFeedId}`)
.then((response) => {
handleCloseDeleteModal(); // Đóng modal sau khi xóa
window.location.reload(); // Load lại trang
})
.catch((error) => console.error("Xóa bài đăng thất bại:", error))
}
};
useEffect(() => {
axios.get(process.env.REACT_APP_API_URL + '/feeds?limit=100')
.then((response) => {
setFeeds(response.data.data);
setLoading(false);
})
.catch((error) => {
console.log(error);
})
}, []);
function truncateText(text, maxLength = 120) {
if (text.length <= maxLength) {
return text;
}
return text.slice(0, maxLength) + '...Xem thêm';
}
function formatDate(isoDateString) {
const date = new Date(isoDateString);
const options = {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
};
return date.toLocaleDateString('vi-VN', options);
}
let feedContent;
if (loading) {
feedContent = (<p>Đang tải danh sách bài đăng...</p>);
} else {
feedContent = (
<Container fluid className="d-flex text-center align-items-center justify-content-center">
<Row style={{ maxWidth: "90vw" }} className="d-flex align-items-center justify-content-center text-center">
<Col xs="12" md='8' className="text-center">
<h2 className="text-center mb-4">Danh sách các bài đăng trên trang chủ</h2>
</Col>
<Col xs="12" md='4' className="text-center mb-4">
<Button className="m-3" as='a' href='/admin-news'>
Tạo bài đăng mới
</Button>
</Col>
{feeds.map((item, idx) => (
<Col xs="12" md="10" lg="8" key={idx} className="m-3 text-center">
<Card as='a' href={`/admin-news?id=${item.id}`} className="shadow-sm" style={{ display: 'flex', flexDirection: 'row', height: '200px' }}>
<Card.Img
variant="left"
src={item.image_url}
style={{ width: '150px', objectFit: 'cover' }}
/>
<Card.Body>
<Row style={{ height: '100px' }}>
<Col xs={12} md={12} className="d-flex align-items-center">
<Card.Title>{item.title}</Card.Title>
</Col>
<Col xs={12} md={12} className="d-flex align-items-center my-3">
<Card.Text>{truncateText(item.description)}</Card.Text>
</Col>
<Col xs={12} md={6} className="d-flex align-items-center">
<Card.Text>Tác giả: {item.author_id ? item.author_id : 'Không rõ'}</Card.Text>
</Col>
<Col xs={12} md={6} className="d-flex align-items-center">
<Card.Text>Thời gian tạo: {formatDate(item.create_at)}</Card.Text>
</Col>
<Col xs={12} className="d-flex justify-content-end">
<Button
variant="outline-danger"
size="sm"
onClick={(e) => {
e.preventDefault(); // Ngăn link href
handleShowDeleteModal(item.id);
}}
>
Xóa
</Button>
</Col>
</Row>
</Card.Body>
</Card>
</Col>
))}
</Row>
</Container>
);
}
return (
<AdminTemplate content={
(
<Container className='d-flex text-center align-items-center justify-content-center' style={{ minHeight: '80vh' }}>
{/* Modal xác nhận xóa */}
<Modal show={showDeleteModal} onHide={handleCloseDeleteModal}>
<Modal.Header closeButton>
<Modal.Title>Xác nhận xóa</Modal.Title>
</Modal.Header>
<Modal.Body>Bạn có chắc chắn muốn xóa bài đăng này không?</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleCloseDeleteModal}>
Hủy
</Button>
<Button variant="danger" onClick={confirmDelete}>
Xóa
</Button>
</Modal.Footer>
</Modal>
{feedContent}
</Container>
)
} />
);
} |