this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Fix notifications not refreshing and not clearing "new"

Still quite clunky, but let's see

+34 -33
+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