Aarni Halinen
80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import { NextPage } from "next";
|
|
import { formatRelative } from "date-fns";
|
|
import { toast } from "react-toastify";
|
|
import styled from "styled-components";
|
|
import AdminListCommon from "@views/admin/AdminListCommon";
|
|
import { Button, Link } from "@components/index";
|
|
import AddLink from "@components/AddLink";
|
|
import Post from "@models/Feed";
|
|
import PostApi from "@api/feedApi";
|
|
import useFetchBackend from "@hooks/useFetchBackend";
|
|
import { APIPath } from "@api/backend";
|
|
|
|
const URL = "/admin/feed";
|
|
|
|
const StyledButton = styled(Button) <{ $colorOverride: "red" }>`
|
|
background-color: ${(p) => p.$colorOverride};
|
|
border-radius: 8px;
|
|
color: white;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
`;
|
|
|
|
const confirmDelete = async (post: Post) => {
|
|
if (window.confirm(`Delete: ${post.id}: ${post.title_fi}/${post.title_en}; Are you sure?`) === true) {
|
|
try {
|
|
await PostApi.deletePost(post.id);
|
|
toast.success("Post removed successfully 😎");
|
|
window.location.reload(); // TODO: Fetch/update post list, so user sees the signup in the list
|
|
} catch (err) {
|
|
toast.error("Uh oh! Something went wrong! Try again later. 😟");
|
|
}
|
|
}
|
|
};
|
|
|
|
const renderData = (feed: Post[]) => {
|
|
if (!feed || feed.length === 0) {
|
|
return <div>No posts.</div>;
|
|
}
|
|
|
|
return (
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Description</th>
|
|
<th>Publish time</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{feed.map((post) => (
|
|
<tr key={post.id}>
|
|
<td><Link to={`${URL}/${post.id}`}>{post.title_fi}</Link></td>
|
|
<td>{post.description_fi}</td>
|
|
<td>{formatRelative(new Date(post.publish_time), new Date())}</td>
|
|
<td>
|
|
<StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(post)}>
|
|
Delete
|
|
</StyledButton>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
};
|
|
|
|
const AdminFeedPage: NextPage = () => {
|
|
const { data } = useFetchBackend<Post[]>({ apiPath: APIPath.FEED, options: { auth: true } });
|
|
return (
|
|
<AdminListCommon>
|
|
<h1>Feed</h1>
|
|
<AddLink text="Create news post" to={`${URL}/create`} />
|
|
{renderData(data)}
|
|
</AdminListCommon>
|
|
);
|
|
};
|
|
|
|
export default AdminFeedPage;
|