this repo has no description
Fix notifications not refreshing and not clearing "new"
Still quite clunky, but let's see
+34
-33
+34
-33
src/pages/home.jsx
+34
-33
src/pages/home.jsx
···
34
34
})();
35
35
}, []);
36
36
37
-
const notificationLinkRef = useRef();
38
-
const [menuState, setMenuState] = useState(undefined);
39
-
40
37
return (
41
38
<>
42
39
{(snapStates.settings.shortcutsColumnsMode ||
···
49
46
path="/"
50
47
id="home"
51
48
headerStart={false}
52
-
headerEnd={
53
-
<>
54
-
<Link
55
-
ref={notificationLinkRef}
56
-
to="/notifications"
57
-
class={`button plain notifications-button ${
58
-
snapStates.notificationsShowNew ? 'has-badge' : ''
59
-
} ${menuState}`}
60
-
onClick={(e) => {
61
-
e.stopPropagation();
62
-
if (window.matchMedia('(min-width: calc(40em))').matches) {
63
-
e.preventDefault();
64
-
setMenuState((state) => {
65
-
console.log('state', state, !state ? 'open' : undefined);
66
-
return !state ? 'open' : undefined;
67
-
});
68
-
}
69
-
}}
70
-
>
71
-
<Icon icon="notification" size="l" alt="Notifications" />
72
-
</Link>
73
-
<NotificationsMenu
74
-
state={menuState}
75
-
anchorRef={notificationLinkRef}
76
-
onClose={() => setMenuState(undefined)}
77
-
/>
78
-
</>
79
-
}
49
+
headerEnd={<NotificationsLink />}
80
50
/>
81
51
)}
82
52
<button
···
101
71
);
102
72
}
103
73
74
+
function NotificationsLink() {
75
+
const snapStates = useSnapshot(states);
76
+
const notificationLinkRef = useRef();
77
+
const [menuState, setMenuState] = useState(undefined);
78
+
return (
79
+
<>
80
+
<Link
81
+
ref={notificationLinkRef}
82
+
to="/notifications"
83
+
class={`button plain notifications-button ${
84
+
snapStates.notificationsShowNew ? 'has-badge' : ''
85
+
} ${menuState}`}
86
+
onClick={(e) => {
87
+
e.stopPropagation();
88
+
if (window.matchMedia('(min-width: calc(40em))').matches) {
89
+
e.preventDefault();
90
+
setMenuState((state) => (!state ? 'open' : undefined));
91
+
}
92
+
}}
93
+
>
94
+
<Icon icon="notification" size="l" alt="Notifications" />
95
+
</Link>
96
+
<NotificationsMenu
97
+
state={menuState}
98
+
anchorRef={notificationLinkRef}
99
+
onClose={() => setMenuState(undefined)}
100
+
/>
101
+
</>
102
+
);
103
+
}
104
+
104
105
const NOTIFICATIONS_LIMIT = 30;
105
106
const NOTIFICATIONS_DISPLAY_LIMIT = 5;
106
107
function NotificationsMenu({ anchorRef, state, onClose }) {
···
147
148
}
148
149
149
150
useEffect(() => {
150
-
loadNotifications();
151
-
}, []);
151
+
if (state === 'open') loadNotifications();
152
+
}, [state]);
152
153
153
154
return (
154
155
<ControlledMenu