Repository: usememos/memos
File: web/src/components/MemoEditor/MemoEditorDialog.tsx (TypeScript)

Code before:
import { IconButton } from "@mui/joy";
import clsx from "clsx";
import { useEffect, useRef } from "react";
import useCurrentUser from "@/hooks/useCurrentUser";
import useDateTime from "@/hooks/useDateTime";
import { useMemoStore, useTagStore } from "@/store/v1";
import { Memo } from "@/types/proto/api/v1/memo_service";
import MemoEditor, { Props as MemoEditorProps } from ".";
import { generateDialog } from "../Dialog";
import Icon from "../Icon";

interface Props extends DialogProps, MemoEditorProps {}

const MemoEditorDialog: React.FC<Props> = ({
  memoName,
  parentMemoName,
  placeholder,
  cacheKey,
  relationList,
  onConfirm,
  destroy,
}: Props) => {
  const tagStore = useTagStore();
  const memoStore = useMemoStore();
  const dateTime = useDateTime(memoStore.getMemoByName(memoName || "")?.displayTime);
  const memoPatchRef = useRef<Partial<Memo>>({
    displayTime: memoStore.getMemoByName(memoName || "")?.displayTime,
  });
  const user = useCurrentUser();

  useEffect(() => {
    tagStore.fetchTags({ user }, { skipCache: false });
  }, []);

  const updateDisplayTime = (displayTime: string) => {
    dateTime.setDateTime(displayTime);
    memoPatchRef.current.displayTime = new Date(displayTime);
  };

  const handleCloseBtnClick = () => {
    destroy();
  };

  const handleConfirm = (memoName: string) => {
    handleCloseBtnClick();
    if (onConfirm) {
      onConfirm(memoName);
    }
  };


Review comment (refactor):
The `dateTime.setDateTime/xxx` looks a bit strange. We could extract them directly.

```suggestion
  const { setDateTime, displayDateTime, datePickerDateTime } = useDateTime(memoStore.getMemoByName(memoName || "")?.displayTime);
```

Code after:
import { IconButton } from "@mui/joy";
import clsx from "clsx";
import { useEffect, useRef } from "react";
import useCurrentUser from "@/hooks/useCurrentUser";
import useDateTime from "@/hooks/useDateTime";
import { useMemoStore, useTagStore } from "@/store/v1";
import { Memo } from "@/types/proto/api/v1/memo_service";
import MemoEditor, { Props as MemoEditorProps } from ".";
import { generateDialog } from "../Dialog";
import Icon from "../Icon";

interface Props extends DialogProps, MemoEditorProps {}

const MemoEditorDialog: React.FC<Props> = ({
  memoName,
  parentMemoName,
  placeholder,
  cacheKey,
  relationList,
  onConfirm,
  destroy,
}: Props) => {
  const tagStore = useTagStore();
  const memoStore = useMemoStore();
  const { setDateTime, displayDateTime, datePickerDateTime } = useDateTime(memoStore.getMemoByName(memoName || "")?.displayTime);
  const memoPatchRef = useRef<Partial<Memo>>({
    displayTime: memoStore.getMemoByName(memoName || "")?.displayTime,
  });
  const user = useCurrentUser();

  useEffect(() => {
    tagStore.fetchTags({ user }, { skipCache: false });
  }, []);

  const updateDisplayTime = (displayTime: string) => {
    setDateTime(displayTime);
    memoPatchRef.current.displayTime = new Date(displayTime);
  };

  const handleCloseBtnClick = () => {
    destroy();
  };

  const handleConfirm = (memoName: string) => {
    handleCloseBtnClick();
    if (onConfirm) {
      onConfirm(memoName);
    }
  };