YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add infinite scroll for memos (#1614)

Browse Source 
Add infinite scroll for memos on home
This commit is contained in:
João Nuno Mota
2023-05-01 06:26:15 +01:00
committed by GitHub
parent 3314fe8b0e
commit b98f85d8a7
1 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/components/MemoList.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useFilterStore, useMemoStore, useShortcutStore, useUserStore } from "@/store/module"; import { useFilterStore, useMemoStore, useShortcutStore, useUserStore } from "@/store/module";
@ -86,6 +86,8 @@ const MemoList = () => {
unpinnedMemos.sort(memoSort); unpinnedMemos.sort(memoSort);
const sortedMemos = pinnedMemos.concat(unpinnedMemos).filter((m) => m.rowStatus === "NORMAL"); const sortedMemos = pinnedMemos.concat(unpinnedMemos).filter((m) => m.rowStatus === "NORMAL");
const statusRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
memoStore memoStore
.fetchMemos() .fetchMemos()
@ -116,7 +118,21 @@ const MemoList = () => {
if (sortedMemos.length < DEFAULT_MEMO_LIMIT) { if (sortedMemos.length < DEFAULT_MEMO_LIMIT) {
handleFetchMoreClick(); handleFetchMoreClick();
} }
}, [isFetching, isComplete, filter, sortedMemos.length]); const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
handleFetchMoreClick();
observer.unobserve(entry.target);
}
});
if (statusRef?.current) {
observer.observe(statusRef.current);
}
return () => {
if (statusRef?.current) {
observer.unobserve(statusRef.current);
}
};
}, [isFetching, isComplete, filter, sortedMemos.length, statusRef]);
const handleFetchMoreClick = async () => { const handleFetchMoreClick = async () => {
try { try {
@ -142,7 +158,7 @@ const MemoList = () => {
<p className="status-text">{t("memo.fetching-data")}</p> <p className="status-text">{t("memo.fetching-data")}</p>
</div> </div>
) : ( ) : (
<div className="status-text-container"> <div ref={statusRef} className="status-text-container">
<p className="status-text"> <p className="status-text">
{isComplete ? ( {isComplete ? (
sortedMemos.length === 0 ? ( sortedMemos.length === 0 ? (