mirror of https://github.com/usememos/memos
feat: add inbox ui
Steven
1 year ago
parent
79bb3253b6
commit
3c36cc2953
@ -0,0 +1,92 @@
|
||||
import { Tooltip } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { activityServiceClient } from "@/grpcweb";
|
||||
import useNavigateTo from "@/hooks/useNavigateTo";
|
||||
import useInboxStore from "@/store/v1/inbox";
|
||||
import { Activity } from "@/types/proto/api/v2/activity_service";
|
||||
import { Inbox, Inbox_Status } from "@/types/proto/api/v2/inbox_service";
|
||||
import Icon from "../Icon";
|
||||
|
||||
interface Props {
|
||||
inbox: Inbox;
|
||||
}
|
||||
|
||||
const MemoCommentMessage = ({ inbox }: Props) => {
|
||||
const navigateTo = useNavigateTo();
|
||||
const inboxStore = useInboxStore();
|
||||
const [activity, setActivity] = useState<Activity | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
if (!inbox.activityId) {
|
||||
return;
|
||||
}
|
||||
|
||||
activityServiceClient
|
||||
.getActivity({
|
||||
id: inbox.activityId,
|
||||
})
|
||||
.then(({ activity }) => {
|
||||
setActivity(activity);
|
||||
});
|
||||
}, [inbox.activityId]);
|
||||
|
||||
const handleNavigateToMemo = () => {
|
||||
if (!activity?.payload?.memoComment?.relatedMemoId) {
|
||||
return;
|
||||
}
|
||||
navigateTo(`/m/${activity?.payload?.memoComment?.relatedMemoId}`);
|
||||
};
|
||||
|
||||
const handleArchiveMessage = async () => {
|
||||
await inboxStore.updateInbox(
|
||||
{
|
||||
name: inbox.name,
|
||||
status: Inbox_Status.ARCHIVED,
|
||||
},
|
||||
["status"]
|
||||
);
|
||||
toast.success("Archived");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-row justify-start items-start gap-3">
|
||||
<div
|
||||
className={classNames(
|
||||
"shrink-0 mt-2 p-2 rounded-full border",
|
||||
inbox.status === Inbox_Status.UNREAD
|
||||
? "border-blue-600 text-blue-600 bg-blue-50 dark:bg-zinc-800"
|
||||
: "border-gray-400 text-gray-400 bg-gray-50 dark:bg-zinc-800"
|
||||
)}
|
||||
>
|
||||
<Icon.MessageCircle className="w-4 sm:w-5 h-auto" />
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
"border w-full p-3 sm:p-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-800 hover:bg-gray-100 dark:hover:bg-zinc-800",
|
||||
inbox.status !== Inbox_Status.UNREAD && "opacity-60"
|
||||
)}
|
||||
>
|
||||
<div className="w-full flex flex-row justify-between items-center">
|
||||
<span className="text-sm text-gray-500">{inbox.createTime?.toLocaleString()}</span>
|
||||
<div>
|
||||
{inbox.status === Inbox_Status.UNREAD && (
|
||||
<Tooltip title="Archive" placement="top">
|
||||
<Icon.Inbox className="w-4 h-auto cursor-pointer text-gray-400 hover:text-blue-600" onClick={handleArchiveMessage} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="text-base leading-tight cursor-pointer text-gray-500 dark:text-gray-400 hover:underline hover:text-blue-600"
|
||||
onClick={handleNavigateToMemo}
|
||||
>
|
||||
{inbox.sender} has a comment in your memo #{activity?.payload?.memoComment?.relatedMemoId}.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemoCommentMessage;
|
||||
@ -0,0 +1,51 @@
|
||||
import { useEffect } from "react";
|
||||
import Empty from "@/components/Empty";
|
||||
import Icon from "@/components/Icon";
|
||||
import MemoCommentMessage from "@/components/Inbox/MemoCommentMessage";
|
||||
import MobileHeader from "@/components/MobileHeader";
|
||||
import useInboxStore from "@/store/v1/inbox";
|
||||
import { Inbox_Type } from "@/types/proto/api/v2/inbox_service";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
||||
const Inboxes = () => {
|
||||
const t = useTranslate();
|
||||
const inboxStore = useInboxStore();
|
||||
const inboxes = inboxStore.inboxes.sort((a, b) => {
|
||||
return a.status - b.status;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
inboxStore.fetchInboxes();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
|
||||
<MobileHeader showSearch={false} />
|
||||
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
|
||||
<div className="relative w-full flex flex-row justify-between items-center">
|
||||
<p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
|
||||
<Icon.Bell className="w-5 h-auto mr-1" /> {t("common.inbox")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700">
|
||||
{inboxes.length === 0 && (
|
||||
<div className="w-full mt-4 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="flex flex-col justify-start items-start w-full mt-4 gap-4">
|
||||
{inboxes.map((inbox) => {
|
||||
if (inbox.type === Inbox_Type.TYPE_MEMO_COMMENT) {
|
||||
return <MemoCommentMessage key={`${inbox.name}-${inbox.status}`} inbox={inbox} />;
|
||||
}
|
||||
return undefined;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Inboxes;
|
||||
@ -0,0 +1,32 @@
|
||||
import { create } from "zustand";
|
||||
import { inboxServiceClient } from "@/grpcweb";
|
||||
import { Inbox } from "@/types/proto/api/v2/inbox_service";
|
||||
|
||||
interface InboxStore {
|
||||
inboxes: Inbox[];
|
||||
fetchInboxes: () => Promise<Inbox[]>;
|
||||
updateInbox: (inbox: Partial<Inbox>, updateMask: string[]) => Promise<Inbox>;
|
||||
}
|
||||
|
||||
const useInboxStore = create<InboxStore>()((set, get) => ({
|
||||
inboxes: [],
|
||||
fetchInboxes: async () => {
|
||||
const { inboxes } = await inboxServiceClient.listInboxes({});
|
||||
set({ inboxes });
|
||||
return inboxes;
|
||||
},
|
||||
updateInbox: async (inbox: Partial<Inbox>, updateMask: string[]) => {
|
||||
const { inbox: updatedInbox } = await inboxServiceClient.updateInbox({
|
||||
inbox,
|
||||
updateMask,
|
||||
});
|
||||
if (!updatedInbox) {
|
||||
throw new Error("Inbox not found");
|
||||
}
|
||||
const inboxes = get().inboxes;
|
||||
set({ inboxes: inboxes.map((i) => (i.name === updatedInbox.name ? updatedInbox : i)) });
|
||||
return updatedInbox;
|
||||
},
|
||||
}));
|
||||
|
||||
export default useInboxStore;
|
||||
Loading…
Reference in New Issue