updates

src/Components/App.tsx

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

src/Components/ShowTime.tsx

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

src/Components/Switcher.tsx

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