mirror of https://github.com/usememos/memos.git
fix: displaying archived memos (#2933)
* fix: web: Archived: Show displayTime instead of updateTime Archiving a memo is considered "updating" it, so the time it was archived will be displayed, instead of the time it was created. * fix: web: Archived: Add an option to fetch more memos Just like on other pages, add a button to fetch more memos. Otherwise, the user would only be able to load the latest 10 memos, as defined in DEFAULT_MEMO_LIMIT.
This commit is contained in:
Kazuki H
GitHub
parent
a76b86f18a
commit
5ac17fc012
|
|
@ -1,6 +1,6 @@
|
|||
import { Tooltip } from "@mui/joy";
|
||||
import { Button, Tooltip } from "@mui/joy";
|
||||
import { ClientError } from "nice-grpc-web";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { showCommonDialog } from "@/components/Dialog/CommonDialog";
|
||||
import Empty from "@/components/Empty";
|
||||
|
|
@ -9,49 +9,56 @@ import MemoContent from "@/components/MemoContent";
|
|||
import MemoFilter from "@/components/MemoFilter";
|
||||
import MobileHeader from "@/components/MobileHeader";
|
||||
import SearchBar from "@/components/SearchBar";
|
||||
import { memoServiceClient } from "@/grpcweb";
|
||||
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
|
||||
import { getTimeStampByDate } from "@/helpers/datetime";
|
||||
import { getDateTimeString } from "@/helpers/datetime";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import { useMemoStore } from "@/store/v1";
|
||||
import { useMemoList, useMemoStore } from "@/store/v1";
|
||||
import { RowStatus } from "@/types/proto/api/v2/common";
|
||||
import { Memo } from "@/types/proto/api/v2/memo_service";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
||||
const Archived = () => {
|
||||
const t = useTranslate();
|
||||
const loadingState = useLoading();
|
||||
const user = useCurrentUser();
|
||||
const memoStore = useMemoStore();
|
||||
const [archivedMemos, setArchivedMemos] = useState<Memo[]>([]);
|
||||
const memoList = useMemoList();
|
||||
const [isRequesting, setIsRequesting] = useState(true);
|
||||
const nextPageTokenRef = useRef<string | undefined>(undefined);
|
||||
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
|
||||
const sortedMemos = memoList.value
|
||||
.filter((memo) => memo.rowStatus === RowStatus.ARCHIVED)
|
||||
.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const filters = [`creator == "${user.name}"`, "row_status == 'ARCHIVED'"];
|
||||
const contentSearch: string[] = [];
|
||||
if (tagQuery) {
|
||||
contentSearch.push(JSON.stringify(`#${tagQuery}`));
|
||||
}
|
||||
if (textQuery) {
|
||||
contentSearch.push(JSON.stringify(textQuery));
|
||||
}
|
||||
if (contentSearch.length > 0) {
|
||||
filters.push(`content_search == [${contentSearch.join(", ")}]`);
|
||||
}
|
||||
const { memos } = await memoServiceClient.listMemos({
|
||||
filter: filters.join(" && "),
|
||||
});
|
||||
setArchivedMemos(memos);
|
||||
} catch (error: unknown) {
|
||||
toast.error((error as ClientError).details);
|
||||
}
|
||||
loadingState.setFinish();
|
||||
})();
|
||||
nextPageTokenRef.current = undefined;
|
||||
memoList.reset();
|
||||
fetchMemos();
|
||||
}, [tagQuery, textQuery]);
|
||||
|
||||
const fetchMemos = async () => {
|
||||
const filters = [`creator == "${user.name}"`, `row_status == "ARCHIVED"`];
|
||||
const contentSearch: string[] = [];
|
||||
if (tagQuery) {
|
||||
contentSearch.push(JSON.stringify(`#${tagQuery}`));
|
||||
}
|
||||
if (textQuery) {
|
||||
contentSearch.push(JSON.stringify(textQuery));
|
||||
}
|
||||
if (contentSearch.length > 0) {
|
||||
filters.push(`content_search == [${contentSearch.join(", ")}]`);
|
||||
}
|
||||
setIsRequesting(true);
|
||||
const data = await memoStore.fetchMemos({
|
||||
pageSize: DEFAULT_MEMO_LIMIT,
|
||||
filter: filters.join(" && "),
|
||||
pageToken: nextPageTokenRef.current,
|
||||
});
|
||||
setIsRequesting(false);
|
||||
nextPageTokenRef.current = data.nextPageToken;
|
||||
};
|
||||
|
||||
const handleDeleteMemoClick = async (memo: Memo) => {
|
||||
showCommonDialog({
|
||||
title: t("memo.delete-memo"),
|
||||
|
|
@ -60,7 +67,6 @@ const Archived = () => {
|
|||
dialogName: "delete-memo-dialog",
|
||||
onConfirm: async () => {
|
||||
await memoStore.deleteMemo(memo.id);
|
||||
setArchivedMemos((prev) => prev.filter((m) => m.id !== memo.id));
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -74,7 +80,6 @@ const Archived = () => {
|
|||
},
|
||||
["row_status"],
|
||||
);
|
||||
setArchivedMemos((prev) => prev.filter((m) => m.id !== memo.id));
|
||||
toast(t("message.restored-successfully"));
|
||||
} catch (error: unknown) {
|
||||
console.error(error);
|
||||
|
|
@ -83,7 +88,7 @@ const Archived = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
|
||||
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
|
||||
<MobileHeader />
|
||||
<div className="w-full px-4 sm:px-6">
|
||||
<div className="w-full flex flex-col justify-start items-start">
|
||||
|
|
@ -93,41 +98,49 @@ const Archived = () => {
|
|||
</div>
|
||||
</div>
|
||||
<MemoFilter className="px-2 pb-2" />
|
||||
{loadingState.isLoading ? (
|
||||
<div className="w-full h-32 flex flex-col justify-center items-center">
|
||||
<p className="opacity-70">{t("memo.fetching-data")}</p>
|
||||
</div>
|
||||
) : archivedMemos.length === 0 ? (
|
||||
<div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic">
|
||||
<Empty />
|
||||
<p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
|
||||
</div>
|
||||
) : (
|
||||
archivedMemos.map((memo) => (
|
||||
<div
|
||||
key={memo.id}
|
||||
className="relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-800 rounded-lg"
|
||||
>
|
||||
<div className="w-full mb-1 flex flex-row justify-between items-center">
|
||||
<div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
|
||||
<span className="text-sm text-gray-400 select-none">{getDateTimeString(memo.updateTime)}</span>
|
||||
</div>
|
||||
<div className="flex flex-row justify-end items-center gap-x-2">
|
||||
<Tooltip title={t("common.restore")} placement="top">
|
||||
<button onClick={() => handleRestoreMemoClick(memo)}>
|
||||
<Icon.ArchiveRestore className="w-4 h-auto cursor-pointer text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip title={t("common.delete")} placement="top">
|
||||
<button onClick={() => handleDeleteMemoClick(memo)} className="text-gray-500 dark:text-gray-400">
|
||||
<Icon.Trash className="w-4 h-auto cursor-pointer" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{sortedMemos.map((memo) => (
|
||||
<div
|
||||
key={memo.id}
|
||||
className="relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-800 rounded-lg"
|
||||
>
|
||||
<div className="w-full mb-1 flex flex-row justify-between items-center">
|
||||
<div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
|
||||
<span className="text-sm text-gray-400 select-none">{getDateTimeString(memo.displayTime)}</span>
|
||||
</div>
|
||||
<div className="flex flex-row justify-end items-center gap-x-2">
|
||||
<Tooltip title={t("common.restore")} placement="top">
|
||||
<button onClick={() => handleRestoreMemoClick(memo)}>
|
||||
<Icon.ArchiveRestore className="w-4 h-auto cursor-pointer text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip title={t("common.delete")} placement="top">
|
||||
<button onClick={() => handleDeleteMemoClick(memo)} className="text-gray-500 dark:text-gray-400">
|
||||
<Icon.Trash className="w-4 h-auto cursor-pointer" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<MemoContent key={`${memo.id}-${memo.updateTime}`} memoId={memo.id} content={memo.content} readonly={true} />
|
||||
</div>
|
||||
))
|
||||
<MemoContent key={`${memo.id}-${memo.displayTime}`} memoId={memo.id} content={memo.content} readonly={true} />
|
||||
</div>
|
||||
))}
|
||||
{isRequesting ? (
|
||||
<div className="flex flex-row justify-center items-center w-full my-4 text-gray-400">
|
||||
<Icon.Loader className="w-4 h-auto animate-spin mr-1" />
|
||||
<p className="text-sm italic">{t("memo.fetching-data")}</p>
|
||||
</div>
|
||||
) : !nextPageTokenRef.current ? (
|
||||
sortedMemos.length === 0 && (
|
||||
<div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic">
|
||||
<Empty />
|
||||
<p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="w-full flex flex-row justify-center items-center my-4">
|
||||
<Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}>
|
||||
{t("memo.fetch-more")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue