mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
feat: update memo detail page
This commit is contained in:
Steven
@ -1,10 +1,10 @@
|
||||
import { Dropdown, IconButton, Menu, MenuButton } from "@mui/joy";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import useNavigateTo from "@/hooks/useNavigateTo";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import Icon from "./Icon";
|
||||
|
||||
const FloatingNavButton = () => {
|
||||
const navigate = useNavigate();
|
||||
const navigateTo = useNavigateTo();
|
||||
const t = useTranslate();
|
||||
|
||||
return (
|
||||
@ -23,7 +23,7 @@ const FloatingNavButton = () => {
|
||||
<Menu placement="top-end">
|
||||
<button
|
||||
className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
|
||||
onClick={() => navigate("/")}
|
||||
onClick={() => navigateTo("/")}
|
||||
>
|
||||
{t("router.back-to-home")}
|
||||
</button>
|
||||
|
||||
@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
|
||||
import { UNKNOWN_ID } from "@/helpers/consts";
|
||||
import { getRelativeTimeString } from "@/helpers/datetime";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import useNavigateTo from "@/hooks/useNavigateTo";
|
||||
import { useFilterStore, useMemoStore, useUserStore } from "@/store/module";
|
||||
import { useUserV1Store } from "@/store/v1";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
@ -17,7 +18,6 @@ import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
|
||||
import MemoRelationListView from "./MemoRelationListView";
|
||||
import MemoResourceListView from "./MemoResourceListView";
|
||||
import showPreviewImageDialog from "./PreviewImageDialog";
|
||||
import showShareMemo from "./ShareMemoDialog";
|
||||
import UserAvatar from "./UserAvatar";
|
||||
import "@/less/memo.less";
|
||||
|
||||
@ -30,6 +30,7 @@ interface Props {
|
||||
const Memo: React.FC<Props> = (props: Props) => {
|
||||
const { memo, lazyRendering } = props;
|
||||
const t = useTranslate();
|
||||
const navigateTo = useNavigateTo();
|
||||
const { i18n } = useTranslation();
|
||||
const filterStore = useFilterStore();
|
||||
const userStore = useUserStore();
|
||||
@ -89,6 +90,14 @@ const Memo: React.FC<Props> = (props: Props) => {
|
||||
return <div className={`memo-wrapper min-h-[128px] ${"memos-" + memo.id}`} ref={memoContainerRef}></div>;
|
||||
}
|
||||
|
||||
const handleGotoMemoDetailPage = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (event.altKey) {
|
||||
showChangeMemoCreatedTsDialog(memo.id);
|
||||
} else {
|
||||
navigateTo(`/m/${memo.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTogglePinMemoBtnClick = async () => {
|
||||
try {
|
||||
if (memo.pinned) {
|
||||
@ -143,10 +152,6 @@ const Memo: React.FC<Props> = (props: Props) => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleGenerateMemoImageBtnClick = () => {
|
||||
showShareMemo(memo);
|
||||
};
|
||||
|
||||
const handleMemoContentClick = async (e: React.MouseEvent) => {
|
||||
const targetEl = e.target as HTMLElement;
|
||||
|
||||
@ -217,11 +222,6 @@ const Memo: React.FC<Props> = (props: Props) => {
|
||||
handleEditMemoClick();
|
||||
};
|
||||
|
||||
const handleMemoCreatedTimeClick = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
showChangeMemoCreatedTsDialog(memo.id);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned && !readonly ? "pinned" : ""}`} ref={memoContainerRef}>
|
||||
@ -236,7 +236,7 @@ const Memo: React.FC<Props> = (props: Props) => {
|
||||
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
|
||||
</>
|
||||
)}
|
||||
<span className="text-sm text-gray-400 select-none" onDoubleClick={handleMemoCreatedTimeClick}>
|
||||
<span className="text-sm text-gray-400 select-none" onClick={handleGotoMemoDetailPage}>
|
||||
{displayTime}
|
||||
</span>
|
||||
</div>
|
||||
@ -256,10 +256,6 @@ const Memo: React.FC<Props> = (props: Props) => {
|
||||
<Icon.Edit3 className="w-4 h-auto mr-2" />
|
||||
{t("common.edit")}
|
||||
</span>
|
||||
<span className="btn" onClick={handleGenerateMemoImageBtnClick}>
|
||||
<Icon.Share className="w-4 h-auto mr-2" />
|
||||
{t("common.share")}
|
||||
</span>
|
||||
<span className="btn" onClick={handleMarkMemoClick}>
|
||||
<Icon.Link className="w-4 h-auto mr-2" />
|
||||
{t("common.mark")}
|
||||
|
||||
@ -1,84 +1,55 @@
|
||||
import { Option, Select } from "@mui/joy";
|
||||
import { Button } from "@mui/joy";
|
||||
import copy from "copy-to-clipboard";
|
||||
import { toLower } from "lodash-es";
|
||||
import { QRCodeSVG } from "qrcode.react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { getMemoStats } from "@/helpers/api";
|
||||
import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
|
||||
import { getDateTimeString, getTimeStampByDate } from "@/helpers/datetime";
|
||||
import { getDateTimeString } from "@/helpers/datetime";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import toImage from "@/labs/html2image";
|
||||
import { useMemoStore, useUserStore } from "@/store/module";
|
||||
import { useUserV1Store } from "@/store/v1";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import { generateDialog } from "./Dialog";
|
||||
import showEmbedMemoDialog from "./EmbedMemoDialog";
|
||||
import Icon from "./Icon";
|
||||
import MemoContent from "./MemoContent";
|
||||
import MemoResourceListView from "./MemoResourceListView";
|
||||
import UserAvatar from "./UserAvatar";
|
||||
import "@/less/share-memo-dialog.less";
|
||||
|
||||
interface Props extends DialogProps {
|
||||
memo: Memo;
|
||||
}
|
||||
|
||||
interface State {
|
||||
memoAmount: number;
|
||||
memoVisibility: Visibility;
|
||||
showQRCode: boolean;
|
||||
}
|
||||
|
||||
const ShareMemoDialog: React.FC<Props> = (props: Props) => {
|
||||
const { memo: propsMemo, destroy } = props;
|
||||
const t = useTranslate();
|
||||
const userStore = useUserStore();
|
||||
const memoStore = useMemoStore();
|
||||
const user = userStore.state.user as User;
|
||||
const [state, setState] = useState<State>({
|
||||
memoAmount: 0,
|
||||
memoVisibility: propsMemo.visibility,
|
||||
showQRCode: true,
|
||||
});
|
||||
const createLoadingState = useLoading(false);
|
||||
const userV1Store = useUserV1Store();
|
||||
const downloadingImageState = useLoading(false);
|
||||
const loadingState = useLoading();
|
||||
const memoElRef = useRef<HTMLDivElement>(null);
|
||||
const memo = {
|
||||
...propsMemo,
|
||||
displayTsStr: getDateTimeString(propsMemo.displayTs),
|
||||
};
|
||||
const createdDays = Math.ceil((Date.now() - getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24);
|
||||
const user = userV1Store.getUserByUsername(memo.creatorUsername);
|
||||
|
||||
useEffect(() => {
|
||||
getMemoStats(user.username)
|
||||
.then(({ data }) => {
|
||||
setPartialState({
|
||||
memoAmount: data.length,
|
||||
});
|
||||
loadingState.setFinish();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
(async () => {
|
||||
await userV1Store.getOrFetchUserByUsername(memo.creatorUsername);
|
||||
loadingState.setFinish();
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const setPartialState = (partialState: Partial<State>) => {
|
||||
setState({
|
||||
...state,
|
||||
...partialState,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCloseBtnClick = () => {
|
||||
destroy();
|
||||
};
|
||||
|
||||
const handleDownloadBtnClick = () => {
|
||||
const handleDownloadImageBtnClick = () => {
|
||||
if (!memoElRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
createLoadingState.setLoading();
|
||||
|
||||
downloadingImageState.setLoading();
|
||||
toImage(memoElRef.current, {
|
||||
pixelRatio: window.devicePixelRatio * 2,
|
||||
})
|
||||
@ -88,7 +59,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
|
||||
a.download = `memos-${getDateTimeString(Date.now())}.png`;
|
||||
a.click();
|
||||
|
||||
createLoadingState.setFinish();
|
||||
downloadingImageState.setFinish();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
@ -104,23 +75,9 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
|
||||
toast.success(t("message.succeed-copy-link"));
|
||||
};
|
||||
|
||||
const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
|
||||
return {
|
||||
value: item.value,
|
||||
text: t(`memo.visibility.${toLower(item.value) as Lowercase<typeof item.value>}`),
|
||||
};
|
||||
});
|
||||
|
||||
const handleMemoVisibilityOptionChanged = async (value: string) => {
|
||||
const visibilityValue = value as Visibility;
|
||||
setPartialState({
|
||||
memoVisibility: visibilityValue,
|
||||
});
|
||||
await memoStore.patchMemo({
|
||||
id: memo.id,
|
||||
visibility: visibilityValue,
|
||||
});
|
||||
};
|
||||
if (loadingState.isLoading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -131,41 +88,23 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
|
||||
</button>
|
||||
</div>
|
||||
<div className="dialog-content-container w-full flex flex-col justify-start items-start relative">
|
||||
<div className="px-4 pb-3 w-full flex flex-row justify-start items-center">
|
||||
<span className="text-sm mr-2">{t("common.visibility")}:</span>
|
||||
<Select
|
||||
className="!min-w-[10rem] w-auto text-sm"
|
||||
value={state.memoVisibility}
|
||||
onChange={(_, visibility) => {
|
||||
if (visibility) {
|
||||
handleMemoVisibilityOptionChanged(visibility);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{memoVisibilityOptionSelectorItems.map((item) => (
|
||||
<Option key={item.value} value={item.value} className="whitespace-nowrap">
|
||||
{item.text}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
<div className="px-4 pb-3 w-full flex flex-row justify-start items-center space-x-2">
|
||||
<button disabled={createLoadingState.isLoading} className="btn-normal h-8" onClick={handleDownloadBtnClick}>
|
||||
{createLoadingState.isLoading ? (
|
||||
<Button color="neutral" variant="outlined" disabled={downloadingImageState.isLoading} onClick={handleDownloadImageBtnClick}>
|
||||
{downloadingImageState.isLoading ? (
|
||||
<Icon.Loader className="w-4 h-auto mr-1 animate-spin" />
|
||||
) : (
|
||||
<Icon.Download className="w-4 h-auto mr-1" />
|
||||
)}
|
||||
{t("common.image")}
|
||||
</button>
|
||||
<button className="btn-normal h-8" onClick={handleShowEmbedMemoDialog}>
|
||||
</Button>
|
||||
<Button color="neutral" variant="outlined" onClick={handleShowEmbedMemoDialog}>
|
||||
<Icon.Code className="w-4 h-auto mr-1" />
|
||||
{t("memo.embed")}
|
||||
</button>
|
||||
<button className="btn-normal h-8" onClick={handleCopyLinkBtnClick}>
|
||||
</Button>
|
||||
<Button color="neutral" variant="outlined" onClick={handleCopyLinkBtnClick}>
|
||||
<Icon.Link className="w-4 h-auto mr-1" />
|
||||
{t("common.link")}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="w-full rounded-lg border-t overflow-clip">
|
||||
<div
|
||||
@ -178,18 +117,13 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
|
||||
<MemoResourceListView className="!grid-cols-2" resourceList={memo.resourceList} />
|
||||
</div>
|
||||
<div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">
|
||||
<div className="mr-2">
|
||||
<img className="h-10 w-auto rounded-lg" src={`${user.avatarUrl || "/logo.webp"}`} alt="" />
|
||||
</div>
|
||||
<UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
|
||||
<div className="w-auto grow truncate flex mr-2 flex-col justify-center items-start">
|
||||
<span className="w-full text-sm truncate font-bold text-gray-600 dark:text-gray-300">{user.nickname || user.username}</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
{state.memoAmount} MEMOS / {createdDays} DAYS
|
||||
</span>
|
||||
</div>
|
||||
<QRCodeSVG
|
||||
value={`${window.location.origin}/m/${memo.id}`}
|
||||
size={40}
|
||||
size={28}
|
||||
bgColor={"#F3F4F6"}
|
||||
fgColor={"#4B5563"}
|
||||
includeMargin={false}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import useNavigateTo from "@/hooks/useNavigateTo";
|
||||
import { useGlobalStore, useUserStore } from "@/store/module";
|
||||
import { User_Role } from "@/types/proto/api/v2/user_service";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
@ -10,7 +10,7 @@ import Dropdown from "./kit/Dropdown";
|
||||
|
||||
const UserBanner = () => {
|
||||
const t = useTranslate();
|
||||
const navigate = useNavigate();
|
||||
const navigateTo = useNavigateTo();
|
||||
const globalStore = useGlobalStore();
|
||||
const userStore = useUserStore();
|
||||
const { systemStatus } = globalStore.state;
|
||||
@ -18,7 +18,7 @@ const UserBanner = () => {
|
||||
const title = user ? user.nickname : systemStatus.customizedProfile.name || "memos";
|
||||
|
||||
const handleMyAccountClick = () => {
|
||||
navigate(`/u/${encodeURIComponent(user.username)}`);
|
||||
navigateTo(`/u/${encodeURIComponent(user.username)}`);
|
||||
};
|
||||
|
||||
const handleAboutBtnClick = () => {
|
||||
|
||||
@ -1 +1,3 @@
|
||||
export * from "./useLoading";
|
||||
export * from "./useCurrentUser";
|
||||
export * from "./useNavigateTo";
|
||||
|
||||
20
web/src/hooks/useNavigateTo.ts
Normal file
20
web/src/hooks/useNavigateTo.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const useNavigateTo = () => {
|
||||
const navigateTo = useNavigate();
|
||||
|
||||
const navigateToWithViewTransition = (to: string) => {
|
||||
const document = window.document as any;
|
||||
if (!document.startViewTransition) {
|
||||
navigateTo(to);
|
||||
} else {
|
||||
document.startViewTransition(() => {
|
||||
navigateTo(to);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return navigateToWithViewTransition;
|
||||
};
|
||||
|
||||
export default useNavigateTo;
|
||||
@ -1,19 +1,30 @@
|
||||
import { Divider, Select, Tooltip, Option, IconButton } from "@mui/joy";
|
||||
import copy from "copy-to-clipboard";
|
||||
import { toLower } from "lodash-es";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useParams } from "react-router-dom";
|
||||
import FloatingNavButton from "@/components/FloatingNavButton";
|
||||
import Memo from "@/components/Memo";
|
||||
import Icon from "@/components/Icon";
|
||||
import MemoContent from "@/components/MemoContent";
|
||||
import MemoRelationListView from "@/components/MemoRelationListView";
|
||||
import MemoResourceListView from "@/components/MemoResourceListView";
|
||||
import showShareMemoDialog from "@/components/ShareMemoDialog";
|
||||
import UserAvatar from "@/components/UserAvatar";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
|
||||
import { getDateTimeString } from "@/helpers/datetime";
|
||||
import useNavigateTo from "@/hooks/useNavigateTo";
|
||||
import { useMemoStore } from "@/store/module";
|
||||
import { useUserV1Store } from "@/store/v1";
|
||||
import { User } from "@/types/proto/api/v2/user_service";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
||||
const MemoDetail = () => {
|
||||
const params = useParams();
|
||||
const navigateTo = useNavigateTo();
|
||||
const t = useTranslate();
|
||||
const memoStore = useMemoStore();
|
||||
const userV1Store = useUserV1Store();
|
||||
const loadingState = useLoading();
|
||||
const [user, setUser] = useState<User>();
|
||||
const memoId = Number(params.memoId);
|
||||
const memo = memoStore.state.memos.find((memo) => memo.id === memoId);
|
||||
@ -25,18 +36,43 @@ const MemoDetail = () => {
|
||||
.then(async (memo) => {
|
||||
const user = await userV1Store.getOrFetchUserByUsername(memo.creatorUsername);
|
||||
setUser(user);
|
||||
loadingState.setFinish();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
toast.error(error.response.data.message);
|
||||
});
|
||||
} else {
|
||||
navigateTo("/404");
|
||||
}
|
||||
}, [memoId]);
|
||||
|
||||
if (!memo) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
|
||||
return {
|
||||
value: item.value,
|
||||
text: t(`memo.visibility.${toLower(item.value) as Lowercase<typeof item.value>}`),
|
||||
};
|
||||
});
|
||||
|
||||
const handleMemoVisibilityOptionChanged = async (value: string) => {
|
||||
const visibilityValue = value as Visibility;
|
||||
await memoStore.patchMemo({
|
||||
id: memo.id,
|
||||
visibility: visibilityValue,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCopyLinkBtnClick = () => {
|
||||
copy(`${window.location.origin}/m/${memo.id}`);
|
||||
toast.success(t("message.succeed-copy-link"));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-800">
|
||||
<section className="relative top-0 w-full min-h-full overflow-x-hidden bg-white dark:bg-zinc-800">
|
||||
<div className="relative w-full min-h-full mx-auto flex flex-col justify-start items-center pb-6">
|
||||
<div className="w-full flex flex-col justify-start items-center py-8">
|
||||
<UserAvatar className="!w-20 h-auto mb-4 drop-shadow" avatarUrl={user?.avatarUrl} />
|
||||
@ -44,18 +80,48 @@ const MemoDetail = () => {
|
||||
<p className="text-2xl font-bold text-gray-700 dark:text-gray-300">{user?.nickname}</p>
|
||||
</div>
|
||||
</div>
|
||||
{!loadingState.isLoading &&
|
||||
(memo ? (
|
||||
<>
|
||||
<div className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4">
|
||||
<Memo memo={memo} />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p>Not found</p>
|
||||
</>
|
||||
))}
|
||||
<div className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4">
|
||||
<MemoContent content={memo.content} />
|
||||
<MemoResourceListView resourceList={memo.resourceList} />
|
||||
<MemoRelationListView relationList={memo.relationList} />
|
||||
<Divider className="!my-6" />
|
||||
<div className="w-full flex flex-col sm:flex-row justify-start sm:justify-between sm:items-center gap-2">
|
||||
<div className="flex flex-row justify-start items-center">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">{getDateTimeString(memo.displayTs)}</span>
|
||||
<span className="mx-1 font-mono opacity-80 text-gray-400">·</span>
|
||||
<Tooltip title={"The identifier of memo"} placement="top">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
|
||||
</Tooltip>
|
||||
<span className="mx-1 font-mono opacity-80 text-gray-400">·</span>
|
||||
<Tooltip title={"The visibility of memo"} placement="top">
|
||||
<Select
|
||||
className="w-auto text-sm"
|
||||
variant="plain"
|
||||
value={memo.visibility}
|
||||
onChange={(_, visibility) => {
|
||||
if (visibility) {
|
||||
handleMemoVisibilityOptionChanged(visibility);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{memoVisibilityOptionSelectorItems.map((item) => (
|
||||
<Option key={item.value} value={item.value} className="whitespace-nowrap">
|
||||
{item.text}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className="flex flex-row sm:justify-end items-center">
|
||||
<IconButton size="sm" onClick={handleCopyLinkBtnClick}>
|
||||
<Icon.Link className="w-4 h-auto text-gray-600" />
|
||||
</IconButton>
|
||||
<IconButton size="sm" onClick={() => showShareMemoDialog(memo)}>
|
||||
<Icon.Share className="w-4 h-auto text-gray-600" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user