rework & new build system

src/Components/App.tsx

@@ -0,0 +1,35 @@
+import React, { useState, useCallback } from 'react'
+import moment from 'moment'
+
+import ShowTime from './ShowTime'
+import Switcher from './Switcher'
+
+export const Glories = {
+	Cosi: moment('2019-02-12').unix(),
+	Georg: moment('2019-11-08').unix()
+}
+
+export type Person = keyof typeof Glories
+
+const init: Person = window.localStorage.getItem('selected') as Person || 'Cosi'
+
+const App: React.FC = () => {
+
+	const [person, setPerson] = useState(init)
+
+	const _set = useCallback((p: Person) => {
+		window.localStorage.setItem('selected', p)
+		setPerson(p)
+	}, [])
+
+	return <div id="app">
+		<Switcher onChange={_set} />
+		<div>
+			<div id={'title'}>💨 Rauchmelder 💨</div>
+			<br />
+			<ShowTime glory={Glories[person]} />
+		</div>
+	</div>
+}
+
+export default App

src/Components/ShowTime.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react'
+import moment from 'moment'
+
+type Props = {
+    glory: number
+}
+
+const ShowTime: React.FC<Props> = ({ glory }) => {
+    const [refresh, setRefresh] = useState(0)
+
+
+    const now = Date.now() / 1000 | 0
+    const delta = moment.duration(now - glory, 'seconds')
+
+    useEffect(() => {
+        setTimeout(() => setRefresh(refresh + 1), 1000)
+    }, [refresh])
+
+    return <div id={'text'}>
+        {delta.humanize()}
+        <br />
+        {delta.asSeconds()}
+    </div>
+}
+
+export default ShowTime

src/Components/Switcher.tsx

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react'
+import { Glories, Person } from './App'
+
+type Props = {
+    onChange: (p: Person) => void,
+}
+
+const Switcher: React.FC<Props> = ({ onChange }) => {
+    return <div id={'switcher'}>
+        {Object.keys(Glories).map((glory, i) => <span
+            key={i}
+            onClick={() => onChange(glory as Person)}
+        >
+            {glory}
+        </span>
+        )}
+    </div>
+}
+
+export default Switcher