in header show notification number badge
This commit is contained in:
Nuwan
parent
136a3c399d
commit
8aa463c054
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -171,3 +171,19 @@
|
|||
height: 10px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.num-circle {
|
||||
position: absolute;
|
||||
// top: "0px";
|
||||
// left: "10px";
|
||||
right: 0;
|
||||
background-color: #cc0e0e;
|
||||
color: #fff;
|
||||
font-family: tahoma, arial, 'sans-serif';
|
||||
font-size: 9px;
|
||||
width: 18px;
|
||||
line-height: 18px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
transform: translate(50%, -50%)
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@ import { useAuth } from '../../context/UserAuth';
|
|||
const JKNotificationDropdown = () => {
|
||||
const { currentUser, isAuthenticated } = useAuth();
|
||||
const dispatch = useDispatch();
|
||||
const notifications = useSelector(state => state.notification.notifications.slice(0, 5));
|
||||
const notifications = useSelector(state => state.notification.notifications);
|
||||
|
||||
const LIMIT = 5;
|
||||
const [page, setPage] = useState(0);
|
||||
|
|
@ -34,8 +34,8 @@ const JKNotificationDropdown = () => {
|
|||
try {
|
||||
const options = {
|
||||
userId: currentUser.id,
|
||||
offset: page * LIMIT,
|
||||
limit: LIMIT
|
||||
offset: 0,
|
||||
limit: LIMIT + 1
|
||||
};
|
||||
await dispatch(fetchNotifications(options)).unwrap();
|
||||
//console.log('NOTIFICATIONS', notifications);
|
||||
|
|
@ -45,6 +45,10 @@ const JKNotificationDropdown = () => {
|
|||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadNotifications();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadNotifications();
|
||||
|
|
@ -53,55 +57,60 @@ const JKNotificationDropdown = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{isAuthenticated &&
|
||||
<Dropdown
|
||||
nav
|
||||
inNavbar
|
||||
className="mx-3"
|
||||
isOpen={isOpen}
|
||||
toggle={handleToggle}
|
||||
// onMouseOver={() => {
|
||||
// let windowWidth = window.innerWidth;
|
||||
// windowWidth > 992 && setIsOpen(true);
|
||||
// }}
|
||||
// onMouseLeave={() => {
|
||||
// let windowWidth = window.innerWidth;
|
||||
// windowWidth > 992 && setIsOpen(false);
|
||||
// }}
|
||||
>
|
||||
<DropdownToggle
|
||||
nav
|
||||
className={classNames('px-0', {
|
||||
'notification-indicator notification-indicator-primary': !isAllRead
|
||||
})}
|
||||
>
|
||||
{/* <i class="fas fa-bell fa-2x fs-4" data-count="2"></i> */}
|
||||
<FontAwesomeIcon icon={["fas", "bell"]} transform="shrink-5" className="fs-4" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right className="dropdown-menu-card" data-testid="notificationDropdown">
|
||||
<Card className="card-notification shadow-none" style={{ maxWidth: '20rem' }}>
|
||||
<FalconCardHeader className="card-header" title="Notifications" titleTag="h6" light={false}>
|
||||
{/* <Link className="card-link font-weight-normal" to="#!">
|
||||
{isAuthenticated && (
|
||||
<Dropdown
|
||||
nav
|
||||
inNavbar
|
||||
className="mx-3"
|
||||
isOpen={isOpen}
|
||||
toggle={handleToggle}
|
||||
// onMouseOver={() => {
|
||||
// let windowWidth = window.innerWidth;
|
||||
// windowWidth > 992 && setIsOpen(true);
|
||||
// }}
|
||||
// onMouseLeave={() => {
|
||||
// let windowWidth = window.innerWidth;
|
||||
// windowWidth > 992 && setIsOpen(false);
|
||||
// }}
|
||||
>
|
||||
<DropdownToggle
|
||||
nav
|
||||
className={classNames('px-0', {
|
||||
'': !isAllRead
|
||||
})}
|
||||
>
|
||||
{ isIterableArray(notifications) && notifications.length > 0 && <div className="num-circle">
|
||||
{ notifications.length > LIMIT ? `${LIMIT}+` : notifications.length}
|
||||
</div> }
|
||||
<FontAwesomeIcon icon={['fas', 'bell']} transform="shrink-5" className="fs-4" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right className="dropdown-menu-card" data-testid="notificationDropdown">
|
||||
<Card className="card-notification shadow-none" style={{ maxWidth: '20rem' }}>
|
||||
<FalconCardHeader className="card-header" title="Notifications" titleTag="h6" light={false}>
|
||||
{/* <Link className="card-link font-weight-normal" to="#!">
|
||||
Mark all as read
|
||||
</Link> */}
|
||||
</FalconCardHeader>
|
||||
<ListGroup flush className="font-weight-normal fs--1">
|
||||
{isIterableArray(notifications) &&
|
||||
notifications.map(notification => (
|
||||
<ListGroupItem key={`notification-drop-item-${notification.notification_id}`} onClick={handleToggle}>
|
||||
<Notification notification={notification} classNames="bg-200" flush />
|
||||
</ListGroupItem>
|
||||
))}
|
||||
</ListGroup>
|
||||
<div className="card-footer text-center border-top" onClick={handleToggle}>
|
||||
<Link className="card-link d-block" to="/notifications">
|
||||
View all
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
}
|
||||
</FalconCardHeader>
|
||||
<ListGroup flush className="font-weight-normal fs--1">
|
||||
{isIterableArray(notifications) &&
|
||||
notifications.slice(0, LIMIT).map(notification => (
|
||||
<ListGroupItem
|
||||
key={`notification-drop-item-${notification.notification_id}`}
|
||||
onClick={handleToggle}
|
||||
>
|
||||
<Notification notification={notification} classNames="bg-200" flush />
|
||||
</ListGroupItem>
|
||||
))}
|
||||
</ListGroup>
|
||||
<div className="card-footer text-center border-top" onClick={handleToggle}>
|
||||
<Link className="card-link d-block" to="/notifications">
|
||||
View all
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const JKProfileAvatarUpload = ({show, toggle}) => {
|
|||
<JKModalDialog
|
||||
show={show}
|
||||
onToggle={toggle}
|
||||
title={t('lobby.chat_notifications.title', { ns: 'sessions' })}
|
||||
title={t('photo_modal.title', { ns: 'profile' })}
|
||||
showFooter={true}
|
||||
>
|
||||
<div className='d-flex flex-column'>
|
||||
|
|
|
|||
Loading…
Reference in New Issue