Created AdminFeed page similar to AdminEvent page.
This commit is contained in:
@@ -14,6 +14,7 @@ class AdminSidebar extends React.Component<AdminSidebarProps, AdminSidebarState>
|
||||
<div className="admin-sidebar">
|
||||
<AdminSidebarLink to="/admin" path={path}>Home</AdminSidebarLink>
|
||||
<AdminSidebarLink to="/admin/events" path={path}>Events</AdminSidebarLink>
|
||||
<AdminSidebarLink to="/admin/feed" path={path}>Feed</AdminSidebarLink>
|
||||
<AdminSidebarLink id="admin-sidebar-logout" to="/admin/logout" path={path}>Logout</AdminSidebarLink>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
@import "../../assets/scss/globals";
|
||||
|
||||
.admin-feed-page {
|
||||
margin: 0 1rem;
|
||||
width: 100%;
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid $white;
|
||||
padding: 0.5rem;
|
||||
|
||||
a {
|
||||
color: $orange1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import * as React from "react";
|
||||
import Helmet from "react-helmet";
|
||||
import { Link } from "react-router-dom";
|
||||
import "./AdminFeedPage.scss";
|
||||
import { StaticContext } from "../../server/StaticContext";
|
||||
import{Feed, getFeed} from "../../models/Feed";
|
||||
import { getEvents } from "../../models/Event";
|
||||
import { formatRelative } from "date-fns";
|
||||
|
||||
export interface AdminFeedPageProps {
|
||||
staticContext: StaticContext;
|
||||
}
|
||||
export interface AdminFeedPageState {
|
||||
feeds: Feed[];
|
||||
}
|
||||
|
||||
class AdminFeedPage extends React.Component<AdminFeedPageProps, AdminFeedPageState> {
|
||||
constructor(props: AdminFeedPageProps) {
|
||||
super(props);
|
||||
const { staticContext } = props;
|
||||
|
||||
if (staticContext) {
|
||||
/* The static context is an object that manages promises when
|
||||
rendering on the server. If staticContext exists, that means
|
||||
we have to store all promises in it. Otherwise, operate
|
||||
normally. See server/index.ts. */
|
||||
if (staticContext.resolutions.getFeed) {
|
||||
const feeds = staticContext.resolutions.getFeed as Feed[];
|
||||
this.state = {
|
||||
feeds,
|
||||
};
|
||||
} else {
|
||||
this.state = {
|
||||
feeds: [],
|
||||
};
|
||||
const promiseFeeds = this.fetchFeed();
|
||||
staticContext.promises.getFeed = promiseFeeds;
|
||||
}
|
||||
} else {
|
||||
this.state = {
|
||||
feeds: [],
|
||||
};
|
||||
this.fetchFeed();
|
||||
}
|
||||
}
|
||||
|
||||
fetchFeed = () => {
|
||||
const getFeedsPromise = getFeed();
|
||||
getFeedsPromise.then(feeds => {
|
||||
this.setState({
|
||||
feeds,
|
||||
});
|
||||
});
|
||||
return getFeedsPromise;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { feeds } = this.state;
|
||||
|
||||
return (
|
||||
<div className="admin-feed-page">
|
||||
<Helmet>
|
||||
<link rel="canonical" href="https://sik.ayy.fi/admin/feed" />
|
||||
</Helmet>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Description</th>
|
||||
<th>Publish time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{feeds.map(feed => (
|
||||
<tr key={feed.id}>
|
||||
<td><Link to={`/admin/feed/${feed.id}`}>{feed.title}</Link></td>
|
||||
<td>{feed.description}</td>
|
||||
<td>{formatRelative(new Date(feed.publish_time), new Date())}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AdminFeedPage;
|
||||
@@ -0,0 +1,2 @@
|
||||
import AdminFeedPage from "./AdminFeedPage";
|
||||
export default AdminFeedPage;
|
||||
@@ -10,6 +10,7 @@ import JsonLD from "./components/JsonLD";
|
||||
import "./index.scss";
|
||||
import AdminFrontPage from "./pages/AdminFrontPage";
|
||||
import AdminEventPage from "./pages/AdminEventPage";
|
||||
import AdminFeedPage from "./pages/AdminFeedPage";
|
||||
import AdminCommonPage from "./pages/AdminCommonPage";
|
||||
import AdminLoginPage from "./pages/AdminLoginPage";
|
||||
import { getTokenCookie } from "./auth";
|
||||
@@ -39,6 +40,7 @@ const adminLoginRoutes = [
|
||||
|
||||
const adminRoutes = [
|
||||
{ path: "/admin/events", page: AdminEventPage },
|
||||
{ path: "/admin/feed", page: AdminFeedPage },
|
||||
{ path: "/admin/events/create", page: EventCreatePage},
|
||||
{ path: "/admin/logout", page: AdminLogoutPage },
|
||||
{ path: "/admin", page: AdminFrontPage },
|
||||
|
||||
Reference in New Issue
Block a user