43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { Alert, CircularProgress, List, ListItem, ListItemText, Typography } from "@mui/material";
|
|
import { fetchAdminArticles } from "../../services/api";
|
|
import { useAppSelector } from "../../store/hooks";
|
|
|
|
const NewsManagementPage = () => {
|
|
const { token } = useAppSelector((state) => state.auth);
|
|
|
|
const { data, isLoading, error } = useQuery({
|
|
queryKey: ["admin-articles"],
|
|
queryFn: () => fetchAdminArticles(token ?? ""),
|
|
enabled: Boolean(token),
|
|
});
|
|
|
|
if (isLoading) {
|
|
return <CircularProgress />;
|
|
}
|
|
|
|
if (error) {
|
|
return <Alert severity="error">Unable to load articles.</Alert>;
|
|
}
|
|
|
|
if (!data?.length) {
|
|
return <Typography>No articles found.</Typography>;
|
|
}
|
|
|
|
return (
|
|
<List>
|
|
{data.map((article) => (
|
|
<ListItem key={article.id} divider>
|
|
<ListItemText
|
|
primary={article.title}
|
|
secondary={article.published ? "Published" : "Draft"}
|
|
primaryTypographyProps={{ fontWeight: 600 }}
|
|
/>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
);
|
|
};
|
|
|
|
export default NewsManagementPage;
|