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

fix: auto fetch more (#2472)

Browse Source 
* fix: auto fetch more

* feat: use union type
This commit is contained in:
Zexi
2023-11-03 05:16:55 +08:00
committed by GitHub
parent 5d69d89627
commit 8b0083ffc5
6 changed files with 114 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { useEffect, useRef } from "react";
import { toast } from "react-hot-toast";
import { useParams } from "react-router-dom";
import MemoFilter from "@/components/MemoFilter";
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
import { getTimeStampByDate } from "@/helpers/datetime";
import useCurrentUser from "@/hooks/useCurrentUser";
@ -16,14 +17,14 @@ const MemoList: React.FC = () => {
const memoStore = useMemoStore();
const filterStore = useFilterStore();
const filter = filterStore.state;
const { memos } = memoStore.state;
const [isFetching, setIsFetching] = useState<boolean>(true);
const [isComplete, setIsComplete] = useState<boolean>(false);
const { loadingStatus, memos } = memoStore.state;
const user = useCurrentUser();
const { tag: tagQuery, duration, text: textQuery, visibility } = filter;
const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || textQuery || visibility);
const username = params.username || user?.username || "";
const fetchMoreRef = useRef<HTMLSpanElement>(null);
const shownMemos = (
showMemoFilter
? memos.filter((memo) => {
@ -74,74 +75,48 @@ const MemoList: React.FC = () => {
const sortedMemos = pinnedMemos.concat(unpinnedMemos).filter((m) => m.rowStatus === "NORMAL");
useEffect(() => {
memoStore
.fetchMemos(username)
.then((fetchedMemos) => {
if (fetchedMemos.length < DEFAULT_MEMO_LIMIT) {
setIsComplete(true);
} else {
setIsComplete(false);
}
setIsFetching(false);
})
.catch((error) => {
console.error(error);
toast.error(error.response.data.message);
});
}, [user?.username]);
useEffect(() => {
const pageWrapper = document.body.querySelector(".page-wrapper");
if (pageWrapper) {
pageWrapper.scrollTo(0, 0);
const root = document.body.querySelector("#root");
if (root) {
root.scrollTo(0, 0);
}
}, [filter]);
useEffect(() => {
if (isFetching || isComplete) {
return;
}
if (sortedMemos.length < DEFAULT_MEMO_LIMIT) {
handleFetchMoreClick();
return;
}
if (!fetchMoreRef.current) return;
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
handleFetchMoreClick();
observer.unobserve(entry.target);
}
if (!entry.isIntersecting) return;
observer.disconnect();
handleFetchMoreClick();
});
}, [isFetching, isComplete, filter, sortedMemos.length]);
observer.observe(fetchMoreRef.current);
return () => observer.disconnect();
}, [loadingStatus]);
const handleFetchMoreClick = async () => {
try {
setIsFetching(true);
const fetchedMemos = await memoStore.fetchMemos(username, DEFAULT_MEMO_LIMIT, memos.length);
if (fetchedMemos.length < DEFAULT_MEMO_LIMIT) {
setIsComplete(true);
} else {
setIsComplete(false);
}
setIsFetching(false);
await memoStore.fetchMemos(username, DEFAULT_MEMO_LIMIT, memos.length);
} catch (error: any) {
console.error(error);
toast.error(error.response.data.message);
}
};
return (
<div className="flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll pb-28 hide-scrollbar">
<MemoFilter />
{sortedMemos.map((memo) => (
<Memo key={`${memo.id}-${memo.displayTs}`} memo={memo} lazyRendering showVisibility showPinnedStyle />
<Memo key={memo.id} memo={memo} lazyRendering showVisibility showPinnedStyle />
))}
{isFetching ? (
{loadingStatus === "fetching" ? (
<div className="flex flex-col justify-start items-center w-full mt-2 mb-1">
<p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
</div>
) : (
<div className="flex flex-col justify-start items-center w-full my-6">
<div className="text-sm text-gray-400 italic">
{isComplete ? (
{loadingStatus === "complete" ? (
sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty />
@ -149,11 +124,9 @@ const MemoList: React.FC = () => {
</div>
)
) : (
<>
<span className="cursor-pointer hover:text-green-600" onClick={handleFetchMoreClick}>
{t("memo.fetch-more")}
</span>
</>
<span ref={fetchMoreRef} className="cursor-pointer hover:text-green-600" onClick={handleFetchMoreClick}>
{t("memo.fetch-more")}
</span>
)}
</div>
</div>