Improve admin page layout

src/pages/AdminCommonPage/AdminCommonPage.scss

@@ -23,4 +23,15 @@
     padding: 0.5rem 1rem;
     color: $white;
   }
+
+  h1 {
+    margin-top: 0;
+  }
+
+  .error {
+    border: 1px solid $orange2;
+    padding: 8px 16px;
+    color: $orange2;
+    display: inline-block;
+  }
 }

src/pages/AdminEventPage/AdminEventPage.tsx

@@ -13,6 +13,7 @@ export interface AdminEventPageProps {
 }
 export interface AdminEventPageState {
   events: Event[];
+  error?: string;
 }
 
 class AdminEventPage extends React.Component<AdminEventPageProps, AdminEventPageState> {
@@ -45,42 +46,62 @@ class AdminEventPage extends React.Component<AdminEventPageProps, AdminEventPage
     }
   }
 
-  fetchEvents = () => {
+  fetchEvents = async () => {
     const getEventsPromise = getEvents();
-    getEventsPromise.then(events => {
+    try {
+      const events = await getEventsPromise;
       this.setState({
         events,
       });
-    });
-    return getEventsPromise;
+      return getEventsPromise;
+    } catch (err) {
+      this.setState({
+        error: String(err),
+      });
+    }
+  }
+
+  renderData = () => {
+    const { events, error } = this.state;
+
+    if (error) {
+      return <div className="error">{ error }</div>;
+    }
+
+    if (!events || events.length === 0) {
+      return <div>No events.</div>;
+    }
+
+    return (
+      <table>
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Start time</th>
+            <th>End time</th>
+          </tr>
+        </thead>
+        <tbody>
+          {events.map(event => (
+            <tr key={event.id}>
+              <td><Link to={`/admin/events/${event.id}`}>{event.title}</Link></td>
+              <td>{formatRelative(new Date(event.start_time), new Date())}</td>
+              <td>{formatRelative(new Date(event.end_time), new Date())}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
   }
 
   render() {
-    const { events } = this.state;
-
     return (
       <div className="admin-event-page">
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/admin/events" />
         </Helmet>
-        <table>
-          <thead>
-            <tr>
-              <th>Title</th>
-              <th>Start time</th>
-              <th>End time</th>
-            </tr>
-          </thead>
-          <tbody>
-            {events.map(event => (
-              <tr key={event.id}>
-                <td><Link to={`/admin/events/${event.id}`}>{event.title}</Link></td>
-                <td>{formatRelative(new Date(event.start_time), new Date())}</td>
-                <td>{formatRelative(new Date(event.end_time), new Date())}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        <h1>Events</h1>
+        { this.renderData() }
       </div>
     );
   }

src/pages/AdminFeedPage/AdminFeedPage.tsx

@@ -6,12 +6,14 @@ import { StaticContext } from "../../server/StaticContext";
 import{Feed, getFeed} from "../../models/Feed";
 import { getEvents } from "../../models/Event";
 import { formatRelative } from "date-fns";
+import { th } from "date-fns/esm/locale";
 
 export interface AdminFeedPageProps {
   staticContext: StaticContext;
 }
 export interface AdminFeedPageState {
-  feeds: Feed[];
+  feed: Feed[];
+  error?: string;
 }
 
 class AdminFeedPage extends React.Component<AdminFeedPageProps, AdminFeedPageState> {
@@ -25,61 +27,82 @@ class AdminFeedPage extends React.Component<AdminFeedPageProps, AdminFeedPageSta
          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[];
+        const feed = staticContext.resolutions.getFeed as Feed[];
         this.state = {
-          feeds,
+          feed,
         };
       } else {
         this.state = {
-          feeds: [],
+          feed: [],
         };
-        const promiseFeeds = this.fetchFeed();
-        staticContext.promises.getFeed = promiseFeeds;
+        const promiseFeed = this.fetchFeed();
+        staticContext.promises.getFeed = promiseFeed;
       }
     } else {
       this.state = {
-        feeds: [],
+        feed: [],
       };
       this.fetchFeed();
     }
   }
 
-  fetchFeed = () => {
-    const getFeedsPromise = getFeed();
-    getFeedsPromise.then(feeds => {
+  fetchFeed = async () => {
+    const getFeedPromise = getFeed();
+    try {
+      const feed = await getFeedPromise;
       this.setState({
-        feeds,
+        feed,
       });
-    });
-    return getFeedsPromise;
+      return getFeedPromise;
+    } catch (err) {
+      this.setState({
+        error: String(err),
+      });
+    }
+  }
+
+  renderData = () => {
+    const { feed, error } = this.state;
+
+    if (error) {
+      return <div className="error">{error}</div>;
+    }
+
+    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={`/admin/feed/${post.id}`}>{post.title}</Link></td>
+              <td>{post.description}</td>
+              <td>{formatRelative(new Date(post.publish_time), new Date())}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
   }
 
   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>
+        <h1>Feed</h1>
+        { this.renderData() }
       </div>
     );
   }

src/pages/AdminFrontPage/AdminFrontPage.scss

@@ -1,3 +1,8 @@
 .admin-front-page {
   margin: 0 1rem;
+
+  a {
+    text-decoration: underline;
+    display: block;
+  }
 }

src/pages/AdminFrontPage/AdminFrontPage.tsx

@@ -13,8 +13,9 @@ class AdminFrontPage extends React.Component<AdminFrontPageProps, AdminFrontPage
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/admin" />
         </Helmet>
-        <div>Admin Front Page</div>
+        <h1>SIK Admin</h1>
         <Link to="/admin/events">Events</Link>
+        <Link to="/admin/feed">Feed</Link>
       </div>
     );
   }