usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-26 23:22:47 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: update archived page

Browse source
This commit is contained in:
Steven 2023-12-20 23:23:26 +08:00
parent 762cb25227
commit cbdae24314
3 changed files with 87 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
web/src/components/ArchivedMemo.tsx
View file

@ -1,71 +0,0 @@
import { Tooltip } from "@mui/joy";
import { toast } from "react-hot-toast";
import { getDateTimeString } from "@/helpers/datetime";
import { useMemoStore } from "@/store/module";
import { Memo } from "@/types/proto/api/v2/memo_service";
import { useTranslate } from "@/utils/i18n";
import { showCommonDialog } from "./Dialog/CommonDialog";
import Icon from "./Icon";
import MemoContentV1 from "./MemoContentV1";
import "@/less/memo.less";
interface Props {
memo: Memo;
}
const ArchivedMemo: React.FC<Props> = (props: Props) => {
const { memo } = props;
const t = useTranslate();
const memoStore = useMemoStore();
const handleDeleteMemoClick = async () => {
showCommonDialog({
title: t("memo.delete-memo"),
content: t("memo.delete-confirm"),
style: "danger",
dialogName: "delete-memo-dialog",
onConfirm: async () => {
await memoStore.deleteMemoById(memo.id);
},
});
};
const handleRestoreMemoClick = async () => {
try {
await memoStore.patchMemo({
id: memo.id,
rowStatus: "NORMAL",
});
await memoStore.fetchMemos();
toast(t("message.restored-successfully"));
} catch (error: any) {
console.error(error);
toast.error(error.response.data.message);
}
};
return (
<div className={`memo-wrapper archived ${"memos-" + memo.id}`}>
<div className="memo-top-wrapper">
<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}>
<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} className="text-gray-500 dark:text-gray-400">
<Icon.Trash className="w-4 h-auto cursor-pointer" />
</button>
</Tooltip>
</div>
</div>
<MemoContentV1 content={memo.content} nodes={memo.nodes} />
</div>
);
};
export default ArchivedMemo;

63
web/src/pages/Archived.tsx
View file

@ -1,16 +1,23 @@
import { Tooltip } from "@mui/joy";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import ArchivedMemo from "@/components/ArchivedMemo";
import { showCommonDialog } from "@/components/Dialog/CommonDialog";
import Empty from "@/components/Empty";
import Icon from "@/components/Icon";
import MemoContentV1 from "@/components/MemoContentV1";
import MobileHeader from "@/components/MobileHeader";
import { memoServiceClient } from "@/grpcweb";
import { getDateTimeString } from "@/helpers/datetime";
import useLoading from "@/hooks/useLoading";
import { useMemoV1Store } 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 memoStore = useMemoV1Store();
const [archivedMemos, setArchivedMemos] = useState<Memo[]>([]);
useEffect(() => {
@ -30,6 +37,36 @@ const Archived = () => {
});
}, []);
const handleDeleteMemoClick = async (memo: Memo) => {
showCommonDialog({
title: t("memo.delete-memo"),
content: t("memo.delete-confirm"),
style: "danger",
dialogName: "delete-memo-dialog",
onConfirm: async () => {
await memoStore.deleteMemo(memo);
setArchivedMemos((prev) => prev.filter((m) => m.id !== memo.id));
},
});
};
const handleRestoreMemoClick = async (memo: Memo) => {
try {
await memoStore.updateMemo(
{
id: memo.id,
rowStatus: RowStatus.ACTIVE,
},
["row_status"]
);
setArchivedMemos((prev) => prev.filter((m) => m.id !== memo.id));
toast(t("message.restored-successfully"));
} catch (error: any) {
console.error(error);
toast.error(error.response.data.message);
}
};
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">
<MobileHeader />
@ -46,7 +83,29 @@ const Archived = () => {
) : (
<div className="w-full flex flex-col justify-start items-start">
{archivedMemos.map((memo) => (
<ArchivedMemo key={`${memo.id}-${memo.updateTime}`} memo={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-700 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>
</div>
<MemoContentV1 content={memo.content} nodes={memo.nodes} />
</div>
))}
</div>
)}

26
web/src/store/v1/memo.ts
View file

@ -29,5 +29,31 @@ export const useMemoV1Store = create(
getMemoById: (id: number) => {
return get().memoById.get(id);
},
updateMemo: async (update: Partial<Memo>, updateMask: string[]) => {
const { memo } = await memoServiceClient.updateMemo({
id: update.id!,
memo: update,
updateMask,
});
if (!memo) {
throw new Error("Memo not found");
}
set((state) => {
state.memoById.set(memo.id, memo);
return state;
});
return memo;
},
deleteMemo: async (memo: Memo) => {
await memoServiceClient.deleteMemo({
id: memo.id,
});
set((state) => {
state.memoById.delete(memo.id);
return state;
});
},
}))
);