forked from Kieran/snort
fix: notifications marker
This commit is contained in:
parent
0a3e15df82
commit
68ebe5e7b1
@ -5,3 +5,4 @@ build/
|
|||||||
transifex.yml
|
transifex.yml
|
||||||
dist/
|
dist/
|
||||||
src-tauri/
|
src-tauri/
|
||||||
|
target/
|
@ -95,11 +95,6 @@ export interface LoginSession {
|
|||||||
*/
|
*/
|
||||||
blocked: Newest<Array<HexKey>>;
|
blocked: Newest<Array<HexKey>>;
|
||||||
|
|
||||||
/**
|
|
||||||
* Latest notification
|
|
||||||
*/
|
|
||||||
latestNotification: number;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Timestamp of last read notification
|
* Timestamp of last read notification
|
||||||
*/
|
*/
|
||||||
|
@ -48,9 +48,9 @@ header {
|
|||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
width: 9px;
|
width: 9px;
|
||||||
height: 9px;
|
height: 9px;
|
||||||
position: absolute;
|
position: relative;
|
||||||
top: 8px;
|
top: -4px;
|
||||||
right: 8px;
|
right: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 520px) {
|
@media (max-width: 520px) {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import "./Layout.css";
|
import "./Layout.css";
|
||||||
import { useEffect, useMemo, useState } from "react";
|
import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
|
||||||
import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
|
import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
|
||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import { useUserProfile } from "@snort/system-react";
|
import { useUserProfile } from "@snort/system-react";
|
||||||
@ -24,6 +24,7 @@ import { ProfileLink } from "@/Element/User/ProfileLink";
|
|||||||
import SearchBox from "../Element/SearchBox";
|
import SearchBox from "../Element/SearchBox";
|
||||||
import SnortApi from "@/External/SnortApi";
|
import SnortApi from "@/External/SnortApi";
|
||||||
import useEventPublisher from "@/Hooks/useEventPublisher";
|
import useEventPublisher from "@/Hooks/useEventPublisher";
|
||||||
|
import { Notifications } from "@/Cache";
|
||||||
|
|
||||||
export default function Layout() {
|
export default function Layout() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
@ -99,19 +100,13 @@ const AccountHeader = () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const { publicKey, latestNotification, readNotifications, readonly } = useLogin(s => ({
|
const { publicKey, readonly } = useLogin(s => ({
|
||||||
publicKey: s.publicKey,
|
publicKey: s.publicKey,
|
||||||
latestNotification: s.latestNotification,
|
|
||||||
readNotifications: s.readNotifications,
|
|
||||||
readonly: s.readonly,
|
readonly: s.readonly,
|
||||||
}));
|
}));
|
||||||
const profile = useUserProfile(publicKey);
|
const profile = useUserProfile(publicKey);
|
||||||
const { publisher } = useEventPublisher();
|
const { publisher } = useEventPublisher();
|
||||||
|
|
||||||
const hasNotifications = useMemo(
|
|
||||||
() => latestNotification > readNotifications,
|
|
||||||
[latestNotification, readNotifications],
|
|
||||||
);
|
|
||||||
const unreadDms = useMemo(() => (publicKey ? 0 : 0), [publicKey]);
|
const unreadDms = useMemo(() => (publicKey ? 0 : 0), [publicKey]);
|
||||||
|
|
||||||
async function goToNotifications() {
|
async function goToNotifications() {
|
||||||
@ -166,7 +161,7 @@ const AccountHeader = () => {
|
|||||||
)}
|
)}
|
||||||
<Link className="btn" to="/notifications" onClick={goToNotifications}>
|
<Link className="btn" to="/notifications" onClick={goToNotifications}>
|
||||||
<Icon name="bell-02" size={24} />
|
<Icon name="bell-02" size={24} />
|
||||||
{hasNotifications && <span className="has-unread"></span>}
|
<HasNotificationsMarker />
|
||||||
</Link>
|
</Link>
|
||||||
<ProfileLink pubkey={publicKey} user={profile}>
|
<ProfileLink pubkey={publicKey} user={profile}>
|
||||||
<Avatar pubkey={publicKey} user={profile} />
|
<Avatar pubkey={publicKey} user={profile} />
|
||||||
@ -200,3 +195,23 @@ function LogoHeader() {
|
|||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function HasNotificationsMarker() {
|
||||||
|
const readNotifications = useLogin(s => s.readNotifications);
|
||||||
|
const notifications = useSyncExternalStore(
|
||||||
|
c => Notifications.hook(c, "*"),
|
||||||
|
() => Notifications.snapshot(),
|
||||||
|
);
|
||||||
|
const latestNotification = useMemo(
|
||||||
|
() => notifications.reduce((acc, v) => (v.created_at > acc ? v.created_at : acc), 0),
|
||||||
|
[notifications],
|
||||||
|
);
|
||||||
|
const hasNotifications = useMemo(
|
||||||
|
() => latestNotification * 1000 > readNotifications,
|
||||||
|
[notifications, readNotifications],
|
||||||
|
);
|
||||||
|
|
||||||
|
if (hasNotifications) {
|
||||||
|
return <span className="has-unread"></span>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user