chore: fix fetch memos

This commit is contained in:
Steven
2023-12-22 19:47:46 +08:00
parent 919f75af1a
commit 29b540ade3
5 changed files with 48 additions and 27 deletions

View File

@ -6,10 +6,10 @@ import MemoView from "@/components/MemoView";
import MobileHeader from "@/components/MobileHeader";
import UserAvatar from "@/components/UserAvatar";
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
import { getTimeStampByDate } from "@/helpers/datetime";
import useLoading from "@/hooks/useLoading";
import { useFilterStore } from "@/store/module";
import { useMemoV1Store, useUserV1Store } from "@/store/v1";
import { Memo } from "@/types/proto/api/v2/memo_service";
import { useMemoList, useMemoV1Store, useUserV1Store } from "@/store/v1";
import { User } from "@/types/proto/api/v2/user_service";
import { useTranslate } from "@/utils/i18n";
@ -21,10 +21,13 @@ const UserProfile = () => {
const [user, setUser] = useState<User>();
const filterStore = useFilterStore();
const memoStore = useMemoV1Store();
const [memos, setMemos] = useState<Memo[]>([]);
const memoList = useMemoList();
const [isRequesting, setIsRequesting] = useState(true);
const [isComplete, setIsComplete] = useState(false);
const [isRequesting, setIsRequesting] = useState(false);
const { tag: tagQuery, text: textQuery } = filterStore.state;
const sortedMemos = memoList.value
.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
.sort((a, b) => Number(b.pinned) - Number(a.pinned));
useEffect(() => {
const username = params.username;
@ -45,6 +48,7 @@ const UserProfile = () => {
}, [params.username]);
useEffect(() => {
memoList.reset();
fetchMemos();
}, [tagQuery, textQuery]);
@ -54,16 +58,23 @@ const UserProfile = () => {
}
const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`];
if (tagQuery) filters.push(`tags == "${tagQuery}"`);
if (textQuery) filters.push(`content_search == "${textQuery}"`);
const contentSearch: string[] = [];
if (tagQuery) {
contentSearch.push(`"#${tagQuery}"`);
}
if (textQuery) {
contentSearch.push(`"${textQuery}"`);
}
if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`);
}
setIsRequesting(true);
const data = await memoStore.fetchMemos({
limit: DEFAULT_MEMO_LIMIT,
offset: memos.length,
offset: memoList.size(),
filter: filters.join(" && "),
});
setIsRequesting(false);
setMemos([...memos, ...data]);
setIsComplete(data.length < DEFAULT_MEMO_LIMIT);
};
@ -78,16 +89,15 @@ const UserProfile = () => {
<UserAvatar className="!w-20 !h-20 mb-2 drop-shadow" avatarUrl={user?.avatarUrl} />
<p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
</div>
{memos.map((memo) => (
{sortedMemos.map((memo) => (
<MemoView key={memo.id} memo={memo} lazyRendering showVisibility showPinnedStyle showParent />
))}
{isRequesting && (
{isRequesting ? (
<div className="flex flex-col justify-start items-center w-full my-8">
<p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
</div>
)}
{isComplete ? (
memos.length === 0 && (
) : isComplete ? (
sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty />
<p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>