mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2024-12-25 01:52:38 +00:00
Rename date prop in UI-Notification
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
parent
5163cccca4
commit
0419113d36
4 changed files with 22 additions and 11 deletions
|
@ -30,7 +30,7 @@ export const UiNotificationToast: React.FC<UiNotificationProps> = ({
|
|||
contentI18nKey,
|
||||
titleI18nOptions,
|
||||
contentI18nOptions,
|
||||
date,
|
||||
createdAtTimestamp,
|
||||
icon,
|
||||
dismissed,
|
||||
notificationId,
|
||||
|
@ -49,8 +49,17 @@ export const UiNotificationToast: React.FC<UiNotificationProps> = ({
|
|||
log.debug(`Show notification ${notificationId}`)
|
||||
})
|
||||
|
||||
const formatCreatedAtDate = useCallback(() => {
|
||||
return DateTime.fromSeconds(createdAtTimestamp).toRelative({ style: 'short' })
|
||||
}, [createdAtTimestamp])
|
||||
|
||||
const [formattedCreatedAtDate, setFormattedCreatedAtDate] = useState(() => formatCreatedAtDate())
|
||||
|
||||
useInterval(
|
||||
() => setRemainingSteps((lastRemainingSteps) => lastRemainingSteps - 1),
|
||||
() => {
|
||||
setRemainingSteps((lastRemainingSteps) => lastRemainingSteps - 1)
|
||||
setFormattedCreatedAtDate(formatCreatedAtDate())
|
||||
},
|
||||
!dismissed && remainingSteps > 0 ? 1000 / STEPS_PER_SECOND : null
|
||||
)
|
||||
|
||||
|
@ -90,8 +99,6 @@ export const UiNotificationToast: React.FC<UiNotificationProps> = ({
|
|||
})
|
||||
}, [contentI18nKey, contentI18nOptions, t])
|
||||
|
||||
const formattedDate = useMemo(() => DateTime.fromSeconds(date).toRelative({ style: 'short' }), [date])
|
||||
|
||||
return (
|
||||
<Toast className={styles.toast} show={!dismissed} onClose={dismissNow} {...cypressId('notification-toast')}>
|
||||
<Toast.Header>
|
||||
|
@ -101,7 +108,7 @@ export const UiNotificationToast: React.FC<UiNotificationProps> = ({
|
|||
</ShowIf>
|
||||
<Trans i18nKey={titleI18nKey} tOptions={titleI18nOptions} />
|
||||
</strong>
|
||||
<small>{formattedDate}</small>
|
||||
<small>{formattedCreatedAtDate}</small>
|
||||
</Toast.Header>
|
||||
<Toast.Body>{contentDom}</Toast.Body>
|
||||
<ProgressBar
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import React from 'react'
|
||||
import React, { useMemo } from 'react'
|
||||
import { UiNotificationToast } from './ui-notification-toast'
|
||||
import styles from './notifications.module.scss'
|
||||
import { useApplicationState } from '../../hooks/common/use-application-state'
|
||||
|
@ -12,11 +12,15 @@ import { useApplicationState } from '../../hooks/common/use-application-state'
|
|||
export const UiNotifications: React.FC = () => {
|
||||
const notifications = useApplicationState((state) => state.uiNotifications)
|
||||
|
||||
const notificationElements = useMemo(() => {
|
||||
return notifications.map((notification, notificationIndex) => (
|
||||
<UiNotificationToast key={notificationIndex} notificationId={notificationIndex} {...notification} />
|
||||
))
|
||||
}, [notifications])
|
||||
|
||||
return (
|
||||
<div className={styles['notifications-area']} aria-live='polite' aria-atomic='true'>
|
||||
{notifications.map((notification, notificationIndex) => (
|
||||
<UiNotificationToast key={notificationIndex} notificationId={notificationIndex} {...notification} />
|
||||
))}
|
||||
{notificationElements}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -42,7 +42,7 @@ export const dispatchUiNotification = async (
|
|||
notification: {
|
||||
titleI18nKey,
|
||||
contentI18nKey,
|
||||
date: DateTime.now().toSeconds(),
|
||||
createdAtTimestamp: DateTime.now().toSeconds(),
|
||||
dismissed: false,
|
||||
titleI18nOptions: titleI18nOptions ?? {},
|
||||
contentI18nOptions: contentI18nOptions ?? {},
|
||||
|
|
|
@ -29,7 +29,7 @@ export interface DispatchOptions {
|
|||
export interface UiNotification extends DispatchOptions {
|
||||
titleI18nKey: string
|
||||
contentI18nKey: string
|
||||
date: number
|
||||
createdAtTimestamp: number
|
||||
dismissed: boolean
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue