this repo has no description
Propagate learnings to Notifications page
+21
-18
+21
-18
src/pages/notifications.jsx
+21
-18
src/pages/notifications.jsx
···
56
56
const [showMore, setShowMore] = useState(false);
57
57
const [onlyMentions, setOnlyMentions] = useState(false);
58
58
const scrollableRef = useRef();
59
-
const { nearReachEnd, reachStart } = useScroll({
60
-
scrollableElement: scrollableRef.current,
61
-
});
59
+
const { nearReachEnd, scrollDirection, reachStart, nearReachStart } =
60
+
useScroll({
61
+
scrollableElement: scrollableRef.current,
62
+
});
63
+
const hiddenUI = scrollDirection === 'end' && !nearReachStart;
62
64
63
65
console.debug('RENDER Notifications');
64
66
···
142
144
>
143
145
<div class={`timeline-deck deck ${onlyMentions ? 'only-mentions' : ''}`}>
144
146
<header
147
+
hidden={hiddenUI}
145
148
onClick={() => {
146
149
scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
147
150
}}
···
162
165
<Loader hidden={uiState !== 'loading'} />
163
166
</div>
164
167
</div>
168
+
{snapStates.notificationsShowNew && uiState !== 'loading' && (
169
+
<button
170
+
class="updates-button"
171
+
type="button"
172
+
onClick={() => {
173
+
loadNotifications(true);
174
+
scrollableRef.current?.scrollTo({
175
+
top: 0,
176
+
behavior: 'smooth',
177
+
});
178
+
}}
179
+
>
180
+
<Icon icon="arrow-up" /> New notifications
181
+
</button>
182
+
)}
165
183
</header>
166
-
{snapStates.notificationsShowNew && uiState !== 'loading' && (
167
-
<button
168
-
class="updates-button"
169
-
type="button"
170
-
onClick={() => {
171
-
loadNotifications(true);
172
-
scrollableRef.current?.scrollTo({
173
-
top: 0,
174
-
behavior: 'smooth',
175
-
});
176
-
}}
177
-
>
178
-
<Icon icon="arrow-up" /> New notifications
179
-
</button>
180
-
)}
181
184
<div id="mentions-option">
182
185
<label>
183
186
<input