diff --git a/Common/UI/Components/Charts/ChartLibrary/BarChart/BarChart.tsx b/Common/UI/Components/Charts/ChartLibrary/BarChart/BarChart.tsx index 5468189696..fcd1928456 100644 --- a/Common/UI/Components/Charts/ChartLibrary/BarChart/BarChart.tsx +++ b/Common/UI/Components/Charts/ChartLibrary/BarChart/BarChart.tsx @@ -44,8 +44,8 @@ function deepEqual(obj1: T, obj2: T): boolean { return false; } - const keys1 = Object.keys(obj1) as Array; - const keys2 = Object.keys(obj2) as Array; + const keys1: Array = Object.keys(obj1) as Array; + const keys2: Array = Object.keys(obj2) as Array; if (keys1.length !== keys2.length) { return false; @@ -60,12 +60,17 @@ function deepEqual(obj1: T, obj2: T): boolean { return true; } -const renderShape = ( +const renderShape: ( props: any, activeBar: any | undefined, activeLegend: string | undefined, layout: string, -) => { +) => React.ReactElement = ( + props: any, + activeBar: any | undefined, + activeLegend: string | undefined, + layout: string, +): React.ReactElement => { const { fillOpacity, name, payload, value } = props; let { x, width, y, height } = props; @@ -103,13 +108,13 @@ interface LegendItemProps { activeLegend?: string; } -const LegendItem = ({ +const LegendItem: React.FunctionComponent = ({ name, color, onClick, activeLegend, -}: LegendItemProps) => { - const hasOnValueChange = Boolean(onClick); +}: LegendItemProps): React.ReactElement => { + const hasOnValueChange: boolean = Boolean(onClick); return (
  • { + onClick={(e: React.MouseEvent) => { e.stopPropagation(); onClick?.(name, color as string); }} @@ -155,10 +160,15 @@ interface ScrollButtonProps { disabled?: boolean; } -const ScrollButton = ({ icon, onClick, disabled }: ScrollButtonProps) => { - const Icon = icon; +const ScrollButton: React.FunctionComponent = ({ + icon, + onClick, + disabled, +}: ScrollButtonProps): React.ReactElement => { + const Icon: React.ElementType = icon; const [isPressed, setIsPressed] = React.useState(false); - const intervalRef = React.useRef(null); + const intervalRef: React.MutableRefObject = + React.useRef(null); React.useEffect(() => { if (isPressed) { @@ -191,15 +201,15 @@ const ScrollButton = ({ icon, onClick, disabled }: ScrollButtonProps) => { : "cursor-pointer text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50", )} disabled={disabled} - onClick={(e) => { + onClick={(e: React.MouseEvent) => { e.stopPropagation(); onClick?.(); }} - onMouseDown={(e) => { + onMouseDown={(e: React.MouseEvent) => { e.stopPropagation(); setIsPressed(true); }} - onMouseUp={(e) => { + onMouseUp={(e: React.MouseEvent) => { e.stopPropagation(); setIsPressed(false); }} @@ -222,171 +232,194 @@ type HasScrollProps = { right: boolean; }; -const Legend = React.forwardRef((props, ref) => { - const { - categories, - colors = AvailableChartColors, - className, - onClickLegendItem, - activeLegend, - enableLegendSlider = false, - ...other - } = props; - const scrollableRef = React.useRef(null); - const scrollButtonsRef = React.useRef(null); - const [hasScroll, setHasScroll] = React.useState(null); - const [isKeyDowned, setIsKeyDowned] = React.useState(null); - const intervalRef = React.useRef(null); +const Legend: React.ForwardRefExoticComponent< + LegendProps & React.RefAttributes +> = React.forwardRef( + ( + props: LegendProps, + ref: React.Ref, + ): React.ReactElement => { + const { + categories, + colors = AvailableChartColors, + className, + onClickLegendItem, + activeLegend, + enableLegendSlider = false, + ...other + } = props; + const scrollableRef: React.RefObject = + React.useRef(null); + const scrollButtonsRef: React.RefObject = + React.useRef(null); + const [hasScroll, setHasScroll] = React.useState( + null, + ); + const [isKeyDowned, setIsKeyDowned] = React.useState(null); + const intervalRef: React.MutableRefObject = + React.useRef(null); - const checkScroll = React.useCallback(() => { - const scrollable = scrollableRef?.current; - if (!scrollable) { - return; - } - - const hasLeftScroll = scrollable.scrollLeft > 0; - const hasRightScroll = - scrollable.scrollWidth - scrollable.clientWidth > scrollable.scrollLeft; - - setHasScroll({ left: hasLeftScroll, right: hasRightScroll }); - }, [setHasScroll]); - - const scrollToTest = React.useCallback( - (direction: "left" | "right") => { - const element = scrollableRef?.current; - const scrollButtons = scrollButtonsRef?.current; - const scrollButtonsWith = scrollButtons?.clientWidth ?? 0; - const width = element?.clientWidth ?? 0; - - if (element && enableLegendSlider) { - element.scrollTo({ - left: - direction === "left" - ? element.scrollLeft - width + scrollButtonsWith - : element.scrollLeft + width - scrollButtonsWith, - behavior: "smooth", - }); - setTimeout(() => { - checkScroll(); - }, 400); + const checkScroll: () => void = React.useCallback(() => { + const scrollable: HTMLInputElement | null = scrollableRef?.current; + if (!scrollable) { + return; } - }, - [enableLegendSlider, checkScroll], - ); - React.useEffect(() => { - const keyDownHandler = (key: string) => { - if (key === "ArrowLeft") { - scrollToTest("left"); - } else if (key === "ArrowRight") { - scrollToTest("right"); - } - }; - if (isKeyDowned) { - keyDownHandler(isKeyDowned); - intervalRef.current = setInterval(() => { + const hasLeftScroll: boolean = scrollable.scrollLeft > 0; + const hasRightScroll: boolean = + scrollable.scrollWidth - scrollable.clientWidth > scrollable.scrollLeft; + + setHasScroll({ left: hasLeftScroll, right: hasRightScroll }); + }, [setHasScroll]); + + const scrollToTest: (direction: "left" | "right") => void = + React.useCallback( + (direction: "left" | "right") => { + const element: HTMLInputElement | null = scrollableRef?.current; + const scrollButtons: HTMLDivElement | null = + scrollButtonsRef?.current; + const scrollButtonsWith: number = scrollButtons?.clientWidth ?? 0; + const width: number = element?.clientWidth ?? 0; + + if (element && enableLegendSlider) { + element.scrollTo({ + left: + direction === "left" + ? element.scrollLeft - width + scrollButtonsWith + : element.scrollLeft + width - scrollButtonsWith, + behavior: "smooth", + }); + setTimeout(() => { + checkScroll(); + }, 400); + } + }, + [enableLegendSlider, checkScroll], + ); + + React.useEffect(() => { + const keyDownHandler: (key: string) => void = (key: string): void => { + if (key === "ArrowLeft") { + scrollToTest("left"); + } else if (key === "ArrowRight") { + scrollToTest("right"); + } + }; + if (isKeyDowned) { keyDownHandler(isKeyDowned); - }, 300); - } else { - clearInterval(intervalRef.current as NodeJS.Timeout); - } - return () => { - return clearInterval(intervalRef.current as NodeJS.Timeout); + intervalRef.current = setInterval(() => { + keyDownHandler(isKeyDowned); + }, 300); + } else { + clearInterval(intervalRef.current as NodeJS.Timeout); + } + return () => { + return clearInterval(intervalRef.current as NodeJS.Timeout); + }; + }, [isKeyDowned, scrollToTest]); + + const keyDown: (e: KeyboardEvent) => void = (e: KeyboardEvent): void => { + e.stopPropagation(); + if (e.key === "ArrowLeft" || e.key === "ArrowRight") { + e.preventDefault(); + setIsKeyDowned(e.key); + } }; - }, [isKeyDowned, scrollToTest]); - - const keyDown = (e: KeyboardEvent) => { - e.stopPropagation(); - if (e.key === "ArrowLeft" || e.key === "ArrowRight") { - e.preventDefault(); - setIsKeyDowned(e.key); - } - }; - const keyUp = (e: KeyboardEvent) => { - e.stopPropagation(); - setIsKeyDowned(null); - }; - - React.useEffect(() => { - const scrollable = scrollableRef?.current; - if (enableLegendSlider) { - checkScroll(); - scrollable?.addEventListener("keydown", keyDown); - scrollable?.addEventListener("keyup", keyUp); - } - - return () => { - scrollable?.removeEventListener("keydown", keyDown); - scrollable?.removeEventListener("keyup", keyUp); + const keyUp: (e: KeyboardEvent) => void = (e: KeyboardEvent): void => { + e.stopPropagation(); + setIsKeyDowned(null); }; - }, [checkScroll, enableLegendSlider]); - return ( -
      -
      { + const scrollable: HTMLInputElement | null = scrollableRef?.current; + if (enableLegendSlider) { + checkScroll(); + scrollable?.addEventListener("keydown", keyDown); + scrollable?.addEventListener("keyup", keyUp); + } + + return () => { + scrollable?.removeEventListener("keydown", keyDown); + scrollable?.removeEventListener("keyup", keyUp); + }; + }, [checkScroll, enableLegendSlider]); + + return ( +
        - {categories.map((category, index) => { - return ( - - ); - })} -
      - {enableLegendSlider && (hasScroll?.right || hasScroll?.left) ? ( - <> -
      - { - setIsKeyDowned(null); - scrollToTest("left"); - }} - disabled={!hasScroll?.left} - /> - { - setIsKeyDowned(null); - scrollToTest("right"); - }} - disabled={!hasScroll?.right} - /> -
      - - ) : null} -
    - ); -}); +
    + {categories.map((category: string, index: number) => { + return ( + + ); + })} +
    + {enableLegendSlider && (hasScroll?.right || hasScroll?.left) ? ( + <> +
    + { + setIsKeyDowned(null); + scrollToTest("left"); + }} + disabled={!hasScroll?.left} + /> + { + setIsKeyDowned(null); + scrollToTest("right"); + }} + disabled={!hasScroll?.right} + /> +
    + + ) : null} + + ); + }, +); Legend.displayName = "Legend"; -const ChartLegend = ( +const ChartLegend: ( + payload: any, + categoryColors: Map, + setLegendHeight: React.Dispatch>, + activeLegend: string | undefined, + onClick?: (category: string, color: string) => void, + enableLegendSlider?: boolean, + legendPosition?: "left" | "center" | "right", + yAxisWidth?: number, +) => React.ReactElement = ( { payload }: any, categoryColors: Map, setLegendHeight: React.Dispatch>, @@ -396,20 +429,23 @@ const ChartLegend = ( legendPosition?: "left" | "center" | "right", yAxisWidth?: number, ) => { - const legendRef = React.useRef(null); + const legendRef: React.RefObject = + React.useRef(null); useOnWindowResize(() => { - const calculateHeight = (height: number | undefined) => { + const calculateHeight: (height: number | undefined) => number = ( + height: number | undefined, + ): number => { return height ? Number(height) + 15 : 60; }; setLegendHeight(calculateHeight(legendRef.current?.clientHeight)); }); - const filteredPayload = payload.filter((item: any) => { + const filteredPayload: any[] = payload.filter((item: any) => { return item.type !== "none"; }); - const paddingLeft = + const paddingLeft: number = legendPosition === "left" && yAxisWidth ? yAxisWidth - 8 : 0; return ( @@ -462,12 +498,12 @@ interface ChartTooltipProps { valueFormatter: (value: number) => string; } -const ChartTooltip = ({ +const ChartTooltip: React.FunctionComponent = ({ active, payload, label, valueFormatter, -}: ChartTooltipProps) => { +}: ChartTooltipProps): React.ReactElement | null => { if (active && payload && payload.length) { return (
    - {payload.map(({ value, category, color }, index) => { - return ( -
    -
    -
    - ); - })} + ); + }, + )}
    ); @@ -579,8 +617,13 @@ interface BarChartProps extends React.HTMLAttributes { customTooltip?: React.ComponentType; } -const BarChart = React.forwardRef( - (props, forwardedRef) => { +const BarChart: React.ForwardRefExoticComponent< + BarChartProps & React.RefAttributes +> = React.forwardRef( + ( + props: BarChartProps, + forwardedRef: React.Ref, + ): React.ReactElement => { const { data = [], categories = [], @@ -615,29 +658,36 @@ const BarChart = React.forwardRef( customTooltip, ...other } = props; - const CustomTooltip = customTooltip; - const paddingValue = + const CustomTooltip: React.ComponentType | undefined = customTooltip; + const paddingValue: number = (!showXAxis && !showYAxis) || (startEndOnly && !showYAxis) ? 0 : 20; const [legendHeight, setLegendHeight] = React.useState(60); const [activeLegend, setActiveLegend] = React.useState( undefined, ); - const categoryColors = constructCategoryColors(categories, colors); + const categoryColors: Map = + constructCategoryColors(categories, colors); const [activeBar, setActiveBar] = React.useState( undefined, ); - const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue); - const hasOnValueChange = Boolean(onValueChange); - const stacked = type === "stacked" || type === "percent"; + const yAxisDomain: AxisDomain = getYAxisDomain( + autoMinValue, + minValue, + maxValue, + ); + const hasOnValueChange: boolean = Boolean(onValueChange); + const stacked: boolean = type === "stacked" || type === "percent"; - const prevActiveRef = React.useRef(undefined); - const prevLabelRef = React.useRef(undefined); + const prevActiveRef: React.MutableRefObject = + React.useRef(undefined); + const prevLabelRef: React.MutableRefObject = + React.useRef(undefined); - function valueToPercent(value: number) { + function valueToPercent(value: number): string { return `${(value * 100).toFixed(0)}%`; } - function onBarClick(data: any, _: any, event: React.MouseEvent) { + function onBarClick(data: any, _: any, event: React.MouseEvent): void { event.stopPropagation(); if (!onValueChange) { return; @@ -660,7 +710,7 @@ const BarChart = React.forwardRef( } } - function onCategoryClick(dataKey: string) { + function onCategoryClick(dataKey: string): void { if (!hasOnValueChange) { return; } @@ -681,7 +731,7 @@ const BarChart = React.forwardRef(
    @@ -828,7 +878,7 @@ const BarChart = React.forwardRef( {...(layout === "horizontal" ? { position: { y: 0 } } : { position: { x: yAxisWidth + 20 } })} - content={({ active, payload, label }) => { + content={({ active, payload, label }: any) => { const cleanPayload: TooltipProps["payload"] = payload ? payload.map((item: any) => { return { @@ -876,14 +926,14 @@ const BarChart = React.forwardRef( { + content={({ payload }: any) => { return ChartLegend( { payload }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange - ? (clickedLegendItem: string) => { + ? (clickedLegendItem: string): void => { return onCategoryClick(clickedLegendItem); } : undefined, @@ -894,7 +944,7 @@ const BarChart = React.forwardRef( }} /> ) : null} - {categories.map((category) => { + {categories.map((category: string) => { return ( ( {...(stacked ? { stackId: "stack" } : {})} isAnimationActive={false} fill="" - shape={(props: any) => { + shape={(props: any): React.ReactElement => { return renderShape(props, activeBar, activeLegend, layout); }} onClick={onBarClick} diff --git a/Common/UI/Components/Charts/ChartLibrary/SparkChart/SparkChart.tsx b/Common/UI/Components/Charts/ChartLibrary/SparkChart/SparkChart.tsx index 1f4c253c47..4c28c74189 100644 --- a/Common/UI/Components/Charts/ChartLibrary/SparkChart/SparkChart.tsx +++ b/Common/UI/Components/Charts/ChartLibrary/SparkChart/SparkChart.tsx @@ -42,8 +42,13 @@ interface SparkAreaChartProps extends React.HTMLAttributes { fill?: "gradient" | "solid" | "none"; } -const SparkAreaChart = React.forwardRef( - (props, forwardedRef) => { +const SparkAreaChart: React.ForwardRefExoticComponent< + SparkAreaChartProps & React.RefAttributes +> = React.forwardRef( + ( + props: SparkAreaChartProps, + forwardedRef: React.Ref, + ): React.ReactElement => { const { data = [], categories = [], @@ -59,12 +64,21 @@ const SparkAreaChart = React.forwardRef( ...other } = props; - const categoryColors = constructCategoryColors(categories, colors); - const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue); - const stacked = type === "stacked" || type === "percent"; - const areaId = React.useId(); + const categoryColors: Map = + constructCategoryColors(categories, colors); + const yAxisDomain: AxisDomain = getYAxisDomain( + autoMinValue, + minValue, + maxValue, + ); + const stacked: boolean = type === "stacked" || type === "percent"; + const areaId: string = React.useId(); - const getFillContent = (fillType: SparkAreaChartProps["fill"]) => { + const getFillContent: ( + fillType: SparkAreaChartProps["fill"], + ) => React.ReactElement = ( + fillType: SparkAreaChartProps["fill"], + ): React.ReactElement => { switch (fillType) { case "none": return ; @@ -86,7 +100,7 @@ const SparkAreaChart = React.forwardRef(
    @@ -103,8 +117,8 @@ const SparkAreaChart = React.forwardRef( - {categories.map((category) => { - const categoryId = `${areaId}-${category.replace(/[^a-zA-Z0-9]/g, "")}`; + {categories.map((category: string) => { + const categoryId: string = `${areaId}-${category.replace(/[^a-zA-Z0-9]/g, "")}`; return ( @@ -175,8 +189,13 @@ interface SparkLineChartProps extends React.HTMLAttributes { connectNulls?: boolean; } -const SparkLineChart = React.forwardRef( - (props, forwardedRef) => { +const SparkLineChart: React.ForwardRefExoticComponent< + SparkLineChartProps & React.RefAttributes +> = React.forwardRef( + ( + props: SparkLineChartProps, + forwardedRef: React.Ref, + ): React.ReactElement => { const { data = [], categories = [], @@ -190,14 +209,19 @@ const SparkLineChart = React.forwardRef( ...other } = props; - const categoryColors = constructCategoryColors(categories, colors); - const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue); + const categoryColors: Map = + constructCategoryColors(categories, colors); + const yAxisDomain: AxisDomain = getYAxisDomain( + autoMinValue, + minValue, + maxValue, + ); return (
    @@ -212,7 +236,7 @@ const SparkLineChart = React.forwardRef( > - {categories.map((category) => { + {categories.map((category: string) => { return ( { type?: "default" | "stacked" | "percent"; } -const SparkBarChart = React.forwardRef( - (props, forwardedRef) => { +const SparkBarChart: React.ForwardRefExoticComponent< + BarChartProps & React.RefAttributes +> = React.forwardRef( + ( + props: BarChartProps, + forwardedRef: React.Ref, + ): React.ReactElement => { const { data = [], categories = [], @@ -275,16 +304,21 @@ const SparkBarChart = React.forwardRef( ...other } = props; - const categoryColors = constructCategoryColors(categories, colors); + const categoryColors: Map = + constructCategoryColors(categories, colors); - const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue); - const stacked = type === "stacked" || type === "percent"; + const yAxisDomain: AxisDomain = getYAxisDomain( + autoMinValue, + minValue, + maxValue, + ); + const stacked: boolean = type === "stacked" || type === "percent"; return (
    @@ -302,7 +336,7 @@ const SparkBarChart = React.forwardRef( - {categories.map((category) => { + {categories.map((category: string) => { return ( = ({ onClick, "data-testid": dataTestId, }: ComponentProps): ReactElement => { - const getSpacingClass = (): string => { + const getSpacingClass: () => string = (): string => { switch (spacing) { case "sm": return "gap-1"; @@ -46,7 +45,7 @@ const IconText: FunctionComponent = ({ } }; - const getAlignmentClass = (): string => { + const getAlignmentClass: () => string = (): string => { switch (alignment) { case "center": return "justify-center"; @@ -58,7 +57,7 @@ const IconText: FunctionComponent = ({ } }; - const handleClick = (): void => { + const handleClick: () => void = (): void => { if (onClick) { onClick(); } diff --git a/Dashboard/src/Components/StatusPageSubscribers/SubscriberNotificationStatus.tsx b/Dashboard/src/Components/StatusPageSubscribers/SubscriberNotificationStatus.tsx index 5f33d518ed..9ccc23dcec 100644 --- a/Dashboard/src/Components/StatusPageSubscribers/SubscriberNotificationStatus.tsx +++ b/Dashboard/src/Components/StatusPageSubscribers/SubscriberNotificationStatus.tsx @@ -161,14 +161,14 @@ const SubscriberNotificationStatus: FunctionComponent = ( const iconColor: Color = colorMap[statusInfo.color as keyof typeof colorMap] || Gray500; - const handleModalConfirm = (): void => { + const handleModalConfirm: () => void = (): void => { if (showResendButton && onResendNotification) { onResendNotification(); } setShowModal(false); }; - const handleModalClose = (): void => { + const handleModalClose: () => void = (): void => { setShowModal(false); }; diff --git a/Dashboard/src/Pages/Incidents/View/Index.tsx b/Dashboard/src/Pages/Incidents/View/Index.tsx index e24e9820c5..df3a02139d 100644 --- a/Dashboard/src/Pages/Incidents/View/Index.tsx +++ b/Dashboard/src/Pages/Incidents/View/Index.tsx @@ -141,30 +141,31 @@ const IncidentView: FunctionComponent< setIsLoading(false); }; - const handleResendNotification = async (): Promise => { - try { - setIsLoading(true); + const handleResendNotification: () => Promise = + async (): Promise => { + try { + setIsLoading(true); - // Reset the notification status to Pending so the worker can pick it up again - await ModelAPI.updateById({ - id: modelId, - modelType: Incident, - data: { - subscriberNotificationStatusOnIncidentCreated: - StatusPageSubscriberNotificationStatus.Pending, - subscriberNotificationStatusMessage: - "Notification queued for resending", - }, - }); + // Reset the notification status to Pending so the worker can pick it up again + await ModelAPI.updateById({ + id: modelId, + modelType: Incident, + data: { + subscriberNotificationStatusOnIncidentCreated: + StatusPageSubscriberNotificationStatus.Pending, + subscriberNotificationStatusMessage: + "Notification queued for resending", + }, + }); - // Refresh the data to show updated status - await fetchData(); - } catch (err) { - setError(BaseAPI.getFriendlyMessage(err)); - } finally { - setIsLoading(false); - } - }; + // Refresh the data to show updated status + await fetchData(); + } catch (err) { + setError(BaseAPI.getFriendlyMessage(err)); + } finally { + setIsLoading(false); + } + }; useEffect(() => { fetchData().catch((err: Error) => { diff --git a/Dashboard/src/Pages/ScheduledMaintenanceEvents/View/Index.tsx b/Dashboard/src/Pages/ScheduledMaintenanceEvents/View/Index.tsx index 7cfcc0f3b9..a0250d2072 100644 --- a/Dashboard/src/Pages/ScheduledMaintenanceEvents/View/Index.tsx +++ b/Dashboard/src/Pages/ScheduledMaintenanceEvents/View/Index.tsx @@ -41,26 +41,27 @@ const ScheduledMaintenanceView: FunctionComponent< const modelId: ObjectID = Navigation.getLastParamAsObjectID(); const [refreshToggle, setRefreshToggle] = useState(false); - const handleResendNotification = async (): Promise => { - try { - // Reset the notification status to Pending so the worker can pick it up again - await ModelAPI.updateById({ - id: modelId, - modelType: ScheduledMaintenance, - data: { - subscriberNotificationStatusOnEventScheduled: - StatusPageSubscriberNotificationStatus.Pending, - subscriberNotificationStatusMessage: - "Notification queued for resending", - }, - }); + const handleResendNotification: () => Promise = + async (): Promise => { + try { + // Reset the notification status to Pending so the worker can pick it up again + await ModelAPI.updateById({ + id: modelId, + modelType: ScheduledMaintenance, + data: { + subscriberNotificationStatusOnEventScheduled: + StatusPageSubscriberNotificationStatus.Pending, + subscriberNotificationStatusMessage: + "Notification queued for resending", + }, + }); - // Trigger a refresh by toggling the refresh state - setRefreshToggle(!refreshToggle); - } catch { - // Error resending notification: handle appropriately - } - }; + // Trigger a refresh by toggling the refresh state + setRefreshToggle(!refreshToggle); + } catch { + // Error resending notification: handle appropriately + } + }; return ( diff --git a/Dashboard/src/Pages/StatusPages/AnnouncementView.tsx b/Dashboard/src/Pages/StatusPages/AnnouncementView.tsx index 90067ae4b7..136f6733c8 100644 --- a/Dashboard/src/Pages/StatusPages/AnnouncementView.tsx +++ b/Dashboard/src/Pages/StatusPages/AnnouncementView.tsx @@ -29,26 +29,27 @@ const AnnouncementView: FunctionComponent< const modelId: ObjectID = Navigation.getLastParamAsObjectID(); const [refreshToggle, setRefreshToggle] = useState(false); - const handleResendNotification = async (): Promise => { - try { - // Reset the notification status to Pending so the worker can pick it up again - await ModelAPI.updateById({ - id: modelId, - modelType: StatusPageAnnouncement, - data: { - subscriberNotificationStatus: - StatusPageSubscriberNotificationStatus.Pending, - subscriberNotificationStatusMessage: - "Notification queued for resending", - }, - }); + const handleResendNotification: () => Promise = + async (): Promise => { + try { + // Reset the notification status to Pending so the worker can pick it up again + await ModelAPI.updateById({ + id: modelId, + modelType: StatusPageAnnouncement, + data: { + subscriberNotificationStatus: + StatusPageSubscriberNotificationStatus.Pending, + subscriberNotificationStatusMessage: + "Notification queued for resending", + }, + }); - // Trigger a refresh by toggling the refresh state - setRefreshToggle(!refreshToggle); - } catch { - // Error resending notification: handle appropriately - } - }; + // Trigger a refresh by toggling the refresh state + setRefreshToggle(!refreshToggle); + } catch { + // Error resending notification: handle appropriately + } + }; return (