Created AdminFeed page similar to AdminEvent page.

This commit is contained in:
Noah
2019-02-11 19:23:51 +02:00
parent d808b195dd
commit c0d868ee57
5 changed files with 115 additions and 0 deletions
@@ -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;
}
}
}
+88
View File
@@ -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;
+2
View File
@@ -0,0 +1,2 @@
import AdminFeedPage from "./AdminFeedPage";
export default AdminFeedPage;
+2
View File
@@ -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 },