feat: update sharing memo image (#473)

web/src/components/ShareMemoImageDialog.tsx

@@ -4,28 +4,60 @@ import { userService } from "../services";
 import toImage from "../labs/html2image";
 import { ANIMATION_DURATION } from "../helpers/consts";
 import * as utils from "../helpers/utils";
+import { getMemoStats } from "../helpers/api";
+import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import MemoContent from "./MemoContent";
-import "../less/share-memo-image-dialog.less";
 import MemoResources from "./MemoResources";
+import "../less/share-memo-image-dialog.less";
 
 interface Props extends DialogProps {
   memo: Memo;
 }
 
+interface State {
+  memoAmount: number;
+  shortcutImgUrl: string;
+}
+
 const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
   const { memo: propsMemo, destroy } = props;
   const { t } = useTranslation();
-  const { user: userinfo } = userService.getState();
-  const [shortcutImgUrl, setShortcutImgUrl] = useState("");
+  const user = userService.getState().user as User;
+  const [state, setState] = useState<State>({
+    memoAmount: 0,
+    shortcutImgUrl: "",
+  });
+  const loadingState = useLoading();
+  const memoElRef = useRef<HTMLDivElement>(null);
   const memo = {
     ...propsMemo,
     createdAtStr: utils.getDateTimeString(propsMemo.displayTs),
   };
-  const memoElRef = useRef<HTMLDivElement>(null);
+  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;
+    }
+
     setTimeout(() => {
       if (!memoElRef.current) {
         return;
@@ -36,13 +68,18 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
         pixelRatio: window.devicePixelRatio * 2,
       })
         .then((url) => {
-          setShortcutImgUrl(url);
+          setState((state) => {
+            return {
+              ...state,
+              shortcutImgUrl: url,
+            };
+          });
         })
         .catch((err) => {
           console.error(err);
         });
     }, ANIMATION_DURATION);
-  }, []);
+  }, [loadingState.isLoading]);
 
   const handleCloseBtnClick = () => {
     destroy();
@@ -50,7 +87,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
 
   const handleDownloadBtnClick = () => {
     const a = document.createElement("a");
-    a.href = shortcutImgUrl;
+    a.href = state.shortcutImgUrl;
     a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
     a.click();
   };
@@ -67,20 +104,24 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
         </button>
       </div>
       <div className="dialog-content-container">
-        <div className={`tip-words-container ${shortcutImgUrl ? "finish" : "loading"}`}>
-          <p className="tip-text">{shortcutImgUrl ? "Click to save the image 👇" : "Generating the screenshot..."}</p>
+        <div className={`tip-words-container ${state.shortcutImgUrl ? "finish" : "loading"}`}>
+          <p className="tip-text">{state.shortcutImgUrl ? "Click to save the image 👇" : "Generating the screenshot..."}</p>
         </div>
         <div className="memo-container" ref={memoElRef}>
-          {shortcutImgUrl !== "" && <img className="memo-shortcut-img" onClick={handleDownloadBtnClick} src={shortcutImgUrl} />}
+          {state.shortcutImgUrl !== "" && <img className="memo-shortcut-img" onClick={handleDownloadBtnClick} src={state.shortcutImgUrl} />}
           <span className="time-text">{memo.createdAtStr}</span>
           <div className="memo-content-wrapper">
             <MemoContent content={memo.content} displayConfig={{ enableExpand: false }} />
             <MemoResources resourceList={memo.resourceList} />
           </div>
           <div className="watermark-container">
-            <span className="normal-text">
-              <span className="icon-text">✍️</span> by <span className="name-text">{userinfo?.name}</span>
-            </span>
+            <div className="userinfo-container">
+              <span className="name-text">{user.name}</span>
+              <span className="usage-text">
+                {createdDays} DAYS / {state.memoAmount} MEMOS
+              </span>
+            </div>
+            <img className="logo-img" src="/logo.webp" alt="" />
           </div>
         </div>
       </div>

web/src/less/share-memo-image-dialog.less

@@ -48,7 +48,7 @@
         }
 
         > .memo-content-wrapper {
-          @apply w-full px-6 text-base bg-white pb-2;
+          @apply w-full px-6 text-base bg-white pb-4;
         }
 
         > .images-container {
@@ -60,18 +60,30 @@
         }
 
         > .watermark-container {
-          @apply flex flex-row justify-start items-center w-full py-3 px-6;
+          @apply flex flex-row justify-between items-center w-full py-3 px-6;
 
           > .normal-text {
             @apply w-full flex flex-row justify-start items-center text-sm leading-6 text-gray-500;
 
-            > .icon-text {
-              @apply text-lg ml-1 mr-2 leading-6;
+            > .name-text {
+              @apply text-black;
             }
+          }
+
+          > .userinfo-container {
+            @apply w-64 flex flex-col justify-center items-start;
 
             > .name-text {
-              @apply text-black ml-2 leading-6;
+              @apply text-lg truncate font-bold text-gray-600;
             }
+
+            > .usage-text {
+              @apply -mt-1 text-sm text-gray-400 font-medium;
+            }
+          }
+
+          > .logo-img {
+            @apply h-12 w-auto;
           }
         }
       }