+
diff --git a/src/frontend/src/pages/BulletinDetailsPage.scss b/src/frontend/src/pages/BulletinDetailsPage.scss
index 499a68485..cb83017d3 100644
--- a/src/frontend/src/pages/BulletinDetailsPage.scss
+++ b/src/frontend/src/pages/BulletinDetailsPage.scss
@@ -71,3 +71,40 @@
}
}
}
+
+.update-overlay {
+ position: fixed;
+ bottom: 24px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ background: #013366;
+ color: white;
+ border-radius: 4px;
+ padding: 12px 16px;
+ min-width: 280px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+
+ &__message {
+ flex: 1;
+ font-size: 0.95rem;
+ }
+
+ &__close {
+ background: none;
+ border: none;
+ color: white;
+ cursor: pointer;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ font-size: 1rem;
+
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+}
diff --git a/src/frontend/src/pages/BulletinsListPage.js b/src/frontend/src/pages/BulletinsListPage.js
index d60fffb67..7e4d968f2 100644
--- a/src/frontend/src/pages/BulletinsListPage.js
+++ b/src/frontend/src/pages/BulletinsListPage.js
@@ -1,6 +1,6 @@
// React
-import React, { useCallback, useContext, useEffect, useState, useRef } from 'react';
-import { useSearchParams } from "react-router-dom";
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+
// Redux
import { useSelector, useDispatch } from 'react-redux'
import { memoize } from 'proxy-memoize'
@@ -8,9 +8,8 @@ import { updateBulletins } from '../slices/cmsSlice';
// External imports
import Container from 'react-bootstrap/Container';
-
-// Styling
-import './BulletinsListPage.scss';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowUp, faArrowDown } from '@fortawesome/pro-regular-svg-icons';
// Internal imports
import { CMSContext } from '../App';
@@ -23,11 +22,13 @@ import EmptyBulletin from '../Components/bulletins/EmptyBulletin';
import Footer from '../Footer';
import PageHeader from '../PageHeader';
import PollingComponent from "../Components/shared/PollingComponent";
+import { useLocation } from "react-router-dom";
+
+// Styling
+import './BulletinsListPage.scss';
export default function BulletinsListPage() {
document.title = 'DriveBC - Bulletins';
- // const [searchParams] = useSearchParams();
- // const isPreview = searchParams.get("preview") === "true";
// Context
const { cmsContext, setCMSContext } = useContext(CMSContext);
@@ -38,61 +39,250 @@ export default function BulletinsListPage() {
bulletins: state.cms.bulletins.list,
}))));
+ // Refs
+ const isInitialLoad = useRef(true);
+ const bulletinRefs = useRef({});
+ const viewedHighlightedBulletins = useRef(new Set());
+ const bulletinsInViewport = useRef({});
+ const trackedBulletinsRef = useRef({});
+ const dismissedHighlightsRef = useRef(
+ new Set(JSON.parse(sessionStorage.getItem('dismissedBulletinHighlights') || '[]'))
+ );
+ const highlightedBeforeRefreshRef = useRef(
+ new Set(JSON.parse(sessionStorage.getItem('highlightedBulletins') || '[]'))
+ );
+
// States
+ const [showLoader, setShowLoader] = useState(true);
+ const [trackedBulletins, setTrackedBulletins] = useState({});
+ const [updateCounts, setUpdateCounts] = useState({ above: 0, below: 0 });
const [showNetworkError, setShowNetworkError] = useState(false);
const [showServerError, setShowServerError] = useState(false);
- const [showLoader, setShowLoader] = useState(true);
+ const cmsContextRef = useRef(cmsContext);
+ const bulletinsRef = useRef(bulletins);
+
+ const location = useLocation();
+ const isFirstMount = useRef(true);
// Error handling
const displayError = (error) => {
if (error instanceof ServerError) {
setShowServerError(true);
-
} else if (error instanceof NetworkError) {
setShowNetworkError(true);
}
}
- // Refs
- const isInitialMount = useRef(true);
+// const dismissHighlight = (bulletinId) => {
+// dismissedHighlightsRef.current.add(String(bulletinId));
+// sessionStorage.setItem(
+// 'dismissedHighlights',
+// JSON.stringify([...dismissedHighlightsRef.current])
+// );
+// highlightedBeforeRefreshRef.current.delete(String(bulletinId));
+// sessionStorage.setItem(
+// 'highlightedBulletins',
+// JSON.stringify([...highlightedBeforeRefreshRef.current])
+// );
+
+// // Use refs to avoid stale closure
+// const bulletin = bulletinsRef.current?.find(
+// b => String(b.id) === String(bulletinId)
+// );
+// if (bulletin) {
+// markBulletinsAsRead([bulletin], cmsContextRef.current, setCMSContext);
+// }
+
+// // Also clear from trackedBulletins state directly
+// trackedBulletinsRef.current = {
+// ...trackedBulletinsRef.current,
+// [bulletinId]: {
+// ...trackedBulletinsRef.current[bulletinId],
+// highlight: false,
+// }
+// };
+// setTrackedBulletins({ ...trackedBulletinsRef.current });
+// };
+
+ const dismissHighlight = (bulletinId) => {
+ dismissedHighlightsRef.current.add(String(bulletinId));
+ sessionStorage.setItem(
+ 'dismissedHighlights',
+ JSON.stringify([...dismissedHighlightsRef.current])
+ );
+ highlightedBeforeRefreshRef.current.delete(String(bulletinId));
+ sessionStorage.setItem(
+ 'highlightedBulletins',
+ JSON.stringify([...highlightedBeforeRefreshRef.current])
+ );
+
+ const bulletin = bulletinsRef.current?.find(
+ b => String(b.id) === String(bulletinId)
+ );
+ if (bulletin) {
+ markBulletinsAsRead([bulletin], cmsContextRef.current, setCMSContext);
+ }
+
+ trackedBulletinsRef.current = {
+ ...trackedBulletinsRef.current,
+ [bulletinId]: {
+ ...trackedBulletinsRef.current[bulletinId],
+ highlight: false,
+ }
+ };
+ setTrackedBulletins({ ...trackedBulletinsRef.current });
+ };
+
+
+
// Data loading
const loadBulletins = async () => {
- // Skip loading if the bulletins are already loaded on launch
- if (bulletins && isInitialMount.current) {
- isInitialMount.current = false;
- setShowLoader(false);
- return;
- }
+ const bulletinsData = await getBulletins().catch((error) => displayError(error));
+ if (!bulletinsData) return;
- let bulletinsData = bulletins;
- if (!bulletinsData) {
- bulletinsData = await getBulletins().catch((error) => displayError(error));
+ const currentContext = cmsContextRef.current;
- dispatch(updateBulletins({
- list: bulletinsData,
- timeStamp: new Date().getTime()
- }));
- }
+ const trackedDict = bulletinsData.reduce((acc, bulletin) => {
+ const tracked = trackedBulletinsRef.current[bulletin.id] ?? null;
+ const isDismissed = dismissedHighlightsRef.current.has(String(bulletin.id));
+ const wasHighlighted = highlightedBeforeRefreshRef.current.has(String(bulletin.id));
+ const notificationChanged = tracked !== null && bulletin.last_notified_at !== tracked.last_notified_at;
- isInitialMount.current = false;
- markBulletinsAsRead(bulletinsData, cmsContext, setCMSContext);
+ if (notificationChanged) {
+ dismissedHighlightsRef.current.delete(String(bulletin.id));
+ sessionStorage.setItem('dismissedBulletinHighlights', JSON.stringify([...dismissedHighlightsRef.current]));
+ }
+
+ const isUnread = bulletin.last_notified_at &&
+ !isDismissed &&
+ !currentContext.readBulletins.includes(
+ bulletin.id.toString() + '-' + bulletin.last_notified_at.toString()
+ );
+
+ acc[bulletin.id] = {
+ highlight: isDismissed
+ ? false
+ : tracked !== null
+ ? notificationChanged || tracked.highlight
+ : wasHighlighted || Boolean(isUnread),
+ live_revision: bulletin.live_revision,
+ last_notified_at: bulletin.last_notified_at,
+ };
+ return acc;
+ }, {});
+
+ const highlightedIds = Object.entries(trackedDict)
+ .filter(([, v]) => v.highlight)
+ .map(([id]) => id);
+ sessionStorage.setItem('highlightedBulletins', JSON.stringify(highlightedIds));
+ highlightedBeforeRefreshRef.current = new Set(highlightedIds);
+
+ trackedBulletinsRef.current = {
+ ...trackedBulletinsRef.current,
+ ...trackedDict,
+ };
+ setTrackedBulletins({ ...trackedBulletinsRef.current });
+
+ dispatch(updateBulletins({
+ list: bulletinsData,
+ timeStamp: new Date().getTime()
+ }));
+
+ // ❌ REMOVED: markBulletinsAsRead(bulletinsData, cmsContext, setCMSContext);
+
+ isInitialLoad.current = false;
setShowLoader(false);
}
useEffect(() => {
+ cmsContextRef.current = cmsContext;
+
+ if (isFirstMount.current) {
+ isFirstMount.current = false;
+ loadBulletins();
+ return;
+ }
+ trackedBulletinsRef.current = {};
+ viewedHighlightedBulletins.current = new Set();
loadBulletins();
- }, [showLoader]);
+ }, [location.key, cmsContext]);
+
+ // Intersection observer
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ const bulletinId = entry.target.getAttribute('data-key');
+ const isHighlighted = trackedBulletins[bulletinId]?.highlight;
+
+ if (entry.isIntersecting) {
+ bulletinsInViewport.current[bulletinId] = null;
+ if (isHighlighted && !viewedHighlightedBulletins.current.has(bulletinId)) {
+ viewedHighlightedBulletins.current.add(bulletinId);
+ }
+ } else {
+ delete bulletinsInViewport.current[bulletinId];
+ }
+ });
+
+ // Count highlighted items above/below viewport
+ const counts = { above: 0, below: 0 };
+ Object.entries(bulletinRefs.current).forEach(([id, ref]) => {
+ const isHighlighted = trackedBulletins[id]?.highlight;
+ if (!ref || !isHighlighted || viewedHighlightedBulletins.current.has(id)) return;
+ const top = ref.getBoundingClientRect().top;
+ top < 0 ? counts.above++ : counts.below++;
+ });
+ setUpdateCounts(counts);
+ },
+ { rootMargin: '-58px 0px 0px 0px', threshold: 1 }
+ );
+
+ setTimeout(() => {
+ Object.values(bulletinRefs.current).forEach((ref) => {
+ if (ref) observer.observe(ref);
+ });
+ }, 0);
+
+ return () => observer.disconnect();
+ }, [bulletins, trackedBulletins]);
+
+useEffect(() => {
+ bulletinsRef.current = bulletins;
+}, [bulletins]);
+
+ const scrollToNextHighlightedHandler = (direction) => {
+ const offset = 58 + 48;
+ const sortedRefs = Object.entries(bulletinRefs.current)
+ .filter(([id]) => trackedBulletins[id]?.highlight && !viewedHighlightedBulletins.current.has(id))
+ .map(([id, ref]) => ({
+ id,
+ top: Math.floor(ref.getBoundingClientRect().top + window.scrollY - offset)
+ }))
+ .sort((a, b) => a.top - b.top);
+
+ const currentScroll = Math.floor(window.scrollY);
+ let nextTop;
+
+ if (direction === 'above') {
+ nextTop = sortedRefs.reverse().find(r => r.top < currentScroll)?.top;
+ } else {
+ nextTop = sortedRefs.find(r => r.top > currentScroll)?.top;
+ }
+
+ if (nextTop !== undefined) {
+ document.querySelector('#main')?.scrollTo({ top: nextTop, behavior: 'smooth' });
+ }
+ };
const isBulletinsEmpty = bulletins?.length === 0;
return (
{ if (advisoryRefs) advisoryRefs.current[advisory.id] = el; }}
+ >
diff --git a/src/frontend/src/pages/AdvisoriesListPage.js b/src/frontend/src/pages/AdvisoriesListPage.js
index 15fd27722..f84e68431 100644
--- a/src/frontend/src/pages/AdvisoriesListPage.js
+++ b/src/frontend/src/pages/AdvisoriesListPage.js
@@ -1,6 +1,6 @@
// React
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams, useLocation } from "react-router-dom";
// Redux
import { useSelector, useDispatch } from 'react-redux'
@@ -9,6 +9,8 @@ import { updateAdvisories } from '../slices/cmsSlice';
// External imports
import Container from 'react-bootstrap/Container';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowUp, faArrowDown } from '@fortawesome/pro-regular-svg-icons';
// Internal imports
import { CMSContext } from '../App';
@@ -31,7 +33,6 @@ export default function AdvisoriesListPage() {
// Context
const { cmsContext, setCMSContext } = useContext(CMSContext);
- const [showLoader, setShowLoader] = useState(true);
// Redux
const dispatch = useDispatch();
@@ -42,58 +43,239 @@ export default function AdvisoriesListPage() {
// Refs
const isInitialMount = useRef(true);
+ const isInitialLoad = useRef(true);
+ const advisoryRefs = useRef({});
+ const viewedHighlightedAdvisories = useRef(new Set());
+ const advisoriesInViewport = useRef({});
// States
+ const [showLoader, setShowLoader] = useState(true);
+ const [trackedAdvisories, setTrackedAdvisories] = useState({});
+ const [updateCounts, setUpdateCounts] = useState({ above: 0, below: 0 });
const [showNetworkError, setShowNetworkError] = useState(false);
const [showServerError, setShowServerError] = useState(false);
+ const trackedAdvisoriesRef = useRef({});
+ const dismissedHighlightsRef = useRef(
+ new Set(JSON.parse(sessionStorage.getItem('dismissedHighlights') || '[]'))
+ );
+ const location = useLocation();
+ const isFirstMount = useRef(true);
+ const dismissHighlight = (advisoryId) => {
+ dismissedHighlightsRef.current.add(String(advisoryId));
+ sessionStorage.setItem(
+ 'dismissedHighlights',
+ JSON.stringify([...dismissedHighlightsRef.current])
+ );
+ highlightedBeforeRefreshRef.current.delete(String(advisoryId));
+ sessionStorage.setItem(
+ 'highlightedAdvisories',
+ JSON.stringify([...highlightedBeforeRefreshRef.current])
+ );
+
+ const advisory = advisoriesRef.current?.find(
+ a => String(a.id) === String(advisoryId)
+ );
+ if (advisory) {
+ markAdvisoriesAsRead([advisory], cmsContextRef.current, setCMSContext);
+ }
+
+ trackedAdvisoriesRef.current = {
+ ...trackedAdvisoriesRef.current,
+ [advisoryId]: {
+ ...trackedAdvisoriesRef.current[advisoryId],
+ highlight: false,
+ }
+ };
+ setTrackedAdvisories({ ...trackedAdvisoriesRef.current });
+ };
+
+ const highlightedBeforeRefreshRef = useRef(
+ new Set(JSON.parse(sessionStorage.getItem('highlightedAdvisories') || '[]'))
+ );
+
+ const cmsContextRef = useRef(cmsContext);
+ const advisoriesRef = useRef(advisories);
// Error handling
const displayError = (error) => {
if (error instanceof ServerError) {
setShowServerError(true);
-
} else if (error instanceof NetworkError) {
setShowNetworkError(true);
}
}
- // Data loading
- const loadAdvisories = async () => {
- // Skip loading if the advisories are already loaded on launch
- if (advisories && isInitialMount.current) {
- isInitialMount.current = false;
- setShowLoader(false);
- return;
+const loadAdvisories = async () => {
+ const advisoriesData = await getAdvisories().catch((error) => displayError(error));
+ if (!advisoriesData) return;
+
+ // Use the latest context directly from the ref
+ const currentContext = cmsContextRef.current;
+
+ const trackedDict = advisoriesData.reduce((acc, advisory) => {
+ const tracked = trackedAdvisoriesRef.current[advisory.id] ?? null;
+ const isDismissed = dismissedHighlightsRef.current.has(String(advisory.id));
+ const wasHighlighted = highlightedBeforeRefreshRef.current.has(String(advisory.id));
+ const notificationChanged = tracked !== null && advisory.last_notified_at !== tracked.last_notified_at;
+
+ if (notificationChanged) {
+ dismissedHighlightsRef.current.delete(String(advisory.id));
+ sessionStorage.setItem('dismissedHighlights', JSON.stringify([...dismissedHighlightsRef.current]));
}
- const advisoriesData = await getAdvisories().catch((error) => displayError(error));
- const filteredAdvisoriesData = selectedRoute ? filterAdvisoryByRoute(advisoriesData, selectedRoute) : advisoriesData;
- dispatch(updateAdvisories({
- list: advisoriesData,
- filteredList: filteredAdvisoriesData,
- timeStamp: new Date().getTime()
- }));
+ const isUnread = advisory.last_notified_at &&
+ !isDismissed &&
+ !currentContext.readAdvisories.includes(
+ advisory.id.toString() + '-' + advisory.last_notified_at.toString()
+ );
- markAdvisoriesAsRead(filteredAdvisoriesData, cmsContext, setCMSContext);
+ acc[advisory.id] = {
+ highlight: isDismissed
+ ? false
+ : tracked !== null
+ ? notificationChanged || tracked.highlight
+ : wasHighlighted || Boolean(isUnread),
+ live_revision: advisory.live_revision,
+ last_notified_at: advisory.last_notified_at,
+ };
+ return acc;
+ }, {});
+
+ trackedAdvisoriesRef.current = {
+ ...trackedAdvisoriesRef.current,
+ ...trackedDict,
+ };
+ setTrackedAdvisories({ ...trackedAdvisoriesRef.current });
+
+ const highlightedIds = Object.entries(trackedDict)
+ .filter(([, v]) => v.highlight)
+ .map(([id]) => id);
+ sessionStorage.setItem('highlightedAdvisories', JSON.stringify(highlightedIds));
+ highlightedBeforeRefreshRef.current = new Set(highlightedIds);
+
+ const filteredAdvisoriesData = selectedRoute
+ ? filterAdvisoryByRoute(advisoriesData, selectedRoute)
+ : advisoriesData;
+
+ dispatch(updateAdvisories({
+ list: advisoriesData,
+ filteredList: filteredAdvisoriesData,
+ timeStamp: new Date().getTime()
+ }));
+
+ isInitialLoad.current = false;
+ isInitialMount.current = false;
+ setShowLoader(false);
+}
- isInitialMount.current = false;
- setShowLoader(false);
- }
useEffect(() => {
+ // Sync ref BEFORE loading so loadAdvisories sees current readAdvisories
+ cmsContextRef.current = cmsContext;
+
+ if (isFirstMount.current) {
+ isFirstMount.current = false;
loadAdvisories();
- }, [showLoader]);
+ return;
+ }
+ // User navigated back — reset so highlights are recalculated fresh
+ trackedAdvisoriesRef.current = {};
+ viewedHighlightedAdvisories.current = new Set();
+ loadAdvisories();
+}, [location.key, cmsContext]);
+
+ // Intersection observer — scroll position + highlight clearing (mirrors Delays pattern)
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ const advisoryId = entry.target.getAttribute('data-key');
+ const isHighlighted = trackedAdvisories[advisoryId]?.highlight;
+
+ if (entry.isIntersecting) {
+ advisoriesInViewport.current[advisoryId] = null;
+ if (isHighlighted && !viewedHighlightedAdvisories.current.has(advisoryId)) {
+ viewedHighlightedAdvisories.current.add(advisoryId);
+ }
+ } else {
+ // delete advisoriesInViewport.current[advisoryId];
+ // if (isHighlighted && viewedHighlightedAdvisories.current.has(advisoryId)) {
+ // viewedHighlightedAdvisories.current.delete(advisoryId);
+ // // updateHighlightHandler({ id: advisoryId, highlight: false });
+ // }
+ delete advisoriesInViewport.current[advisoryId];
+ }
+ });
+
+ // Count highlighted items above/below viewport
+ const counts = { above: 0, below: 0 };
+ Object.entries(advisoryRefs.current).forEach(([id, ref]) => {
+ const isHighlighted = trackedAdvisories[id]?.highlight;
+ if (!ref || !isHighlighted || viewedHighlightedAdvisories.current.has(id)) return;
+ const top = ref.getBoundingClientRect().top;
+ top < 0 ? counts.above++ : counts.below++;
+ });
+ setUpdateCounts(counts);
+ },
+ { rootMargin: '-58px 0px 0px 0px', threshold: 1 }
+ );
+
+ setTimeout(() => {
+ Object.values(advisoryRefs.current).forEach((ref) => {
+ if (ref) observer.observe(ref);
+ });
+ }, 0);
+
+ return () => observer.disconnect();
+ }, [advisories, trackedAdvisories]);
+
+ useEffect(() => {
+ cmsContextRef.current = cmsContext;
+}, [cmsContext]);
+
+useEffect(() => {
+ advisoriesRef.current = advisories;
+}, [advisories]);
+
+ // Handlers
+ const updateHighlightHandler = (updated) => {
+ setTrackedAdvisories((prev) => ({
+ ...prev,
+ [updated.id]: { ...prev[updated.id], highlight: updated.highlight }
+ }));
+ };
+
+ const scrollToNextHighlightedHandler = (direction) => {
+ const offset = 58 + 48;
+ const sortedRefs = Object.entries(advisoryRefs.current)
+ .filter(([id, ref]) => trackedAdvisories[id]?.highlight && !viewedHighlightedAdvisories.current.has(id))
+ .map(([id, ref]) => ({
+ id,
+ top: Math.floor(ref.getBoundingClientRect().top + window.scrollY - offset)
+ }))
+ .sort((a, b) => a.top - b.top);
+
+ const currentScroll = Math.floor(window.scrollY);
+ let nextTop;
+
+ if (direction === 'above') {
+ nextTop = sortedRefs.reverse().find(r => r.top < currentScroll)?.top;
+ } else {
+ nextTop = sortedRefs.find(r => r.top > currentScroll)?.top;
+ }
+
+ if (nextTop !== undefined) {
+ document.querySelector('#main')?.scrollTo({ top: nextTop, behavior: 'smooth' });
+ }
+ };
const isAdvisoriesEmpty = advisories?.length === 0;
return (
diff --git a/src/frontend/src/pages/AdvisoryDetailsPage.scss b/src/frontend/src/pages/AdvisoryDetailsPage.scss
index 4a99babf2..32f3e590d 100644
--- a/src/frontend/src/pages/AdvisoryDetailsPage.scss
+++ b/src/frontend/src/pages/AdvisoryDetailsPage.scss
@@ -177,3 +177,40 @@
border-radius: 4px;
font-weight: bold;
}
+
+.update-overlay {
+ position: fixed;
+ bottom: 24px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ background: #013366;
+ color: white;
+ border-radius: 4px;
+ padding: 12px 16px;
+ min-width: 280px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+
+ &__message {
+ flex: 1;
+ font-size: 0.95rem;
+ }
+
+ &__close {
+ background: none;
+ border: none;
+ color: white;
+ cursor: pointer;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ font-size: 1rem;
+
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+}
diff --git a/src/frontend/src/pages/BulletinDetailsPage.js b/src/frontend/src/pages/BulletinDetailsPage.js
index 475fbcf73..3a358f840 100644
--- a/src/frontend/src/pages/BulletinDetailsPage.js
+++ b/src/frontend/src/pages/BulletinDetailsPage.js
@@ -1,5 +1,5 @@
// React
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, useRef } from 'react';
// Navigation
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
@@ -8,7 +8,8 @@ import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
- faArrowLeft
+ faArrowLeft,
+ faXmark
} from '@fortawesome/pro-solid-svg-icons';
import Skeleton from 'react-loading-skeleton';
@@ -22,6 +23,7 @@ import Footer from '../Footer.js';
import FriendlyTime from '../Components/shared/FriendlyTime';
import renderWagtailBody from '../Components/shared/renderWagtailBody.js';
import ShareURLButton from '../Components/shared/ShareURLButton';
+import PollingComponent from "../Components/shared/PollingComponent";
// Styling
import './BulletinDetailsPage.scss';
@@ -50,6 +52,11 @@ export default function BulletinDetailsPage() {
const [searchParams] = useSearchParams();
const isPreview = searchParams.get("preview") === "true";
+ const [showUpdateOverlay, setShowUpdateOverlay] = useState(false);
+ const initialNotifiedAt = useRef(null);
+ const dismissedNotifiedAt = useRef(null);
+ const [latestNotifiedAt, setLatestNotifiedAt] = useState(null);
+ const currentRevision = useRef(null);
// Error handling
const displayError = (error) => {
@@ -66,6 +73,41 @@ export default function BulletinDetailsPage() {
navigate(-1);
};
+ const checkForUpdates = async () => {
+ try {
+ const latestData = await getBulletins(params.id);
+
+ if (!latestData) return;
+
+ // Detect any publish (major or minor)
+ const contentChanged =
+ latestData.live_revision !== currentRevision.current;
+
+ if (contentChanged) {
+ setBulletin(latestData);
+
+ currentRevision.current = latestData.live_revision;
+
+ document.title = `DriveBC - Bulletins - ${latestData.title}`;
+ }
+
+ // Detect major update only
+ const latestNotified = latestData.last_notified_at;
+
+ if (
+ latestNotified &&
+ latestNotified !== initialNotifiedAt.current &&
+ latestNotified !== dismissedNotifiedAt.current
+ ) {
+ setLatestNotifiedAt(latestNotified);
+ initialNotifiedAt.current = latestNotified;
+ setShowUpdateOverlay(true);
+ }
+ } catch (error) {
+ // silently ignore
+ }
+ };
+
// Data function and initialization
const loadBulletin = async () => {
const bulletinData = await (isPreview ? getBulletinsPreview(params.id) : getBulletins(params.id)).catch((error) => {
@@ -81,6 +123,8 @@ export default function BulletinDetailsPage() {
// Combine and remove duplicates
if (bulletinData.id) {
+ initialNotifiedAt.current = bulletinData.last_notified_at;
+ currentRevision.current = bulletinData.live_revision;
const readBulletins = Array.from(new Set([
...cmsContext.readBulletins,
bulletinData.id.toString() + '-' + ((bulletinData.live_revision != null) ? bulletinData.live_revision.toString() : '')
@@ -107,6 +151,24 @@ export default function BulletinDetailsPage() {
// Rendering
return (
:
@@ -95,8 +110,11 @@ export default function AdvisoriesList(props) {
- {advisory.first_published_at != advisory.last_published_at ? "Updated" : "Published" }
-
}
Updated
+ }
- {advisory.first_published_at != advisory.last_published_at ? "Updated" : "Published"}
-
+ {advisory.last_notified_at != advisory.first_published_at ? "Updated" : "Published"}
+
+ {trackedAdvisories[advisory.id]?.highlight &&
+
}
@@ -122,7 +140,8 @@ export default function AdvisoriesList(props) {
} else {
return (
- Updated
+ }
handleClick(advisory)}
onKeyDown={(keyEvent) => handleClick(advisory, keyEvent)}
@@ -139,8 +158,11 @@ export default function AdvisoriesList(props) {
{(showTimestamp && showPublished) &&
diff --git a/src/frontend/src/Components/bulletins/BulletinsList.js b/src/frontend/src/Components/bulletins/BulletinsList.js
index 792f7e9b4..ec81344d9 100644
--- a/src/frontend/src/Components/bulletins/BulletinsList.js
+++ b/src/frontend/src/Components/bulletins/BulletinsList.js
@@ -16,15 +16,16 @@ import Skeleton from 'react-loading-skeleton';
// Static files
import logo from '../../images/dbc-logo--white.svg';
-export default function Bulletins(props) {
- // State, props and context
- const { bulletins, showLoader } = props;
+export default function BulletinsList(props) {
+ // Props
+ const { bulletins, showLoader, trackedBulletins = {}, bulletinRefs, dismissHighlight } = props;
// Navigation
const navigate = useNavigate();
function handleClick(bulletin) {
trackEvent('click', 'bulletins-list', 'Bulletin', bulletin.title, bulletin.teaser);
+ if (dismissHighlight) dismissHighlight(bulletin.id);
navigate(`/bulletins/${bulletin.slug}`);
}
@@ -33,9 +34,14 @@ export default function Bulletins(props) {
// Rendering
return (
{!cmsContext.readAdvisories.includes(advisory.id.toString() + '-' + advisory.live_revision.toString()) && }
- {advisory.first_published_at != advisory.last_published_at ? "Updated" : "Published" }
-
}
@@ -165,7 +187,10 @@ export default function AdvisoriesList(props) {
{showTimestamp &&
Updated
+ }
{advisory.first_published_at != advisory.last_published_at ? "Updated" : "Published" }
-
}
Updated
+ }
-
- {!!sortedBulletins && sortedBulletins.map((bulletin, index) => {
+ {!!sortedBulletins && sortedBulletins.map((bulletin) => {
return (
-
- handleClick(bulletin)} +
- { if (bulletinRefs) bulletinRefs.current[bulletin.id] = el; }}
+ onClick={() => handleClick(bulletin)}
onKeyDown={(keyEvent) => {
if (['Enter', 'NumpadEnter'].includes(keyEvent.key)) {
handleClick(bulletin);
@@ -45,7 +51,6 @@ export default function Bulletins(props) {
{showLoader ?@@ -74,7 +82,6 @@ export default function Bulletins(props) {
: -{bulletin.title}
} @@ -54,7 +59,6 @@ export default function Bulletins(props) {: - (bulletin.teaser && {bulletin.teaser}) @@ -62,10 +66,14 @@ export default function Bulletins(props) { {showLoader ?
: -- {bulletin.first_published_at != bulletin.last_published_at ? 'Updated' : 'Published' } -}+ + {bulletin.first_published_at != bulletin.last_notified_at ? 'Updated' : 'Published'} + + + {trackedBulletins[bulletin.id]?.highlight && + Updated+ }{showLoader ?diff --git a/src/frontend/src/Components/data/advisories.js b/src/frontend/src/Components/data/advisories.js index 1954addf1..230c4b10e 100644 --- a/src/frontend/src/Components/data/advisories.js +++ b/src/frontend/src/Components/data/advisories.js @@ -24,14 +24,28 @@ export const getAdvisoryCounts = (advisories) => { } } -export const markAdvisoriesAsRead = (advisoriesData, cmsContext, setCMSContext) => { - if (advisoriesData && advisoriesData.length > 0 && !advisoriesData[0].live_revision) return; - const advisoriesIds = advisoriesData.map(advisory => advisory.id.toString() + '-' + advisory.live_revision.toString()); +// export const markAdvisoriesAsRead = (advisories, cmsContext, setCMSContext) => { +// const newRead = advisories +// .filter(a => a.id && a.last_notified_at) +// .map(a => a.id.toString() + '-' + a.last_notified_at.toString()); - // Combine and remove duplicates - const readAdvisories = Array.from(new Set([...advisoriesIds, ...cmsContext.readAdvisories])); - const updatedContext = {...cmsContext, readAdvisories: readAdvisories}; +// const merged = [...new Set([...cmsContext.readAdvisories, ...newRead])]; +// setCMSContext(prev => ({ ...prev, readAdvisories: merged })); +// } - setCMSContext(updatedContext); - localStorage.setItem('cmsContext', JSON.stringify(updatedContext)); -} +export const markAdvisoriesAsRead = (advisories, cmsContext, setCMSContext) => { + if (!advisories) return; + + const newRead = advisories + .filter(a => a.id && a.last_notified_at) + .map(a => a.id.toString() + '-' + a.last_notified_at.toString()); + + if (newRead.length === 0) return; + + const merged = [...new Set([...cmsContext.readAdvisories, ...newRead])]; + + // Only update if something actually changed + if (merged.length !== cmsContext.readAdvisories.length) { + setCMSContext(prev => ({ ...prev, readAdvisories: merged })); + } +} \ No newline at end of file diff --git a/src/frontend/src/Components/data/bulletins.js b/src/frontend/src/Components/data/bulletins.js index 51129f734..0c025c1b3 100644 --- a/src/frontend/src/Components/data/bulletins.js +++ b/src/frontend/src/Components/data/bulletins.js @@ -17,14 +17,19 @@ export function getBulletinsPreview(id) { }); } -export function markBulletinsAsRead(bulletinsData, cmsContext, setCMSContext) { - if (bulletinsData && bulletinsData.length > 0 && !bulletinsData[0].live_revision) return; - const bulletinsIds = bulletinsData.map(bulletin => bulletin.id.toString() + '-' + bulletin.live_revision.toString()); +export const markBulletinsAsRead = (bulletins, cmsContext, setCMSContext) => { + if (!bulletins) return; - // Combine and remove duplicates - const readBulletins = Array.from(new Set([...bulletinsIds, ...cmsContext.readBulletins])); - const updatedContext = {...cmsContext, readBulletins: readBulletins}; + const newRead = bulletins + .filter(b => b.id && b.last_notified_at) + .map(b => b.id.toString() + '-' + b.last_notified_at.toString()); - setCMSContext(updatedContext); - localStorage.setItem('cmsContext', JSON.stringify(updatedContext)); -} + if (newRead.length === 0) return; + + const merged = [...new Set([...cmsContext.readBulletins, ...newRead])]; + + // Only update if something actually changed + if (merged.length !== cmsContext.readBulletins.length) { + setCMSContext(prev => ({ ...prev, readBulletins: merged })); + } +} \ No newline at end of file diff --git a/src/frontend/src/Components/shared/header/Header.js b/src/frontend/src/Components/shared/header/Header.js index 490ad729c..f51c2e54b 100644 --- a/src/frontend/src/Components/shared/header/Header.js +++ b/src/frontend/src/Components/shared/header/Header.js @@ -40,7 +40,7 @@ export default function Header({ isMaintenance }) { if (isMaintenance) { return ( -: - }
{/* Added class here */} + @@ -48,7 +48,6 @@ export default function Header({ isMaintenance }) {
- setShowLoader(true)} interval={30000} />
-
- {showNetworkError &&
-
{isAdvisoriesEmpty ?
-
+ {updateCounts.above > 0 &&
+
+ }
+ {updateCounts.below > 0 &&
+
+ }
+
);
-}
+}
\ No newline at end of file
diff --git a/src/frontend/src/pages/AdvisoriesListPage.scss b/src/frontend/src/pages/AdvisoriesListPage.scss
index fca1f8bf3..b13309233 100644
--- a/src/frontend/src/pages/AdvisoriesListPage.scss
+++ b/src/frontend/src/pages/AdvisoriesListPage.scss
@@ -201,3 +201,45 @@
}
}
}
+
+
+// Highlighted row
+.advisory-li.highlighted {
+ background-color: var(--highlighted-row-bg, #fff8e1);
+ border-left: 3px solid var(--colour-primary, #003366);
+ transition: background-color 0.3s ease;
+}
+
+// "Updated" pill — reuse same class as EventsTable
+.updated-pill {
+ display: inline-flex;
+ align-items: center;
+ padding: 2px 8px;
+ border-radius: 12px;
+ background-color: var(--colour-primary, #003366);
+ color: #fff;
+ font-size: 0.75rem;
+ font-weight: 600;
+ margin-left: 8px;
+}
+
+// Floating scroll pills — reuse same class as EventsListPage
+.update-count-pill {
+ position: fixed;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: var(--colour-primary, #003366);
+ color: #fff;
+ border: none;
+ border-radius: 20px;
+ padding: 8px 16px;
+ font-size: 0.875rem;
+ cursor: pointer;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &.top { top: 80px; }
+ &.bottom { bottom: 24px; }
+}
\ No newline at end of file
diff --git a/src/frontend/src/pages/AdvisoryDetailsPage.js b/src/frontend/src/pages/AdvisoryDetailsPage.js
index 12f0b617b..82997296b 100644
--- a/src/frontend/src/pages/AdvisoryDetailsPage.js
+++ b/src/frontend/src/pages/AdvisoryDetailsPage.js
@@ -31,6 +31,7 @@ import overrides from '../Components/map/overrides.js';
import { faAttributionToggleLabel } from '../Components/map/attributionControlLabels.js';
import ShareURLButton from '../Components/shared/ShareURLButton';
import { BASE_MAP, MAP_STYLE } from '../env';
+import PollingComponent from "../Components/shared/PollingComponent";
// Styling
import './AdvisoryDetailsPage.scss';
@@ -200,6 +201,11 @@ export default function AdvisoryDetailsPage() {
const [showNetworkError, setShowNetworkError] = useState(false);
const [showServerError, setShowServerError] = useState(false);
const [showLoader, setShowLoader] = useState(true);
+ const [showUpdateOverlay, setShowUpdateOverlay] = useState(false);
+ const initialNotifiedAt = useRef(null);
+ const dismissedNotifiedAt = useRef(null);
+ const [latestNotifiedAt, setLatestNotifiedAt] = useState(null);
+ const currentRevision = useRef(null);
// Navigating to
const returnHandler = () => {
@@ -230,7 +236,45 @@ export default function AdvisoryDetailsPage() {
});
}
- // Data function and initialization
+ const checkForUpdates = async () => {
+ try {
+ const latestData = await getAdvisories(params.id);
+
+ if (!latestData) return;
+
+ // Detect any publish (major or minor)
+ const contentChanged =
+ latestData.live_revision !== currentRevision.current;
+
+ if (contentChanged) {
+ setAdvisory(latestData);
+
+ currentRevision.current = latestData.live_revision;
+
+ if (latestData.geometry && mapRef.current) {
+ fitMap(latestData);
+ }
+
+ document.title = `DriveBC - Advisories - ${latestData.title}`;
+ }
+
+ // Detect major update only
+ const latestNotified = latestData.last_notified_at;
+
+ if (
+ latestNotified &&
+ latestNotified !== initialNotifiedAt.current &&
+ latestNotified !== dismissedNotifiedAt.current
+ ) {
+ setLatestNotifiedAt(latestNotified);
+ initialNotifiedAt.current = latestNotified;
+ setShowUpdateOverlay(true);
+ }
+ } catch (error) {
+ // silently ignore
+ }
+ };
+
const loadAdvisory = async () => {
let advisoryData;
@@ -247,6 +291,9 @@ export default function AdvisoryDetailsPage() {
setAdvisory(advisoryData);
if (advisoryData.id) {
+ initialNotifiedAt.current = advisoryData.last_notified_at;
+ currentRevision.current = advisoryData.live_revision;
+
if (!mapRef.current) {
mapRef.current = getMap(advisoryData);
}
@@ -287,6 +334,23 @@ export default function AdvisoryDetailsPage() {
// Rendering
return (
+ {showUpdateOverlay && (
+
+
+ Advisory updated just now
+
+
+
+ )}
+
+ {showUpdateOverlay && (
+
+
+ Bulletin updated just now
+
+
+
+ )}
+
- setShowLoader(true)} interval={30000} />
- {showNetworkError &&
-
{isBulletinsEmpty ?
-
+ {updateCounts.above > 0 &&
+
+ }
+ {updateCounts.below > 0 &&
+
+ }
+
);
-}
+}
\ No newline at end of file
diff --git a/src/frontend/src/pages/BulletinsListPage.scss b/src/frontend/src/pages/BulletinsListPage.scss
index d025bc117..50f78e539 100644
--- a/src/frontend/src/pages/BulletinsListPage.scss
+++ b/src/frontend/src/pages/BulletinsListPage.scss
@@ -122,3 +122,44 @@
}
}
}
+
+// Highlighted row
+.bulletin-li.highlighted {
+ background-color: var(--highlighted-row-bg, #fff8e1);
+ border-left: 3px solid var(--colour-primary, #003366);
+ transition: background-color 0.3s ease;
+}
+
+// "Updated" pill — reuse same class as EventsTable
+.updated-pill {
+ display: inline-flex;
+ align-items: center;
+ padding: 2px 8px;
+ border-radius: 12px;
+ background-color: var(--colour-primary, #003366);
+ color: #fff;
+ font-size: 0.75rem;
+ font-weight: 600;
+ margin-left: 8px;
+}
+
+// Floating scroll pills — reuse same class as EventsListPage
+.update-count-pill {
+ position: fixed;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: var(--colour-primary, #003366);
+ color: #fff;
+ border: none;
+ border-radius: 20px;
+ padding: 8px 16px;
+ font-size: 0.875rem;
+ cursor: pointer;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &.top { top: 80px; }
+ &.bottom { bottom: 24px; }
+}