From 50c7598996ece89b7ad74524269c5e7b4f03c6ca Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Mon, 28 Jan 2019 21:36:47 +0200 Subject: [PATCH 1/5] Add date-fns package --- package-lock.json | 7 ++++++- package.json | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 084426c..3024942 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4183,6 +4183,11 @@ "integrity": "sha1-bYCcnNDPe7iVLYD8hPoT1H3bEwg=", "dev": true }, + "date-fns": { + "version": "2.0.0-alpha.27", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.0.0-alpha.27.tgz", + "integrity": "sha512-cqfVLS+346P/Mpj2RpDrBv0P4p2zZhWWvfY5fuWrXNR/K38HaAGEkeOwb47hIpQP9Jr/TIxjZ2/sNMQwdXuGMg==" + }, "date-now": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz", @@ -11018,7 +11023,7 @@ }, "p-is-promise": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz", "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=", "dev": true }, diff --git a/package.json b/package.json index 944e2f7..4984758 100644 --- a/package.json +++ b/package.json @@ -94,6 +94,7 @@ }, "dependencies": { "axios": "^0.18.0", + "date-fns": "^2.0.0-alpha.27", "js-cookie": "^2.2.0", "mobx": "^5.0.3", "mobx-react": "^5.2.3", From 2e2d21658a5d2f4db3313a49ab932d3611cb9682 Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Mon, 28 Jan 2019 21:37:13 +0200 Subject: [PATCH 2/5] Fix admin sidebar wrapping --- src/components/AdminSidebarLink/AdminSidebarLink.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/AdminSidebarLink/AdminSidebarLink.scss b/src/components/AdminSidebarLink/AdminSidebarLink.scss index b2148ae..72d3a96 100644 --- a/src/components/AdminSidebarLink/AdminSidebarLink.scss +++ b/src/components/AdminSidebarLink/AdminSidebarLink.scss @@ -8,6 +8,7 @@ line-height: 20px; font-weight: bold; border-left: 4px solid $blue; + white-space: nowrap; &:hover, &.active { From dd43ec42ee6bb3f72c3542709f3b0f4770366b3a Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Mon, 28 Jan 2019 21:37:25 +0200 Subject: [PATCH 3/5] Add end_time field to Event model --- src/models/Event.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/models/Event.ts b/src/models/Event.ts index c3a1365..7ac9bcd 100644 --- a/src/models/Event.ts +++ b/src/models/Event.ts @@ -7,6 +7,7 @@ export interface Event { title: string; description: string; start_time: string; + end_time: string; } export async function getEvents(): Promise { From 7ffa3738ee3be79549943c299cec50b5dadfd113 Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Mon, 28 Jan 2019 21:37:47 +0200 Subject: [PATCH 4/5] Style login page --- .../AdminCommonPage/AdminCommonPage.scss | 19 +++++++++++++++++++ src/pages/AdminLoginPage/AdminLoginPage.tsx | 2 +- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/pages/AdminCommonPage/AdminCommonPage.scss b/src/pages/AdminCommonPage/AdminCommonPage.scss index 3b72073..d0c8a1a 100644 --- a/src/pages/AdminCommonPage/AdminCommonPage.scss +++ b/src/pages/AdminCommonPage/AdminCommonPage.scss @@ -1,7 +1,26 @@ +@import "../../assets/scss/globals"; + .admin-container { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; flex: 1; + + label { + margin-bottom: 0.5rem; + } + + input { + padding: 0.3rem 0.5rem; + margin-bottom: 0.5rem; + } + + input[type="submit"] { + border: none; + outline: none; + background-color: $orange2; + padding: 0.5rem 1rem; + color: $white; + } } diff --git a/src/pages/AdminLoginPage/AdminLoginPage.tsx b/src/pages/AdminLoginPage/AdminLoginPage.tsx index a7cfcab..fbf3c69 100644 --- a/src/pages/AdminLoginPage/AdminLoginPage.tsx +++ b/src/pages/AdminLoginPage/AdminLoginPage.tsx @@ -117,7 +117,7 @@ class AdminLoginPage extends React.ComponentPassword - + { this.renderError() } From 9f86880903c6880370fb4b66fcbcf4458e9319b9 Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Mon, 28 Jan 2019 21:38:44 +0200 Subject: [PATCH 5/5] Show events on admin event page --- src/pages/AdminEventPage/AdminEventPage.scss | 19 +++++ src/pages/AdminEventPage/AdminEventPage.tsx | 76 ++++++++++++++++++-- 2 files changed, 91 insertions(+), 4 deletions(-) diff --git a/src/pages/AdminEventPage/AdminEventPage.scss b/src/pages/AdminEventPage/AdminEventPage.scss index b89e4d4..84a81c3 100644 --- a/src/pages/AdminEventPage/AdminEventPage.scss +++ b/src/pages/AdminEventPage/AdminEventPage.scss @@ -1,3 +1,22 @@ +@import "../../assets/scss/globals"; + .admin-event-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/AdminEventPage/AdminEventPage.tsx b/src/pages/AdminEventPage/AdminEventPage.tsx index 4c0058e..89bc73c 100644 --- a/src/pages/AdminEventPage/AdminEventPage.tsx +++ b/src/pages/AdminEventPage/AdminEventPage.tsx @@ -1,18 +1,86 @@ import * as React from "react"; import Helmet from "react-helmet"; -import "./AdminEventPage.scss"; +import { Link } from "react-router-dom"; +import { formatRelative } from "date-fns"; -export interface AdminEventPageProps {} -export interface AdminEventPageState {} +import "./AdminEventPage.scss"; +import { Event, getEvents } from "../../models/Event"; +import { StaticContext } from "../../server/StaticContext"; + + +export interface AdminEventPageProps { + staticContext: StaticContext; +} +export interface AdminEventPageState { + events: Event[]; +} class AdminEventPage extends React.Component { + constructor(props: AdminEventPageProps) { + 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.getEvents) { + const events = staticContext.resolutions.getEvents as Event[]; + this.state = { + events, + }; + } else { + this.state = { + events: [], + }; + const promiseEvents = this.fetchEvents(); + staticContext.promises.getEvents = promiseEvents; + } + } else { + this.state = { + events: [], + }; + this.fetchEvents(); + } + } + + fetchEvents = () => { + const getEventsPromise = getEvents(); + getEventsPromise.then(events => { + this.setState({ + events, + }); + }); + return getEventsPromise; + } + render() { + const { events } = this.state; + return (
- Admin Event Page + + + + + + + + + + {events.map(event => ( + + + + + + ))} + +
TitleStart timeEnd time
{event.title}{formatRelative(new Date(event.start_time), new Date())}{formatRelative(new Date(event.end_time), new Date())}
); }