Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
import React, { useCallback, useRef } from "react";
import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
import { useIntersectionObserver } from "../../../lib/utils";
// The Stocks widget's error box. It only mounts while there's an error, so the
// intersection observer set up on mount reports WIDGETS_ERROR the first time the
// message is actually on screen.
function StocksError({ widgetSize, dispatch }) {
const errorFired = useRef(false);
const handleErrorIntersection = useCallback(() => {
if (errorFired.current) {
return;
}
errorFired.current = true;
// Fire from content so the event ties to this tab's session, matching the
// other widgets' error telemetry.
dispatch(
ac.AlsoToMain({
type: at.WIDGETS_ERROR,
data: {
widget_name: "stocks",
widget_size: widgetSize,
error_type: "load_error",
},
})
);
}, [dispatch, widgetSize]);
const errorRef = useIntersectionObserver(handleErrorIntersection);
return (
// role="alert" so a screen reader announces the failure when the box
// appears, since it replaces the widget's data without moving focus.
<div
className="stocks-error"
role="alert"
ref={el => {
errorRef.current = [el];
}}
>
<span className="icon icon-info-warning" aria-hidden="true" />
<p
className="stocks-error-text"
data-l10n-id="newtab-stocks-error-not-available"
/>
</div>
);
}
export { StocksError };