52 lines
1.6 KiB
React
52 lines
1.6 KiB
React
import { useEffect, useRef, useState } from 'react'
|
|
import { Button } from '../ui'
|
|
import { statusItems } from '../../lib/financeView'
|
|
import { noticeProps } from '../../lib/financeUi'
|
|
|
|
/**
|
|
* Block 0: Stand von Bank und Stripe in einer Zeile und der Knopf „Aktualisieren“.
|
|
* onRefresh() ruft den Bankabruf und lädt die Übersicht neu; wirft er (z. B. 429 „Bitte in N Minuten erneut
|
|
* versuchen.“), erscheint die Meldung des Servers als Hinweis unter der Zeile.
|
|
*/
|
|
export default function StatusLine({ stand, onRefresh, refreshing = false }) {
|
|
const [hint, setHint] = useState(null) // { text, limited }
|
|
const aliveRef = useRef(true)
|
|
useEffect(() => {
|
|
aliveRef.current = true
|
|
return () => {
|
|
aliveRef.current = false
|
|
}
|
|
}, [])
|
|
|
|
const items = statusItems(stand)
|
|
|
|
async function handleRefresh() {
|
|
setHint(null)
|
|
try {
|
|
await onRefresh()
|
|
} catch (err) {
|
|
if (aliveRef.current) {
|
|
setHint({ text: err?.message || 'Der Abruf ist fehlgeschlagen.', limited: err?.status === 429 })
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fin-status-wrap">
|
|
<div className="fin-status">
|
|
<div className="fin-status-items">
|
|
{items.map((item) => (
|
|
<span key={item.key} className={`fin-status-item${item.ok ? '' : ' fin-status-warn'}`}>
|
|
{item.text}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<Button onClick={handleRefresh} disabled={refreshing}>
|
|
{refreshing ? 'Aktualisiere …' : 'Aktualisieren'}
|
|
</Button>
|
|
</div>
|
|
{hint && <p {...noticeProps(hint.limited ? 'info' : 'warn', 'fin-notice')}>{hint.text}</p>}
|
|
</div>
|
|
)
|
|
}
|