updates

2025-09-07 18:00:40 +00:00 · 2021-02-17 16:13:36 +01:00
parent 5bff67a53e
commit 69460312b0
12 changed files with 5368 additions and 128 deletions
--- a/src/Components/App.tsx
+++ b/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
--- a/src/Components/ShowTime.tsx
+++ b/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
--- a/src/Components/Switcher.tsx
+++ b/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
--- a/src/index.html
+++ b/src/index.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <title>💨</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet" />
+  </head>

-<head>
-  <title>💨</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=swap" rel="stylesheet">
-</head>
-
-<body>
-  <main id="root"></main>
-  <script src="./main.tsx"></script>
-</body>
-
-</html>
+  <body>
+    <main id="root"></main>
+    <script src="./main.tsx"></script>
+  </body>
+</html>
--- a/src/main.styl
+++ b/src/main.styl
@@ -7,7 +7,7 @@ html, body, #root
 	width 100%
 	height 100%
 	overflow hidden
-	font-family 'PT Sans', sans-serif
+	font-family: 'Inconsolata', monospace
 	font-weight bold

 #app
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,5 +4,4 @@ import * as ReactDOM from 'react-dom'
 import './main.styl'
 import App from './Components/App'

-
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.render(<App />, document.getElementById('root'))