81 lines
2.5 KiB
JavaScript
81 lines
2.5 KiB
JavaScript
/* 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 file,
|
|
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
import React, { useCallback, useEffect } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
|
|
import { ThumbUpThumbDownToast } from "./Toasts/ThumbUpThumbDownToast";
|
|
import { ReportContentToast } from "./Toasts/ReportContentToast";
|
|
|
|
function Notifications({ dispatch }) {
|
|
const toastQueue = useSelector(state => state.Notifications.toastQueue);
|
|
const toastCounter = useSelector(state => state.Notifications.toastCounter);
|
|
|
|
/**
|
|
* Syncs {@link toastQueue} array so it can be used to
|
|
* remove the toasts wrapper if there are none after a
|
|
* toast is auto-hidden (animated out) via CSS.
|
|
*/
|
|
const syncHiddenToastData = useCallback(() => {
|
|
const toastId = toastQueue[toastQueue.length - 1];
|
|
const queuedToasts = [...toastQueue].slice(1);
|
|
dispatch(
|
|
ac.OnlyToOneContent(
|
|
{
|
|
type: at.HIDE_TOAST_MESSAGE,
|
|
data: {
|
|
toastQueue: queuedToasts,
|
|
toastCounter: queuedToasts.length,
|
|
toastId,
|
|
showNotifications: false,
|
|
},
|
|
},
|
|
"ActivityStream:Content"
|
|
)
|
|
);
|
|
}, [dispatch, toastQueue]);
|
|
|
|
const getToast = useCallback(() => {
|
|
// Note: This architecture could expand to support multiple toast notifications at once
|
|
const latestToastItem = toastQueue[toastQueue.length - 1];
|
|
|
|
if (!latestToastItem) {
|
|
throw new Error("No toast found");
|
|
}
|
|
|
|
switch (latestToastItem) {
|
|
case "reportSuccessToast":
|
|
return (
|
|
<ReportContentToast
|
|
onDismissClick={syncHiddenToastData}
|
|
onAnimationEnd={syncHiddenToastData}
|
|
key={toastCounter}
|
|
/>
|
|
);
|
|
case "thumbsUpToast":
|
|
case "thumbsDownToast":
|
|
return (
|
|
<ThumbUpThumbDownToast
|
|
onDismissClick={syncHiddenToastData}
|
|
onAnimationEnd={syncHiddenToastData}
|
|
key={toastCounter}
|
|
/>
|
|
);
|
|
default:
|
|
throw new Error(`Unexpected toast type: ${latestToastItem}`);
|
|
}
|
|
}, [syncHiddenToastData, toastCounter, toastQueue]);
|
|
|
|
useEffect(() => {
|
|
getToast();
|
|
}, [toastQueue, getToast]);
|
|
|
|
return toastQueue.length ? (
|
|
<div className="notification-wrapper">{getToast()}</div>
|
|
) : (
|
|
""
|
|
);
|
|
}
|
|
|
|
export { Notifications };
|