From 58d6b98a94ae7c9e390fbc5bd5df03891c02d77a Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Thu, 6 Aug 2020 11:05:39 +0100
Subject: [PATCH] make right bar datetime live
---
.../components/organisms/RightBar/index.tsx | 68 +++++++++++++------
1 file changed, 48 insertions(+), 20 deletions(-)
diff --git a/frontend/src/components/organisms/RightBar/index.tsx b/frontend/src/components/organisms/RightBar/index.tsx
index d53d0294d..f0269cc94 100644
--- a/frontend/src/components/organisms/RightBar/index.tsx
+++ b/frontend/src/components/organisms/RightBar/index.tsx
@@ -3,27 +3,55 @@ import styles from "./style.module.scss";
import CalendarGroup from "components/molecules/CalendarGroup";
import SideBarTabGroup from "components/molecules/SideBarTabGroup";
import { faCog, faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
+export interface RightBarState {
+ date: Date;
+}
+class RightBar extends React.Component<{}, RightBarState> {
+ private timerID: number = 0;
-const RightBar: React.FC = () => {
- let buttons = [
- {
- title: "Settings",
- icon: faCog,
- },
- {
- title: "Sign Out",
- icon: faSignOutAlt,
- },
- ];
-
- return (
- <div id={styles.rightbarWrapper}>
- <p className={styles.rightbarStatus}>2020-08-05 15:08</p>
- <CalendarGroup/>
- <SideBarTabGroup title="Account" buttons={buttons}/>
- </div>
- );
-};
+ constructor(props: {}) {
+ super(props);
+ this.state = { date: new Date() };
+ }
+ componentDidMount() {
+ this.timerID = window.setInterval(
+ () =>
+ this.setState({
+ date: new Date(),
+ }),
+ 1000
+ );
+ }
+
+ componentWillUnmount() {
+ window.clearInterval(this.timerID);
+ }
+
+ render() {
+ let buttons = [
+ {
+ title: "Settings",
+ icon: faCog,
+ },
+ {
+ title: "Sign Out",
+ icon: faSignOutAlt,
+ },
+ ];
+
+ let timeOptions = { timeZone: "Europe/London", hourCycle: "h23" };
+ return (
+ <div id={styles.rightbarWrapper}>
+ <p className={styles.rightbarStatus}>
+ {/* yyyy-MM-dd HH:mm:ss, we have the duty to promote the spread of ISO8601 */}
+ {this.state.date.toLocaleString("en-CA", timeOptions)}
+ </p>
+ <CalendarGroup />
+ <SideBarTabGroup title="Account" buttons={buttons} />
+ </div>
+ );
+ }
+}
export default RightBar;
--
GitLab