mirror of
https://github.com/usememos/memos.git
synced 2024-11-27 00:56:49 +03:00
chore: set pull to refresh with screen size
This commit is contained in:
parent
7b70c203cc
commit
104948ae40
@ -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>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user