fix: generate sharing memo image (#663)

web/src/components/ShareMemoDialog.tsx

@@ -0,0 +1,195 @@
+import { Select, Option } from "@mui/joy";
+import React, { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import copy from "copy-to-clipboard";
+import { toLower } from "lodash";
+import toImage from "../labs/html2image";
+import { VISIBILITY_SELECTOR_ITEMS } from "../helpers/consts";
+import * as utils from "../helpers/utils";
+import { getMemoStats } from "../helpers/api";
+import { memoService, userService } from "../services";
+import useLoading from "../hooks/useLoading";
+import Icon from "./Icon";
+import { generateDialog } from "./Dialog";
+import toastHelper from "./Toast";
+import MemoContent from "./MemoContent";
+import MemoResources from "./MemoResources";
+import "../less/share-memo-dialog.less";
+
+interface Props extends DialogProps {
+  memo: Memo;
+}
+
+interface State {
+  memoAmount: number;
+  memoVisibility: string;
+  generatedImgUrl: string;
+}
+
+const ShareMemoDialog: React.FC<Props> = (props: Props) => {
+  const { memo: propsMemo, destroy } = props;
+  const { t } = useTranslation();
+  const user = userService.getState().user as User;
+  const [state, setState] = useState<State>({
+    memoAmount: 0,
+    memoVisibility: propsMemo.visibility,
+    generatedImgUrl: "",
+  });
+  const loadingState = useLoading();
+  const memoElRef = useRef<HTMLDivElement>(null);
+  const memo = {
+    ...propsMemo,
+    createdAtStr: utils.getDateTimeString(propsMemo.displayTs),
+  };
+  const createdDays = Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24);
+
+  useEffect(() => {
+    getMemoStats(user.id)
+      .then(({ data: { data } }) => {
+        setState((state) => {
+          return {
+            ...state,
+            memoAmount: data.length,
+          };
+        });
+        loadingState.setFinish();
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (loadingState.isLoading) {
+      return;
+    }
+
+    if (!memoElRef.current) {
+      return;
+    }
+
+    toImage(memoElRef.current, {
+      pixelRatio: window.devicePixelRatio * 2,
+    })
+      .then((url) => {
+        setState((state) => {
+          return {
+            ...state,
+            generatedImgUrl: url,
+          };
+        });
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }, [loadingState.isLoading]);
+
+  const handleCloseBtnClick = () => {
+    destroy();
+  };
+
+  const handleDownloadBtnClick = () => {
+    const a = document.createElement("a");
+    a.href = state.generatedImgUrl;
+    a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
+    a.click();
+  };
+
+  const handleCopyLinkBtnClick = () => {
+    copy(`${window.location.origin}/m/${memo.id}`);
+    toastHelper.success(t("message.succeed-copy-content"));
+  };
+
+  const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
+    return {
+      value: item.value,
+      text: t(`memo.visibility.${toLower(item.value)}`),
+    };
+  });
+
+  const handleMemoVisibilityOptionChanged = async (value: string) => {
+    const visibilityValue = value as Visibility;
+    setState({
+      ...state,
+      memoVisibility: visibilityValue,
+    });
+    await memoService.patchMemo({
+      id: memo.id,
+      visibility: visibilityValue,
+    });
+  };
+
+  return (
+    <>
+      <div className="dialog-header-container">
+        <p className="title-text">
+          <span className="icon-text">🌄</span>
+          {t("common.share")} Memo
+        </p>
+        <button className="btn close-btn" onClick={handleCloseBtnClick}>
+          <Icon.X className="icon-img" />
+        </button>
+      </div>
+      <div className="dialog-content-container">
+        <div className="memo-container" ref={memoElRef}>
+          {state.generatedImgUrl !== "" && <img className="memo-shortcut-img" src={state.generatedImgUrl} />}
+          <span className="time-text">{memo.createdAtStr}</span>
+          <div className="memo-content-wrapper">
+            <MemoContent content={memo.content} displayConfig={{ enableExpand: false }} />
+            <MemoResources style="col" resourceList={memo.resourceList} />
+          </div>
+          <div className="watermark-container">
+            <div className="userinfo-container">
+              <span className="name-text">{user.nickname || user.username}</span>
+              <span className="usage-text">
+                {state.memoAmount} MEMOS / {createdDays} DAYS
+              </span>
+            </div>
+            <img className="logo-img" src="/logo.webp" alt="" />
+          </div>
+        </div>
+        <div className="px-4 py-3 w-full flex flex-row justify-between items-center">
+          <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 className="flex flex-row justify-end items-center">
+            <button disabled={state.generatedImgUrl === ""} className="btn-normal mr-2" onClick={handleDownloadBtnClick}>
+              {state.generatedImgUrl === "" ? (
+                <Icon.Loader className="w-4 h-auto mr-1 animate-spin" />
+              ) : (
+                <Icon.Download className="w-4 h-auto mr-1" />
+              )}
+              <span>{t("common.image")}</span>
+            </button>
+            <button className="btn-normal" onClick={handleCopyLinkBtnClick}>
+              <Icon.Link className="w-4 h-auto mr-1" />
+              <span>{t("common.link")}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default function showShareMemoDialog(memo: Memo): void {
+  generateDialog(
+    {
+      className: "share-memo-dialog",
+    },
+    ShareMemoDialog,
+    { memo }
+  );
+}