diff --git a/frontend/src/components/organisms/RightBar/index.tsx b/frontend/src/components/organisms/RightBar/index.tsx index d53d0294d619729cc699981cf2d16f9c8af70289..f0269cc9476cab9f24d2582684a778d0826513a5 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;