forked from Kieran/snort
fix: render less on notifications page
This commit is contained in:
parent
758107fd50
commit
d60862da11
@ -12,3 +12,7 @@
|
||||
font-weight: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.show-more-container {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
@ -1,7 +1,8 @@
|
||||
import "./ShowMore.css";
|
||||
import { useIntl } from "react-intl";
|
||||
|
||||
import messages from "../messages";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
import { useEffect } from "react";
|
||||
import classNames from "classnames";
|
||||
|
||||
interface ShowMoreProps {
|
||||
text?: string;
|
||||
@ -10,16 +11,27 @@ interface ShowMoreProps {
|
||||
}
|
||||
|
||||
const ShowMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
|
||||
const { formatMessage } = useIntl();
|
||||
const defaultText = formatMessage(messages.ShowMore);
|
||||
const classNames = className ? `show-more ${className}` : "show-more";
|
||||
return (
|
||||
<div className="show-more-container">
|
||||
<button className={classNames} onClick={onClick}>
|
||||
{text || defaultText}
|
||||
<button className={classNames("show-more", className)} onClick={onClick}>
|
||||
{text || <FormattedMessage defaultMessage="Show More" />}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShowMore;
|
||||
|
||||
export function ShowMoreInView({ text, onClick, className }: ShowMoreProps) {
|
||||
const { ref, inView } = useInView();
|
||||
|
||||
useEffect(() => {
|
||||
if (inView) {
|
||||
onClick();
|
||||
}
|
||||
}, [inView]);
|
||||
|
||||
return <div className={classNames("show-more-container", className)} ref={ref}>
|
||||
{text}
|
||||
</div>
|
||||
}
|
@ -24,6 +24,7 @@ import { Day } from "Const";
|
||||
import Tabs, { Tab } from "Element/Tabs";
|
||||
import classNames from "classnames";
|
||||
import { AsyncIcon } from "Element/AsyncIcon";
|
||||
import { ShowMoreInView } from "Element/Event/ShowMore";
|
||||
|
||||
function notificationContext(ev: TaggedNostrEvent) {
|
||||
switch (ev.kind) {
|
||||
@ -66,6 +67,7 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
|
||||
const login = useLogin();
|
||||
const { isMuted } = useModeration();
|
||||
const groupInterval = 3600 * 3;
|
||||
const [showN, setShowN] = useState(10);
|
||||
|
||||
useEffect(() => {
|
||||
markNotificationsRead(login);
|
||||
@ -111,7 +113,9 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
|
||||
<NotificationSummary evs={myNotifications as TaggedNostrEvent[]} />
|
||||
|
||||
{login.publicKey &&
|
||||
[...timeGrouped.entries()].map(([k, g]) => <NotificationGroup key={k} evs={g} onClick={onClick} />)}
|
||||
[...timeGrouped.entries()].slice(0, showN).map(([k, g]) => <NotificationGroup key={k} evs={g} onClick={onClick} />)}
|
||||
|
||||
<ShowMoreInView onClick={() => setShowN(s => Math.min(timeGrouped.size, s + 5))} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user