Skip to content

Commit 931d0dc

Browse files
ekraffmillerekraffmiller
committed
fix layout and translations
1 parent b431f98 commit 931d0dc

File tree

2 files changed

+59
-52
lines changed

2 files changed

+59
-52
lines changed

‎public/locales/en/account.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@
5353
"userGuideLinkText": "User Guide",
5454
"demoServerLinkText": "Demo Site",
5555
"clearAll": "Clear All",
56-
"clearAllOnThisPage": "Clear All on This Page",
56+
"clearAllOnThisPage": "Clear Notifications",
57+
"displayingNotifications": "Displaying {{start}} - {{end}} of {{total}} Notifications",
5758
"dismiss": "Dismiss",
5859
"noNotifications": "No notifications available.",
5960
"notification": {

‎src/sections/account/notifications-section/NotificationsSection.tsx‎

Lines changed: 57 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// TypeScript
22
import { useState, useEffect } from 'react'
33
import { useTranslation } from 'react-i18next'
4-
import { Button, CloseButton } from '@iqss/dataverse-design-system'
4+
import { Button, CloseButton, Stack } from '@iqss/dataverse-design-system'
55
import { getTranslatedNotification } from '@/sections/account/notifications-section/NotificationsHelper'
66
import { needsUpdateStore } from '@/notifications/domain/hooks/needsUpdateStore'
77
import styles from './NotificationsSection.module.scss'
@@ -32,12 +32,13 @@ export const NotificationsSection = ({ notificationRepository }: NotificationsSe
3232
const unreadIds = notifications
3333
.filter((n) => !n.displayAsRead && !readIds.includes(n.id))
3434
.map((n) => n.id)
35-
35+
console.log('in useEffect, unreadIds:', unreadIds)
3636
if (unreadIds.length > 0) {
3737
const timer = setTimeout(() => {
3838
void (async () => {
3939
await markAsRead(unreadIds)
4040
setReadIds((prev) => [...prev, ...unreadIds])
41+
console.log('calling refetch after marking as read')
4142
await refetch()
4243
needsUpdateStore.setNeedsUpdate(true)
4344
})()
@@ -68,63 +69,68 @@ export const NotificationsSection = ({ notificationRepository }: NotificationsSe
6869
const pageSize = Math.max(1, paginationInfo?.pageSize ?? (notifications.length || 1))
6970
const start = notifications.length === 0 ? 0 : (page - 1) * pageSize + 1
7071
const end = notifications.length === 0 ? 0 : Math.min(start + notifications.length - 1, total)
72+
const totalPages = Math.ceil(total / pageSize)
7173
const clearAllKey =
7274
total > pageSize ? 'notifications.clearAllOnThisPage' : 'notifications.clearAll'
7375

7476
return (
7577
<section>
76-
<div className="d-flex align-items-center gap-2 mb-2">
77-
{notifications.length > 0 && (
78-
<Button
79-
size="sm"
80-
variant="secondary"
81-
aria-label={t('notifications.clearAll')}
82-
onClick={handleClearAll}
83-
disabled={isLoading}>
84-
{t(clearAllKey)}
85-
</Button>
86-
)}
78+
<Stack gap={3} style={{ width: '100%' }}>
79+
<Stack
80+
direction="horizontal"
81+
gap={2}
82+
style={{ width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
83+
{totalPages >= 2 ? (
84+
<div>{t('notifications.displayingNotifications', { start, end, total })}</div>
85+
) : (
86+
<div /> /* placeholder to keep spacing when there's no range text */
87+
)}
8788

88-
<div className="ms-auto d-flex align-items-center gap-2"></div>
89-
</div>
89+
{notifications.length > 0 && (
90+
<Button
91+
size="sm"
92+
variant="secondary"
93+
aria-label={t(clearAllKey)}
94+
onClick={handleClearAll}
95+
disabled={isLoading}>
96+
{t(clearAllKey)}
97+
</Button>
98+
)}
99+
</Stack>
90100

91-
{notifications.length > 0 ? (
92-
<div className="d-flex flex-column gap-2">
93-
<div
94-
className={
95-
styles['range-info']
96-
}>{`Displaying ${start}-${end} of ${total} Notifications`}</div>
97-
98-
{notifications.map((notification) => {
99-
const isRead = notification.displayAsRead || readIds.includes(notification.id)
100-
return (
101-
<div
102-
className={`${styles['notification-item']} ${
103-
isRead ? styles['read'] : styles['unread']
104-
}`}
105-
key={notification.id}>
106-
<div>
107-
{getTranslatedNotification(notification, t)}
108-
<span className={styles['timestamp']}>{notification.sentTimestamp}</span>
101+
{notifications.length > 0 ? (
102+
<div className="d-flex flex-column gap-2">
103+
{notifications.map((notification) => {
104+
const isRead = notification.displayAsRead || readIds.includes(notification.id)
105+
return (
106+
<div
107+
className={`${styles['notification-item']} ${
108+
isRead ? styles['read'] : styles['unread']
109+
}`}
110+
key={notification.id}>
111+
<div>
112+
{getTranslatedNotification(notification, t)}
113+
<span className={styles['timestamp']}>{notification.sentTimestamp}</span>
114+
</div>
115+
<CloseButton
116+
onClick={async () => {
117+
await handleDelete(notification.id)
118+
}}
119+
aria-label={t('notifications.dismiss')}
120+
data-testid={`dismiss-notification-${notification.id}`}
121+
/>
109122
</div>
110-
<CloseButton
111-
onClick={async () => {
112-
await handleDelete(notification.id)
113-
}}
114-
aria-label={t('notifications.dismiss')}
115-
data-testid={`dismiss-notification-${notification.id}`}
116-
/>
117-
</div>
118-
)
119-
})}
120-
<PaginationControls
121-
initialPaginationInfo={paginationInfo}
122-
onPaginationInfoChange={setPaginationInfo}
123-
/>
124-
</div>
125-
) : (
126-
<div>{t('notifications.noNotifications')}</div>
127-
)}
123+
)
124+
})}
125+
<PaginationControls
126+
initialPaginationInfo={paginationInfo}
127+
onPaginationInfoChange={setPaginationInfo}
128+
/>
129+
</div>
130+
) : (
131+
<div>{t('notifications.noNotifications')}</div>
132+
)}
133+
</Stack>
128134
</section>
129135
)
130136
}

0 commit comments

Comments
 (0)