nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Propagate learnings to Notifications page

Browse source
This commit is contained in:
Lim Chee Aun 2023-02-15 10:50:20 +08:00
parent d324d3a672
commit 8da6532cd3
1 changed files with 21 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/pages/notifications.jsx
View file

@ -56,9 +56,11 @@ function Notifications() {
const [showMore, setShowMore] = useState(false);
const [onlyMentions, setOnlyMentions] = useState(false);
const scrollableRef = useRef();
const { nearReachEnd, reachStart } = useScroll({
scrollableElement: scrollableRef.current,
});
const { nearReachEnd, scrollDirection, reachStart, nearReachStart } =
useScroll({
scrollableElement: scrollableRef.current,
});
const hiddenUI = scrollDirection === 'end' && !nearReachStart;
console.debug('RENDER Notifications');
@ -142,6 +144,7 @@ function Notifications() {
>
<div class={`timeline-deck deck ${onlyMentions ? 'only-mentions' : ''}`}>
<header
hidden={hiddenUI}
onClick={() => {
scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
}}
@ -162,22 +165,22 @@ function Notifications() {
<Loader hidden={uiState !== 'loading'} />
</div>
</div>
{snapStates.notificationsShowNew && uiState !== 'loading' && (
<button
class="updates-button"
type="button"
onClick={() => {
loadNotifications(true);
scrollableRef.current?.scrollTo({
top: 0,
behavior: 'smooth',
});
}}
>
<Icon icon="arrow-up" /> New notifications
</button>
)}
</header>
{snapStates.notificationsShowNew && uiState !== 'loading' && (
<button
class="updates-button"
type="button"
onClick={() => {
loadNotifications(true);
scrollableRef.current?.scrollTo({
top: 0,
behavior: 'smooth',
});
}}
>
<Icon icon="arrow-up" /> New notifications
</button>
)}
<div id="mentions-option">
<label>
<input