oreolek/phanpy
1
0
Fork 0
Code Activity

Fix notifications not refreshing and not clearing "new"

Browse source 
Still quite clunky, but let's see
This commit is contained in:
Lim Chee Aun 2023-04-30 21:59:14 +08:00
parent 18c08076dd
commit ee2e78228e
1 changed files with 34 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/pages/home.jsx
View file

@ -34,9 +34,6 @@ function Home() {
})();
}, []);
const notificationLinkRef = useRef();
const [menuState, setMenuState] = useState(undefined);
return (
<>
{(snapStates.settings.shortcutsColumnsMode ||
@ -49,34 +46,7 @@ function Home() {
path="/"
id="home"
headerStart={false}
headerEnd={
<>
<Link
ref={notificationLinkRef}
to="/notifications"
class={`button plain notifications-button ${
snapStates.notificationsShowNew ? 'has-badge' : ''
} ${menuState}`}
onClick={(e) => {
e.stopPropagation();
if (window.matchMedia('(min-width: calc(40em))').matches) {
e.preventDefault();
setMenuState((state) => {
console.log('state', state, !state ? 'open' : undefined);
return !state ? 'open' : undefined;
});
}
}}
>
<Icon icon="notification" size="l" alt="Notifications" />
</Link>
<NotificationsMenu
state={menuState}
anchorRef={notificationLinkRef}
onClose={() => setMenuState(undefined)}
/>
</>
}
headerEnd={<NotificationsLink />}
/>
)}
<button
@ -101,6 +71,37 @@ function Home() {
);
}
function NotificationsLink() {
const snapStates = useSnapshot(states);
const notificationLinkRef = useRef();
const [menuState, setMenuState] = useState(undefined);
return (
<>
<Link
ref={notificationLinkRef}
to="/notifications"
class={`button plain notifications-button ${
snapStates.notificationsShowNew ? 'has-badge' : ''
} ${menuState}`}
onClick={(e) => {
e.stopPropagation();
if (window.matchMedia('(min-width: calc(40em))').matches) {
e.preventDefault();
setMenuState((state) => (!state ? 'open' : undefined));
}
}}
>
<Icon icon="notification" size="l" alt="Notifications" />
</Link>
<NotificationsMenu
state={menuState}
anchorRef={notificationLinkRef}
onClose={() => setMenuState(undefined)}
/>
</>
);
}
const NOTIFICATIONS_LIMIT = 30;
const NOTIFICATIONS_DISPLAY_LIMIT = 5;
function NotificationsMenu({ anchorRef, state, onClose }) {
@ -147,8 +148,8 @@ function NotificationsMenu({ anchorRef, state, onClose }) {
}
useEffect(() => {
loadNotifications();
}, []);
if (state === 'open') loadNotifications();
}, [state]);
return (
<ControlledMenu