diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx index 73e8a5a4..969142d6 100644 --- a/web/src/components/Memo.tsx +++ b/web/src/components/Memo.tsx @@ -11,7 +11,6 @@ import Icon from "./Icon"; import toastHelper from "./Toast"; import MemoContent from "./MemoContent"; import MemoResources from "./MemoResources"; -import showMemoCardDialog from "./MemoCardDialog"; import showShareMemoImageDialog from "./ShareMemoImageDialog"; import showPreviewImageDialog from "./PreviewImageDialog"; import "../less/memo.less"; @@ -51,14 +50,6 @@ const Memo: React.FC = (props: Props) => { }; }, [i18n.language]); - const handleShowMemoStoryDialog = () => { - if (isVisitorMode) { - return; - } - - showMemoCardDialog(memo); - }; - const handleViewMemoDetailPage = () => { navigate(`/m/${memo.id}`); }; @@ -116,7 +107,7 @@ const Memo: React.FC = (props: Props) => { const memoTemp = await memoService.getMemoById(Number(memoId) ?? UNKNOWN_ID); if (memoTemp) { - showMemoCardDialog(memoTemp); + navigate(`/m/${memoTemp.id}`); } else { toastHelper.error(t("message.memo-not-found")); targetEl.classList.remove("memo-link-text"); @@ -209,9 +200,7 @@ const Memo: React.FC = (props: Props) => { {memo.pinned &&
}
- - {displayTimeStr} - + {displayTimeStr} {memo.visibility !== "PRIVATE" && !isVisitorMode && ( = (props: Props) => { - const { t } = useTranslation(); - const memos = useAppSelector((state) => state.memo.memos); - const [memo, setMemo] = useState({ - ...props.memo, - }); - const [linkMemos, setLinkMemos] = useState([]); - const [linkedMemos, setLinkedMemos] = useState([]); - const isVisitorMode = userService.isVisitorMode(); - - useEffect(() => { - const fetchLinkedMemos = async () => { - try { - const linkMemos: LinkedMemo[] = []; - const matchedArr = [...memo.content.matchAll(MARK_REG)]; - for (const matchRes of matchedArr) { - if (matchRes && matchRes.length === 3) { - const id = Number(matchRes[2]); - if (id === memo.id) { - continue; - } - - const memoTemp = await memoService.getMemoById(id); - if (memoTemp) { - linkMemos.push({ - ...memoTemp, - createdAtStr: utils.getDateTimeString(memoTemp.displayTs), - dateStr: utils.getDateString(memoTemp.displayTs), - }); - } - } - } - setLinkMemos([...linkMemos]); - - const linkedMemos = await memoService.getLinkedMemos(memo.id); - setLinkedMemos( - linkedMemos - .filter((m) => m.rowStatus === "NORMAL" && m.id !== memo.id) - .sort((a, b) => utils.getTimeStampByDate(b.displayTs) - utils.getTimeStampByDate(a.displayTs)) - .map((m) => ({ - ...m, - createdAtStr: utils.getDateTimeString(m.displayTs), - dateStr: utils.getDateString(m.displayTs), - })) - ); - } catch (error) { - // do nth - } - }; - - fetchLinkedMemos(); - memoService.getMemoById(memo.id).then((memo) => { - setMemo(memo); - }); - }, [memos, memo.id]); - - const handleMemoCreatedAtClick = () => { - if (isVisitorMode) { - return; - } - - showChangeMemoCreatedTsDialog(memo.id); - }; - - const handleMemoContentClick = useCallback(async (e: React.MouseEvent) => { - const targetEl = e.target as HTMLElement; - - if (targetEl.className === "memo-link-text") { - const nextMemoId = targetEl.dataset?.value; - const memoTemp = await memoService.getMemoById(Number(nextMemoId) ?? UNKNOWN_ID); - - if (memoTemp) { - const nextMemo = { - ...memoTemp, - createdAtStr: utils.getDateTimeString(memoTemp.displayTs), - }; - setLinkMemos([]); - setLinkedMemos([]); - setMemo(nextMemo); - } else { - toastHelper.error(t("message.memo-not-found")); - targetEl.classList.remove("memo-link-text"); - } - } - }, []); - - const handleLinkedMemoClick = useCallback((memo: Memo) => { - setLinkMemos([]); - setLinkedMemos([]); - setMemo(memo); - }, []); - - const handleGotoMemoLinkBtnClick = () => { - window.open(`/m/${memo.id}`); - }; - - const handleEditMemoBtnClick = () => { - props.destroy(); - editorStateService.setEditMemoWithId(memo.id); - }; - - const handleCopyContent = () => { - copy(memo.content); - toastHelper.success(t("message.succeed-copy-content")); - }; - - return ( - <> -
-
-

- {utils.getDateTimeString(memo.displayTs)} -

-
- {!isVisitorMode && ( - <> - - - - / - - )} - -
-
-
- - -
-
- {linkMemos.map((_, idx) => { - if (idx < 4) { - return ( -
- ); - } else { - return null; - } - })} -
- {linkMemos.length > 0 ? ( -
-

{linkMemos.length} related MEMO

- {linkMemos.map((memo, index) => { - const rawtext = parseHTMLToRawText(marked(memo.content)).replaceAll("\n", " "); - return ( -
handleLinkedMemoClick(memo)}> - {memo.dateStr} - {rawtext} -
- ); - })} -
- ) : null} - {linkedMemos.length > 0 ? ( -
-

{linkedMemos.length} linked MEMO

- {linkedMemos.map((memo, index) => { - const rawtext = parseHTMLToRawText(marked(memo.content)).replaceAll("\n", " "); - return ( -
handleLinkedMemoClick(memo)}> - {memo.dateStr} - {rawtext} -
- ); - })} -
- ) : null} - - ); -}; - -export default function showMemoCardDialog(memo: Memo): void { - generateDialog( - { - className: "memo-card-dialog", - }, - MemoCardDialog, - { memo } - ); -} diff --git a/web/src/less/memo-card-dialog.less b/web/src/less/memo-card-dialog.less deleted file mode 100644 index ce16fb14..00000000 --- a/web/src/less/memo-card-dialog.less +++ /dev/null @@ -1,83 +0,0 @@ -.dialog-wrapper.memo-card-dialog { - @apply px-4; - - > .dialog-container { - @apply w-full p-0 bg-transparent flex flex-col justify-start items-center; - - > .memo-card-container { - @apply flex flex-col justify-start items-start relative w-128 max-w-full py-3 px-6 mb-3 rounded-lg bg-yellow-200; - - > * { - z-index: 1; - } - - > .header-container { - @apply flex flex-row justify-between items-center w-full h-auto pb-0 my-0; - - > .time-text { - @apply text-sm text-gray-500 font-mono; - } - - > .btns-container { - @apply flex flex-row justify-end items-center; - - > .btn { - @apply flex flex-row justify-center items-center w-6 h-6 p-1 ml-2 rounded text-gray-600 hover:bg-white; - } - - > .split-line { - @apply font-mono text-gray-300 ml-2; - } - } - } - - > .memo-container { - @apply w-full flex flex-col justify-start items-start pt-2; - } - - > .normal-text { - @apply mt-2 text-sm text-gray-500; - } - - > .layer-container, - > .background-layer-container { - @apply bg-white; - position: absolute; - bottom: -3px; - left: 3px; - width: calc(100% - 6px); - height: 100%; - border-radius: 8px; - z-index: -1; - border-bottom: 1px solid lightgray; - } - - > .layer-container { - @apply bg-white; - z-index: 0; - border: 1px solid lightgray; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - } - } - - > .linked-memos-wrapper { - @apply flex flex-col justify-start items-start w-128 max-w-full mt-2 py-3 px-6 rounded-lg bg-white last:mb-8; - - > .normal-text { - @apply text-sm; - } - - > .linked-memo-container { - @apply text-sm leading-6 mt-2 cursor-pointer max-w-full truncate hover:opacity-80; - - > .time-text { - @apply font-mono text-gray-500; - } - } - } - } -} diff --git a/web/src/less/memo.less b/web/src/less/memo.less index e0086480..052b727a 100644 --- a/web/src/less/memo.less +++ b/web/src/less/memo.less @@ -28,7 +28,7 @@ @apply flex flex-row justify-start items-center; > .time-text { - @apply text-xs text-gray-400 cursor-pointer; + @apply text-xs text-gray-400; font-size: 13px; }