121 lines
3.1 KiB
TypeScript
121 lines
3.1 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { useSelector } from "react-redux";
|
|
|
|
import NotificationsList from "./NotificationsList";
|
|
import BellIcon from "remixicon-react/Notification3LineIcon";
|
|
import { Popover2 } from "@blueprintjs/popover2";
|
|
|
|
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
|
|
import { useDispatch } from "react-redux";
|
|
|
|
import {
|
|
fetchNotificationsRequest,
|
|
fetchUnreadNotificationsCountRequest,
|
|
setIsNotificationsListVisible,
|
|
} from "actions/notificationActions";
|
|
import styled from "styled-components";
|
|
import { Colors } from "constants/Colors";
|
|
|
|
import {
|
|
unreadCountSelector,
|
|
isNotificationsListVisibleSelector,
|
|
} from "selectors/notificationSelectors";
|
|
import TooltipComponent from "components/ads/Tooltip";
|
|
import { createMessage, NOTIFICATIONS_TOOLTIP } from "constants/messages";
|
|
import { TOOLTIP_HOVER_ON_DELAY } from "constants/AppConstants";
|
|
import { Position } from "@blueprintjs/core";
|
|
|
|
const Container = styled.div`
|
|
position: relative;
|
|
padding: ${(props) => props.theme.spaces[1]}px;
|
|
margin-right: ${(props) => props.theme.spaces[9]}px;
|
|
cursor: pointer;
|
|
`;
|
|
|
|
const BellIndicatorContainer = styled.div`
|
|
position: absolute;
|
|
top: -7px;
|
|
right: -5px;
|
|
`;
|
|
|
|
const Count = styled.div`
|
|
position: absolute;
|
|
top: 43%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
`;
|
|
|
|
const BellIndicatorIcon = styled.div`
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background-color: ${(props) =>
|
|
props.theme.colors.notifications.bellIndicator};
|
|
`;
|
|
|
|
const StyledBellIcon = styled(BellIcon)`
|
|
width: 22px;
|
|
height: 22px;
|
|
`;
|
|
|
|
function Bell() {
|
|
const dispatch = useDispatch();
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchNotificationsRequest());
|
|
dispatch(fetchUnreadNotificationsCountRequest());
|
|
}, []);
|
|
|
|
const unreadCount = useSelector(unreadCountSelector);
|
|
const showIndicator = unreadCount > 0;
|
|
|
|
const isOpen = useSelector(isNotificationsListVisibleSelector);
|
|
|
|
return (
|
|
<Popover2
|
|
content={<NotificationsList />}
|
|
isOpen={isOpen}
|
|
minimal
|
|
modifiers={{
|
|
offset: {
|
|
enabled: true,
|
|
options: {
|
|
offset: [-15, 10],
|
|
},
|
|
},
|
|
preventOverflow: {
|
|
enabled: true,
|
|
},
|
|
}}
|
|
onInteraction={(nextOpenState) =>
|
|
dispatch(setIsNotificationsListVisible(nextOpenState))
|
|
}
|
|
placement={"bottom-end"}
|
|
>
|
|
<Container>
|
|
<TooltipComponent
|
|
boundary="viewport"
|
|
content={createMessage(NOTIFICATIONS_TOOLTIP)}
|
|
hoverOpenDelay={TOOLTIP_HOVER_ON_DELAY}
|
|
position={Position.BOTTOM}
|
|
>
|
|
<StyledBellIcon color={Colors.GRAY} />
|
|
</TooltipComponent>
|
|
{showIndicator && (
|
|
<BellIndicatorContainer>
|
|
{/** Not using overflow ellipsis here for UI specs */}
|
|
<BellIndicatorIcon />
|
|
<Count>
|
|
{unreadCount > 100
|
|
? `${unreadCount}`.slice(0, 2) + ".."
|
|
: unreadCount}
|
|
</Count>
|
|
</BellIndicatorContainer>
|
|
)}
|
|
</Container>
|
|
</Popover2>
|
|
);
|
|
}
|
|
|
|
export default Bell;
|