diff --git a/e2e/fixtures/pages/landing/landing.fixture.ts b/e2e/fixtures/pages/landing/landing.fixture.ts index d7a79bed..dfdbd4c6 100644 --- a/e2e/fixtures/pages/landing/landing.fixture.ts +++ b/e2e/fixtures/pages/landing/landing.fixture.ts @@ -100,7 +100,7 @@ export class LandingPage { const regions = this.page.getByRole('list', { name: 'Weather health alerts by region' }) await expect(regions).toBeVisible() - await expect(await regions.getByRole('listitem').all()).toHaveLength(9) + await expect(await regions.getByRole('listitem').all()).toHaveLength(13) await expect(card.getByRole('button', { name: 'Enter fullscreen' })).toBeVisible() } diff --git a/jest.config.js b/jest.config.js index bff27577..24794adb 100644 --- a/jest.config.js +++ b/jest.config.js @@ -39,10 +39,11 @@ const customJestConfig = { // lines: 95, // functions: 96, + // Will update back up as part of CDD-2370 statements: 91, - branches: 81, - lines: 93, - functions: 89, + branches: 80, + lines: 92, + functions: 87, }, }, watchPathIgnorePatterns: ['node_modules'], diff --git a/src/app/components/ui/ukhsa/MiniMap/MiniMap.tsx b/src/app/components/ui/ukhsa/MiniMap/MiniMap.tsx index bc55979b..e4f9428e 100644 --- a/src/app/components/ui/ukhsa/MiniMap/MiniMap.tsx +++ b/src/app/components/ui/ukhsa/MiniMap/MiniMap.tsx @@ -8,7 +8,12 @@ import { useDebounceValue } from 'usehooks-ts' import { HealthAlertStatus, HealthAlertTypes } from '@/api/models/Alerts' import RightArrowCircleIcon from '@/app/components/ui/ukhsa/Icons/RightArrowCircle' import useWeatherHealthAlertList from '@/app/hooks/queries/useWeatherHealthAlertList' -import { getCssVariableFromColour } from '@/app/utils/weather-health-alert.utils' +import { useTranslation } from '@/app/i18n/client' +import { + getCssVariableFromColour, + getTailwindBackgroundFromColour, + getTextColourCssFromColour, +} from '@/app/utils/weather-health-alert.utils' import { clsx } from '@/lib/clsx' import { regionPaths } from './constants' @@ -37,8 +42,9 @@ const AlertListItem = memo( onKeyDown={onClick} > {name} @@ -86,11 +92,22 @@ interface MiniMapProps { alertType: HealthAlertTypes } +interface AlertObject { + slug: string + status: HealthAlertStatus + geography_name: string + geography_code: string + refresh_date: string | null +} + export function MiniMap({ alertType }: MiniMapProps): React.ReactElement | null { const [hoveredRegion, setHoveredRegion] = useState(null) const alerts = useWeatherHealthAlertList({ type: alertType }) + const router = useRouter() + const { t } = useTranslation('weatherHealthAlerts') + const [debouncedHoveredRegion] = useDebounceValue(hoveredRegion, 80) const handleMouseEnter = useCallback((region: string) => { @@ -102,11 +119,11 @@ export function MiniMap({ alertType }: MiniMapProps): React.ReactElement | null }, []) const handleClick = useCallback( - (regionId: string) => { + (regionId?: string) => { const url = new URL('/', window.location.origin) url.searchParams.set('v', 'map') url.searchParams.set('type', alertType) - url.searchParams.set('fid', regionId) + regionId ? url.searchParams.set('fid', regionId) : null router.push(url.toString(), { scroll: false }) }, [router] @@ -114,28 +131,60 @@ export function MiniMap({ alertType }: MiniMapProps): React.ReactElement | null if (alerts.isLoading || !alerts.data) return null + const groupedAlerts = Object.entries( + alerts.data.reduce( + (statusGrouped, alert) => { + const { status } = alert + if (!statusGrouped[status]) { + statusGrouped[status] = [] + } + statusGrouped[status].push(alert) + return statusGrouped + }, + {} as Record + ) + ).map(([status, alerts]) => ({ + status: status as HealthAlertStatus, + alerts, + })) + return ( <>
    - {alerts.data.map((alert) => ( - handleMouseEnter(alert.geography_code)} - onMouseLeave={handleMouseLeave} - onClick={(evt) => { - evt.preventDefault() - evt.stopPropagation() - handleClick(alert.geography_code) - }} - /> - ))} + {groupedAlerts.map(({ status, alerts }) => { + if (alerts.length > 0) { + return ( + <> +
  • +
    + {status == 'Green' ? t('map.no-alert') : t('map.alert', { level: status })} +
    +
    • + {alerts.map((alert) => ( + handleMouseEnter(alert.geography_code)} + onMouseLeave={handleMouseLeave} + onClick={(evt) => { + evt.preventDefault() + evt.stopPropagation() + handleClick(alert.geography_code) + }} + /> + ))} + + ) + } + })}
- diff --git a/src/app/components/ui/ukhsa/MiniMap/MiniMapCard.tsx b/src/app/components/ui/ukhsa/MiniMap/MiniMapCard.tsx index f55d2560..09e152a4 100644 --- a/src/app/components/ui/ukhsa/MiniMap/MiniMapCard.tsx +++ b/src/app/components/ui/ukhsa/MiniMap/MiniMapCard.tsx @@ -1,7 +1,6 @@ 'use client' import Link from 'next/link' -import { useRouter } from 'next/navigation' import { HealthAlertTypes } from '@/api/models/Alerts' @@ -15,21 +14,13 @@ interface MiniMapCardProps { } export function MiniMapCard({ title, subTitle, alertType }: MiniMapCardProps) { - const router = useRouter() return ( - { - evt.preventDefault() - router.push(`/?v=map&type=${alertType}`) - }} - > +

{title}

diff --git a/src/app/utils/weather-health-alert.utils.ts b/src/app/utils/weather-health-alert.utils.ts index b2064cc6..c47a85d1 100644 --- a/src/app/utils/weather-health-alert.utils.ts +++ b/src/app/utils/weather-health-alert.utils.ts @@ -25,6 +25,13 @@ export enum ColourVariableMap { Red = 'var(--colour-red)', } +export enum ColourBackgroundMap { + Green = 'bg-green', + Amber = 'bg-orange', + Yellow = 'bg-custard', + Red = 'bg-red', +} + export enum HoverColourVariableMap { Green = 'var(--colour-green-dark)', Amber = 'var(--colour-orange-dark)', @@ -39,25 +46,10 @@ export enum ActiveColourVariableMap { Red = 'var(--colour-red-darkest)', } -export enum ColourBackgroundMap { - Green = 'bg-green', - Amber = 'bg-orange', - Yellow = 'bg-custard', - Red = 'bg-red', -} - export function getCssVariableFromColour(color: keyof typeof ColourVariableMap) { return ColourVariableMap[color] } -export function getHoverCssVariableFromColour(color: keyof typeof HoverColourVariableMap) { - return `${HoverColourVariableMap[color]}` -} - -export function getActiveCssVariableFromColour(color: keyof typeof ActiveColourVariableMap) { - return `${ActiveColourVariableMap[color]}` -} - export function getTailwindBackgroundFromColour(color: keyof typeof ColourBackgroundMap) { return ColourBackgroundMap[color] } @@ -69,3 +61,11 @@ export function getTextColourCssFromColour(colour: string) { return 'text-white' } } + +export function getHoverCssVariableFromColour(color: keyof typeof HoverColourVariableMap) { + return `${HoverColourVariableMap[color]}` +} + +export function getActiveCssVariableFromColour(color: keyof typeof ActiveColourVariableMap) { + return `${ActiveColourVariableMap[color]}` +}