chore: rename to DailyReviewDialog

web/public/icons/arrow-left.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M28.05 36 16 23.95 28.05 11.9l2.15 2.15-9.9 9.9 9.9 9.9Z"/></svg>

web/public/icons/arrow-right.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m18.75 36-2.15-2.15 9.9-9.9-9.9-9.9 2.15-2.15L30.8 23.95Z"/></svg>

web/src/components/DailyReviewDialog.tsx

@@ -1,15 +1,14 @@
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
-import { memoService } from "../services";
+import { useAppSelector } from "../store";
 import toImage from "../labs/html2image";
 import useToggle from "../hooks/useToggle";
-import useLoading from "../hooks/useLoading";
 import { DAILY_TIMESTAMP } from "../helpers/consts";
 import * as utils from "../helpers/utils";
 import { showDialog } from "./Dialog";
+import DatePicker from "./common/DatePicker";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import DailyMemo from "./DailyMemo";
-import DatePicker from "./common/DatePicker";
+import "../less/daily-review-dialog.less";
-import "../less/daily-memo-diary-dialog.less";
 
 interface Props extends DialogProps {
   currentDateStamp: DateStamp;
@@ -18,50 +17,38 @@ interface Props extends DialogProps {
 const monthChineseStrArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dev"];
 const weekdayChineseStrArray = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
-const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
+const DailyReviewDialog: React.FC<Props> = (props: Props) => {
-  const loadingState = useLoading();
+  const memos = useAppSelector((state) => state.memo.memos);
-  const [memos, setMemos] = useState<Memo[]>([]);
   const [currentDateStamp, setCurrentDateStamp] = useState(utils.getDateStampByDate(utils.getDateString(props.currentDateStamp)));
   const [showDatePicker, toggleShowDatePicker] = useToggle(false);
   const memosElRef = useRef<HTMLDivElement>(null);
   const currentDate = new Date(currentDateStamp);
-
+  const dailyMemos = memos
-  useEffect(() => {
+    .filter(
-    const setDailyMemos = () => {
+      (m) =>
-      const dailyMemos = memoService
+        m.rowStatus === "NORMAL" &&
-        .getState()
+        utils.getTimeStampByDate(m.createdTs) >= currentDateStamp &&
-        .memos.filter(
+        utils.getTimeStampByDate(m.createdTs) < currentDateStamp + DAILY_TIMESTAMP
-          (a) =>
+    )
-            utils.getTimeStampByDate(a.createdTs) >= currentDateStamp &&
+    .sort((a, b) => utils.getTimeStampByDate(a.createdTs) - utils.getTimeStampByDate(b.createdTs));
-            utils.getTimeStampByDate(a.createdTs) < currentDateStamp + DAILY_TIMESTAMP
-        )
-        .sort((a, b) => utils.getTimeStampByDate(a.createdTs) - utils.getTimeStampByDate(b.createdTs));
-      setMemos(dailyMemos);
-      loadingState.setFinish();
-    };
-
-    setDailyMemos();
-  }, [currentDateStamp]);
 
   const handleShareBtnClick = () => {
+    if (!memosElRef.current) {
+      return;
+    }
+
     toggleShowDatePicker(false);
 
-    setTimeout(() => {
+    toImage(memosElRef.current, {
-      if (!memosElRef.current) {
+      backgroundColor: "#ffffff",
-        return;
+      pixelRatio: window.devicePixelRatio * 2,
-      }
+    })
-
+      .then((url) => {
-      toImage(memosElRef.current, {
+        showPreviewImageDialog(url);
-        backgroundColor: "#ffffff",
-        pixelRatio: window.devicePixelRatio * 2,
       })
-        .then((url) => {
+      .catch(() => {
-          showPreviewImageDialog(url);
+        // do nth
-        })
+      });
-        .catch(() => {
-          // do nth
-        });
-    }, 0);
   };
 
   const handleDataPickerChange = (datestamp: DateStamp): void => {
@@ -72,8 +59,8 @@ const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
   return (
     <>
       <div className="dialog-header-container">
-        <p className="title-text">
+        <p className="title-text" onClick={() => toggleShowDatePicker()}>
-          <span className="icon-text">📅</span> Daily Memos
+          <span className="icon-text">📅</span> Daily Review
         </p>
         <div className="btns-container">
           <span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
@@ -89,9 +76,14 @@ const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
             <img className="icon-img" src="/icons/close.svg" />
           </span>
         </div>
+        <DatePicker
+          className={`date-picker ${showDatePicker ? "" : "!hidden"}`}
+          datestamp={currentDateStamp}
+          handleDateStampChange={handleDataPickerChange}
+        />
       </div>
       <div className="dialog-content-container" ref={memosElRef}>
-        <div className="date-card-container" onClick={() => toggleShowDatePicker()}>
+        <div className="date-card-container">
           <div className="year-text">{currentDate.getFullYear()}</div>
           <div className="date-container">
             <div className="month-text">{monthChineseStrArray[currentDate.getMonth()]}</div>
@@ -99,22 +91,13 @@ const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
             <div className="day-text">{weekdayChineseStrArray[currentDate.getDay()]}</div>
           </div>
         </div>
-        <DatePicker
+        {dailyMemos.length === 0 ? (
-          className={`date-picker ${showDatePicker ? "" : "!hidden"}`}
-          datestamp={currentDateStamp}
-          handleDateStampChange={handleDataPickerChange}
-        />
-        {loadingState.isLoading ? (
-          <div className="tip-container">
-            <p className="tip-text">Loading...</p>
-          </div>
-        ) : memos.length === 0 ? (
           <div className="tip-container">
             <p className="tip-text">Oops, there is nothing.</p>
           </div>
         ) : (
           <div className="dailymemos-wrapper">
-            {memos.map((memo) => (
+            {dailyMemos.map((memo) => (
               <DailyMemo key={`${memo.id}-${memo.updatedTs}`} memo={memo} />
             ))}
           </div>
@@ -124,12 +107,13 @@ const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
   );
 };
 
-export default function showDailyMemoDiaryDialog(datestamp: DateStamp = Date.now()): void {
+export default function showDailyReviewDialog(datestamp: DateStamp = Date.now()): void {
   showDialog(
     {
-      className: "daily-memo-diary-dialog",
+      className: "daily-review-dialog",
+      useAppContext: true,
     },
-    DailyMemoDiaryDialog,
+    DailyReviewDialog,
     { currentDateStamp: datestamp }
   );
 }

web/src/components/ShareMemoImageDialog.tsx

@@ -65,7 +65,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
     <>
       <div className="dialog-header-container">
         <p className="title-text">
-          <span className="icon-text">🥰</span>Share Memo
+          <span className="icon-text">🌄</span>Share Memo
         </p>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
           <img className="icon-img" src="/icons/close.svg" />

web/src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { useAppSelector } from "../store";
 import * as utils from "../helpers/utils";
-import showDailyMemoDiaryDialog from "./DailyMemoDiaryDialog";
+import showDailyReviewDialog from "./DailyReviewDialog";
 import showSettingDialog from "./SettingDialog";
 import showMemoTrashDialog from "./MemoTrashDialog";
 import UserBanner from "./UserBanner";
@@ -49,8 +49,8 @@ const Sidebar: React.FC<Props> = () => {
       </div>
       <UsageHeatMap />
       <div className="action-btns-container">
-        <button className="btn action-btn" onClick={() => showDailyMemoDiaryDialog()}>
+        <button className="btn action-btn" onClick={() => showDailyReviewDialog()}>
-          <span className="icon">📅</span> Daily View
+          <span className="icon">📅</span> Daily Review
         </button>
         <button className="btn action-btn" onClick={handleMyAccountBtnClick}>
           <span className="icon">⚙️</span> Setting

web/src/less/daily-review-dialog.less

@@ -1,13 +1,17 @@
 @import "./mixin.less";
 
-.daily-memo-diary-dialog {
+.daily-review-dialog {
   @apply p-0 sm:py-16;
 
   > .dialog-container {
     @apply w-112 max-w-full grow sm:grow-0 bg-white p-0 rounded-none sm:rounded-lg;
 
     > .dialog-header-container {
-      @apply flex flex-row justify-between items-center w-full p-6 pb-0 mb-0;
+      @apply relative flex flex-row justify-between items-center w-full p-6 pb-0 mb-0;
+
+      > .title-text {
+        @apply cursor-pointer select-none rounded hover:bg-gray-100;
+      }
 
       > .btns-container {
         @apply flex flex-row justify-start items-center;
@@ -24,6 +28,10 @@
           }
         }
       }
+
+      > .date-picker {
+        @apply absolute top-12 left-4 mt-2 bg-white shadow z-20 mx-auto border border-gray-200 rounded-lg mb-6;
+      }
     }
 
     > .dialog-content-container {
@@ -65,10 +73,6 @@
         }
       }
 
-      > .date-picker {
-        @apply mx-auto border border-gray-200 rounded-lg mb-6;
-      }
-
       > .tip-container {
         @apply m-auto py-6 pb-12 px-0;