refactor: user v1 store (#2047)

This commit is contained in:
boojack
2023-07-29 18:57:09 +08:00
committed by GitHub
parent f5793c142c
commit a6a1898c41
17 changed files with 97 additions and 46 deletions

View File

@ -8,7 +8,7 @@ import { Link } from "react-router-dom";
import { useFilterStore, useMemoStore, useUserStore } from "@/store/module";
import { UNKNOWN_ID } from "@/helpers/consts";
import { getRelativeTimeString } from "@/helpers/datetime";
import { useMemoCacheStore } from "@/store/zustand";
import { useMemoCacheStore, useUserV1Store } from "@/store/v1";
import { showCommonDialog } from "./Dialog/CommonDialog";
import Icon from "./Icon";
import MemoContent from "./MemoContent";
@ -18,6 +18,7 @@ import showShareMemo from "./ShareMemoDialog";
import showPreviewImageDialog from "./PreviewImageDialog";
import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
import UserAvatar from "./UserAvatar";
import "@/less/memo.less";
interface Props {
@ -36,11 +37,19 @@ const Memo: React.FC<Props> = (props: Props) => {
const userStore = useUserStore();
const memoStore = useMemoStore();
const memoCacheStore = useMemoCacheStore();
const userV1Store = useUserV1Store();
const [createdTimeStr, setCreatedTimeStr] = useState<string>(getRelativeTimeString(memo.displayTs));
const [relatedMemoList, setRelatedMemoList] = useState<Memo[]>([]);
const memoContainerRef = useRef<HTMLDivElement>(null);
const readonly = userStore.isVisitorMode() || userStore.getCurrentUsername() !== memo.creatorUsername;
const creator = userV1Store.getUserByUsername(memo.creatorUsername);
// Prepare memo creator.
useEffect(() => {
userV1Store.getOrFetchUserByUsername(memo.creatorUsername);
}, [memo.creatorUsername]);
// Prepare related memos.
useEffect(() => {
Promise.allSettled(memo.relationList.map((memoRelation) => memoCacheStore.getOrFetchMemoById(memoRelation.relatedMemoId))).then(
(results) => {
@ -217,14 +226,18 @@ const Memo: React.FC<Props> = (props: Props) => {
<div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned && !readonly ? "pinned" : ""}`} ref={memoContainerRef}>
<div className="memo-top-wrapper">
<div className="status-text-container">
{showCreator && creator && (
<>
<Link className="flex flex-row justify-start items-center" to={`/u/${memo.creatorUsername}`}>
<UserAvatar className="!w-5 !h-auto mr-1" avatarUrl={creator.avatarUrl} />
<span className="text-sm text-gray-600 dark:text-zinc-300">{creator.nickname}</span>
</Link>
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
</>
)}
<Link className="time-text" to={`/m/${memo.id}`} onClick={handleMemoCreatedTimeClick}>
{createdTimeStr}
</Link>
{showCreator && (
<Link className="name-text" to={`/u/${memo.creatorUsername}`}>
@{memo.creatorName}
</Link>
)}
</div>
<div className="btns-container space-x-2">
{showVisibility && memo.visibility !== "PRIVATE" && (