chore: set pull to refresh with screen size

This commit is contained in:
Steven 2024-11-20 20:28:49 +08:00
parent 7b70c203cc
commit 104948ae40

View File

@ -1,8 +1,9 @@
import { Button } from "@usememos/mui";
import { ArrowDownIcon, LoaderIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import PullToRefresh from "react-simple-pull-to-refresh";
import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
import useResponsiveWidth from "@/hooks/useResponsiveWidth";
import { useMemoList, useMemoStore } from "@/store/v1";
import { Memo } from "@/types/proto/api/v1/memo_service";
import { useTranslate } from "@/utils/i18n";
@ -22,6 +23,7 @@ interface State {
const PagedMemoList = (props: Props) => {
const t = useTranslate();
const { md } = useResponsiveWidth();
const memoStore = useMemoStore();
const memoList = useMemoList();
const [state, setState] = useState<State>({
@ -29,17 +31,9 @@ const PagedMemoList = (props: Props) => {
nextPageToken: "",
});
const sortedMemoList = props.listSort ? props.listSort(memoList.value) : memoList.value;
const handleRefresh = async () => {
memoList.reset();
setState((state) => ({ ...state, nextPageToken: "" }));
fetchMoreMemos("");
};
const setIsRequesting = (isRequesting: boolean) => {
setState((state) => ({ ...state, isRequesting }));
};
const fetchMoreMemos = async (nextPageToken: string) => {
setIsRequesting(true);
setState((state) => ({ ...state, isRequesting: true }));
const response = await memoStore.fetchMemos({
filter: props.filter || "",
pageSize: props.pageSize || DEFAULT_LIST_MEMOS_PAGE_SIZE,
@ -51,44 +45,61 @@ const PagedMemoList = (props: Props) => {
}));
};
useEffect(() => {
const refreshList = useCallback(async () => {
memoList.reset();
setState((state) => ({ ...state, nextPageToken: "" }));
fetchMoreMemos("");
}, []);
useEffect(() => {
refreshList();
}, [props.filter, props.pageSize]);
const children = (
<>
{sortedMemoList.map((memo) => props.renderer(memo))}
{state.isRequesting && (
<div className="w-full flex flex-row justify-center items-center my-4">
<LoaderIcon className="animate-spin text-zinc-500" />
</div>
)}
{!state.isRequesting && state.nextPageToken && (
<div className="w-full flex flex-row justify-center items-center my-4">
<Button variant="plain" onClick={() => fetchMoreMemos(state.nextPageToken)}>
{t("memo.load-more")}
<ArrowDownIcon className="ml-2 w-4 h-auto" />
</Button>
</div>
)}
{!state.isRequesting && !state.nextPageToken && sortedMemoList.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>
</div>
)}
</>
);
// In case of md screen, we don't need pull to refresh.
if (md) {
return children;
}
return (
<PullToRefresh
onRefresh={handleRefresh}
pullingContent={<></>}
onRefresh={() => refreshList()}
pullingContent={
<div className="w-full flex flex-row justify-center items-center my-4">
<LoaderIcon className="opacity-60" />
</div>
}
refreshingContent={
<div className="w-full flex flex-row justify-center items-center my-4">
<LoaderIcon className="animate-spin" />
</div>
}
>
<>
{sortedMemoList.map((memo) => props.renderer(memo))}
{state.isRequesting && (
<div className="w-full flex flex-row justify-center items-center my-4">
<LoaderIcon className="animate-spin text-zinc-500" />
</div>
)}
{!state.isRequesting && state.nextPageToken && (
<div className="w-full flex flex-row justify-center items-center my-4">
<Button variant="plain" onClick={() => fetchMoreMemos(state.nextPageToken)}>
{t("memo.load-more")}
<ArrowDownIcon className="ml-2 w-4 h-auto" />
</Button>
</div>
)}
{!state.isRequesting && !state.nextPageToken && sortedMemoList.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>
</div>
)}
</>
{children}
</PullToRefresh>
);
};