From c0d868ee5764b48614c295f91a2bd8ac14d66ce5 Mon Sep 17 00:00:00 2001
From: Noah <noah.nettey@aalto.fi>
Date: Mon, 11 Feb 2019 19:23:51 +0200
Subject: [PATCH] Created AdminFeed page similar to AdminEvent page.

---
 src/components/AdminSidebar/AdminSidebar.tsx |  1 +
 src/pages/AdminFeedPage/AdminFeedPage.scss   | 22 +++++
 src/pages/AdminFeedPage/AdminFeedPage.tsx    | 88 ++++++++++++++++++++
 src/pages/AdminFeedPage/index.ts             |  2 +
 src/routes.tsx                               |  2 +
 5 files changed, 115 insertions(+)
 create mode 100644 src/pages/AdminFeedPage/AdminFeedPage.scss
 create mode 100644 src/pages/AdminFeedPage/AdminFeedPage.tsx
 create mode 100644 src/pages/AdminFeedPage/index.ts

diff --git a/src/components/AdminSidebar/AdminSidebar.tsx b/src/components/AdminSidebar/AdminSidebar.tsx
index 51dd0d8..b7a6b25 100644
--- a/src/components/AdminSidebar/AdminSidebar.tsx
+++ b/src/components/AdminSidebar/AdminSidebar.tsx
@@ -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>
     );
diff --git a/src/pages/AdminFeedPage/AdminFeedPage.scss b/src/pages/AdminFeedPage/AdminFeedPage.scss
new file mode 100644
index 0000000..52eaa8d
--- /dev/null
+++ b/src/pages/AdminFeedPage/AdminFeedPage.scss
@@ -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;
+    }
+  }
+}
diff --git a/src/pages/AdminFeedPage/AdminFeedPage.tsx b/src/pages/AdminFeedPage/AdminFeedPage.tsx
new file mode 100644
index 0000000..314547a
--- /dev/null
+++ b/src/pages/AdminFeedPage/AdminFeedPage.tsx
@@ -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;
diff --git a/src/pages/AdminFeedPage/index.ts b/src/pages/AdminFeedPage/index.ts
new file mode 100644
index 0000000..a29bb81
--- /dev/null
+++ b/src/pages/AdminFeedPage/index.ts
@@ -0,0 +1,2 @@
+import AdminFeedPage from "./AdminFeedPage";
+export default AdminFeedPage;
diff --git a/src/routes.tsx b/src/routes.tsx
index 450df8b..149d6f2 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -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 },