cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): refine global shell utilities

Browse Source
This commit is contained in:
cesnimda
2026-09-28 18:19:27 +02:00
parent 8e56ceabf5
commit 0f54007015
18 changed files with 322 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/components/NotificationsPopover.tsx
+33 -12
View File
@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useState } from "react";
import React, { useCallback, useEffect, useRef, useState } from "react";
import {
Alert,
@@ -34,59 +34,79 @@ export default function NotificationsPopover({ anchorEl, onClose, onNavigate, on
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [busyId, setBusyId] = useState<string | null>(null);
const activeLoad = useRef<AbortController | null>(null);
const openGeneration = useRef(0);
const load = useCallback(async () => {
activeLoad.current?.abort();
const controller = new AbortController();
activeLoad.current = controller;
setLoading(true);
try {
const response = await api.get<UserNotification[]>("/notifications?limit=10");
const response = await api.get<UserNotification[]>("/notifications?limit=10", { signal: controller.signal });
if (controller.signal.aborted) return;
setNotifications(response.data ?? []);
setError(null);
} catch (requestError) {
setError(getApiErrorMessage(requestError, t("notificationsLoadFailed")));
if (!controller.signal.aborted) setError(getApiErrorMessage(requestError, t("notificationsLoadFailed")));
} finally {
setLoading(false);
if (activeLoad.current === controller) setLoading(false);
}
}, [t]);
useEffect(() => {
openGeneration.current += 1;
if (open) void load();
else {
activeLoad.current?.abort();
setNotifications([]);
setError(null);
setBusyId(null);
}
return () => activeLoad.current?.abort();
}, [load, open]);
const markRead = async (notification: UserNotification) => {
if (notification.readAtUtc || busyId) return;
const generation = openGeneration.current;
setBusyId(notification.id);
try {
await api.post(`/notifications/${notification.id}/read`);
if (generation !== openGeneration.current) return;
setNotifications((items) => items.map((item) => item.id === notification.id
? { ...item, readAtUtc: new Date().toISOString() }
: item));
setError(null);
onChanged();
} catch (requestError) {
setError(getApiErrorMessage(requestError, t("notificationsActionFailed")));
if (generation === openGeneration.current) setError(getApiErrorMessage(requestError, t("notificationsActionFailed")));
} finally {
setBusyId(null);
if (generation === openGeneration.current) setBusyId(null);
}
};
const dismiss = async (notification: UserNotification) => {
if (busyId) return;
const generation = openGeneration.current;
setBusyId(notification.id);
try {
await api.delete(`/notifications/${notification.id}`);
if (generation !== openGeneration.current) return;
setNotifications((items) => items.filter((item) => item.id !== notification.id));
setError(null);
onChanged();
} catch (requestError) {
setError(getApiErrorMessage(requestError, t("notificationsActionFailed")));
if (generation === openGeneration.current) setError(getApiErrorMessage(requestError, t("notificationsActionFailed")));
} finally {
setBusyId(null);
if (generation === openGeneration.current) setBusyId(null);
}
};
const openNotification = async (notification: UserNotification) => {
if (!notification.linkPath) return;
const generation = openGeneration.current;
if (!notification.readAtUtc) await markRead(notification);
if (generation !== openGeneration.current) return;
onClose();
onNavigate(notification.linkPath);
};
@@ -113,7 +133,7 @@ export default function NotificationsPopover({ anchorEl, onClose, onNavigate, on
>
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ px: 2, py: 1.5 }}>
<Box>
<Typography sx={{ fontWeight: 900 }}>{t("notifications")}</Typography>
<Typography component="h2" sx={{ fontWeight: 700 }}>{t("notifications")}</Typography>
<Typography variant="caption" color="text.secondary">{t("notificationsRecent")}</Typography>
</Box>
<Tooltip title={t("close")}>
@@ -123,7 +143,7 @@ export default function NotificationsPopover({ anchorEl, onClose, onNavigate, on
<Divider />
<Box sx={{ overflowY: "auto", maxHeight: "min(52vh, 450px)", p: 1 }}>
{loading ? <Box sx={{ py: 4, display: "grid", placeItems: "center" }}><CircularProgress size={28} aria-label={t("loading")} /></Box> : null}
{loading ? <Box role="status" sx={{ py: 4, display: "grid", placeItems: "center" }}><CircularProgress size={28} aria-label={t("loading")} /></Box> : null}
{error ? <Alert severity="error" action={<Button color="inherit" size="small" onClick={() => void load()}>{t("retry")}</Button>} sx={{ m: 0.5 }}>{error}</Alert> : null}
{!loading && !error && notifications.length === 0 ? (
<Box sx={{ py: 4, px: 2, textAlign: "center" }}>
@@ -131,7 +151,7 @@ export default function NotificationsPopover({ anchorEl, onClose, onNavigate, on
<Typography variant="body2" color="text.secondary">{t("notificationsEmptyBody")}</Typography>
</Box>
) : null}
{!loading ? notifications.map((notification) => (
{!loading && !error ? notifications.map((notification) => (
<Box
key={notification.id}
sx={{
@@ -144,7 +164,8 @@ export default function NotificationsPopover({ anchorEl, onClose, onNavigate, on
opacity: notification.readAtUtc ? 0.82 : 1,
}}
>
<Typography sx={{ fontWeight: notification.readAtUtc ? 700 : 900, overflowWrap: "anywhere" }}>{notification.title}</Typography>
<Typography sx={{ fontWeight: notification.readAtUtc ? 600 : 700, overflowWrap: "anywhere" }}>{notification.title}</Typography>
{!notification.readAtUtc ? <Typography variant="caption" color="text.secondary">{t("notificationsUnread")}</Typography> : null}
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.25, overflowWrap: "anywhere" }}>{notification.message}</Typography>
<Typography variant="caption" color="text.secondary">{notificationDateLabel(notification.createdAtUtc)}</Typography>
<Stack direction="row" spacing={0.5} alignItems="center" sx={{ mt: 0.75, flexWrap: "wrap" }}>