feat: update daily review

web/src/components/DailyMemo.tsx

@@ -1,28 +0,0 @@
-import { getTimeString } from "@/helpers/datetime";
-import MemoContent from "./MemoContent";
-import MemoResourceListView from "./MemoResourceListView";
-import "@/less/daily-memo.less";
-
-interface Props {
-  memo: Memo;
-}
-
-const DailyMemo: React.FC<Props> = (props: Props) => {
-  const { memo } = props;
-  const displayTimeStr = getTimeString(memo.displayTs);
-
-  return (
-    <div className="daily-memo-wrapper">
-      <div className="time-wrapper">
-        <span className="normal-text">{displayTimeStr}</span>
-      </div>
-      <div className="memo-container">
-        <MemoContent content={memo.content} />
-        <MemoResourceListView resourceList={memo.resourceList} />
-      </div>
-      <div className="split-line"></div>
-    </div>
-  );
-};
-
-export default DailyMemo;

web/src/components/kit/DatePicker.tsx

@@ -86,13 +86,13 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
       </div>
       <div className="date-picker-day-container">
         <div className="date-picker-day-header">
+          <span className="day-item">{t("days.sun")}</span>
           <span className="day-item">{t("days.mon")}</span>
           <span className="day-item">{t("days.tue")}</span>
           <span className="day-item">{t("days.wed")}</span>
           <span className="day-item">{t("days.thu")}</span>
           <span className="day-item">{t("days.fri")}</span>
           <span className="day-item">{t("days.sat")}</span>
-          <span className="day-item">{t("days.sun")}</span>
         </div>
 
         {dayList.map((d) => {

web/src/helpers/datetime.ts

@@ -1,10 +1,5 @@
 import i18n from "@/i18n";
 
-export function convertToMillis(localSetting: LocalSetting) {
-  const hoursToMillis = localSetting.dailyReviewTimeOffset * 60 * 60 * 1000;
-  return hoursToMillis;
-}
-
 export function getTimeStampByDate(t: Date | number | string | any): number {
   return new Date(t).getTime();
 }
@@ -172,21 +167,6 @@ export function getNormalizedTimeString(t?: Date | number | string): string {
   return `${yyyy}-${MM}-${dd}T${hh}:${mm}`;
 }
 
-/**
- * This returns the number of **milliseconds** since the Unix Epoch of the provided date.
- *
- * If no date is provided, the current date is used.
- *
- * ```
- * getUnixTimeMillis("2019-01-25 00:00") // 1548381600000
- * ```
- * To get a Unix timestamp (the number of seconds since the epoch), use `getUnixTime()`.
- */
-export function getUnixTimeMillis(t?: Date | number | string): number {
-  const date = new Date(t ? t : Date.now());
-  return date.getTime();
-}
-
 /**
  * This returns the Unix timestamp (the number of **seconds** since the Unix Epoch) of the provided date.
  *

web/src/less/daily-memo.less

@@ -1,31 +0,0 @@
-.daily-memo-wrapper {
-  @apply flex flex-row justify-start items-start relative w-full flex-nowrap pb-6;
-
-  &:last-child {
-    > .split-line {
-      @apply hidden;
-    }
-  }
-
-  > .split-line {
-    @apply h-full px-px bg-gray-50 dark:bg-zinc-600 absolute top-1 left-6 -ml-px;
-  }
-
-  > .time-wrapper {
-    @apply mt-px mr-4 w-12 h-7 shrink-0 text-xs leading-6 text-center font-mono rounded-lg bg-gray-100 dark:bg-zinc-600 border-2 border-white z-1 dark:border-zinc-700 text-gray-600 dark:text-gray-300;
-  }
-
-  > .memo-container {
-    @apply w-full overflow-x-hidden flex flex-col justify-start items-start;
-
-    .memo-content-text {
-      @apply mt-1;
-    }
-
-    > .resource-wrapper {
-      > .images-wrapper {
-        @apply !grid-cols-2;
-      }
-    }
-  }
-}

web/src/pages/DailyReview.tsx

@@ -1,22 +1,21 @@
-import classNames from "classnames";
+import { Button } from "@mui/joy";
 import { last } from "lodash-es";
-import { useEffect, useRef } from "react";
+import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
-import useSessionStorage from "react-use/lib/useSessionStorage";
 import useToggle from "react-use/lib/useToggle";
-import DailyMemo from "@/components/DailyMemo";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
+import MemoContent from "@/components/MemoContent";
+import MemoEditor from "@/components/MemoEditor";
+import MemoRelationListView from "@/components/MemoRelationListView";
+import MemoResourceListView from "@/components/MemoResourceListView";
 import MobileHeader from "@/components/MobileHeader";
-import showPreviewImageDialog from "@/components/PreviewImageDialog";
 import DatePicker from "@/components/kit/DatePicker";
 import { DAILY_TIMESTAMP, DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
-import { convertToMillis, getDateStampByDate, getNormalizedDateString, getTimeStampByDate, isFutureDate } from "@/helpers/datetime";
+import { getDateStampByDate, getNormalizedDateString, getTimeStampByDate, getTimeString } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import i18n from "@/i18n";
-import toImage from "@/labs/html2image";
 import { useMemoStore, useUserStore } from "@/store/module";
-import { findNearestLanguageMatch, useTranslate } from "@/utils/i18n";
+import { useTranslate } from "@/utils/i18n";
 
 const DailyReview = () => {
   const t = useTranslate();
@@ -24,23 +23,18 @@ const DailyReview = () => {
   const userStore = useUserStore();
   const user = useCurrentUser();
   const { localSetting } = userStore.state.user as User;
-  const [currentDateStampRaw, setCurrentDateStamp] = useSessionStorage<number>(
-    "daily-review-datestamp",
-    getDateStampByDate(getNormalizedDateString())
-  );
-  const currentDateStamp = currentDateStampRaw as number;
+  const currentDateStamp = getDateStampByDate(getNormalizedDateString()) as number;
+  const [selectedDateStamp, setSelectedDateStamp] = useState<number>(currentDateStamp as number);
   const [showDatePicker, toggleShowDatePicker] = useToggle(false);
-  const memosElRef = useRef<HTMLDivElement>(null);
-  const currentDate = new Date(currentDateStamp);
   const dailyMemos = memoStore.state.memos
     .filter((m) => {
       const displayTimestamp = getTimeStampByDate(m.displayTs);
-      const currentDateStampWithOffset = currentDateStamp + convertToMillis(localSetting);
+      const selectedDateStampWithOffset = selectedDateStamp + localSetting.dailyReviewTimeOffset * 60 * 60 * 1000;
       return (
         m.rowStatus === "NORMAL" &&
         m.creatorUsername === user.username &&
-        displayTimestamp >= currentDateStampWithOffset &&
-        displayTimestamp < currentDateStampWithOffset + DAILY_TIMESTAMP
+        displayTimestamp >= selectedDateStampWithOffset &&
+        displayTimestamp < selectedDateStampWithOffset + DAILY_TIMESTAMP
       );
     })
     .sort((a, b) => getTimeStampByDate(a.displayTs) - getTimeStampByDate(b.displayTs));
@@ -53,7 +47,7 @@ const DailyReview = () => {
         offset += fetchedMemos.length;
         if (fetchedMemos.length === DEFAULT_MEMO_LIMIT) {
           const lastMemo = last(fetchedMemos);
-          if (lastMemo && lastMemo.displayTs > currentDateStamp) {
+          if (lastMemo && lastMemo.displayTs > selectedDateStamp) {
             await fetchMoreMemos();
           }
         }
@@ -63,36 +57,13 @@ const DailyReview = () => {
       }
     };
     fetchMoreMemos();
-  }, [currentDateStamp]);
-
-  const handleShareBtnClick = () => {
-    if (!memosElRef.current) {
-      return;
-    }
-
-    toggleShowDatePicker(false);
-
-    toImage(memosElRef.current, {
-      pixelRatio: window.devicePixelRatio * 2,
-    })
-      .then((url) => {
-        showPreviewImageDialog(url);
-      })
-      .catch(() => {
-        // do nth
-      });
-  };
+  }, [selectedDateStamp]);
 
   const handleDataPickerChange = (datestamp: number): void => {
-    setCurrentDateStamp(datestamp);
+    setSelectedDateStamp(datestamp);
     toggleShowDatePicker(false);
   };
 
-  const locale = findNearestLanguageMatch(i18n.language);
-  const currentMonth = currentDate.toLocaleDateString(locale, { month: "short" });
-  const currentDayOfWeek = currentDate.toLocaleDateString(locale, { weekday: "short" });
-  const isFutureDateDisabled = isFutureDate(currentDateStamp + DAILY_TIMESTAMP);
-
   return (
     <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
@@ -102,71 +73,64 @@ const DailyReview = () => {
             className="px-2 py-1 flex flex-row justify-start items-center cursor-pointer select-none rounded opacity-80 hover:bg-gray-100 dark:hover:bg-zinc-700"
             onClick={() => toggleShowDatePicker()}
           >
-            <Icon.Calendar className="w-5 h-auto mr-1" /> {t("daily-review.title")}
+            <Icon.Calendar className="w-5 h-auto mr-2" />
+            <span className="font-mono mt-0.5">{new Date(selectedDateStamp).toLocaleDateString()}</span>
           </p>
-          <div className="flex flex-row justify-end items-center">
-            <button
-              className="w-7 h-7 mr-2 flex justify-center items-center rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200 dark:hover:bg-zinc-700 p-0.5"
-              onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}
-            >
-              <Icon.ChevronLeft className="w-full h-auto" />
-            </button>
-            <button
-              className={classNames(
-                "w-7 h-7 mr-2 flex justify-center items-center rounded select-none last:mr-0 hover:bg-gray-200 dark:hover:bg-zinc-700 p-0.5",
-                isFutureDateDisabled ? "cursor-not-allowed" : "cursor-pointer"
-              )}
-              onClick={() => setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}
-              disabled={isFutureDateDisabled}
-            >
-              <Icon.ChevronRight className="w-full h-auto" />
-            </button>
-            <button
-              className="w-7 h-7 mr-2 flex justify-center items-center rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200 dark:hover:bg-zinc-700 p-0.5 share"
-              onClick={handleShareBtnClick}
-            >
-              <Icon.Share size={20} />
-            </button>
-          </div>
           <DatePicker
             className={`absolute top-8 mt-2 z-20 mx-auto border bg-white shadow dark:bg-zinc-800 dark:border-zinc-800 rounded-lg mb-6 ${
               showDatePicker ? "" : "!hidden"
             }`}
-            datestamp={currentDateStamp}
+            datestamp={selectedDateStamp}
             handleDateStampChange={handleDataPickerChange}
             isFutureDateDisabled
           />
         </div>
+        <div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700">
+          {dailyMemos.length === 0 && (
+            <div className="w-full mt-4 mb-8 flex flex-col justify-center items-center italic">
+              <Empty />
+              <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
+            </div>
+          )}
+          <div className="flex flex-col justify-start items-start w-full mt-2">
+            {dailyMemos.map((memo, index) => (
               <div
-          className="w-full h-auto flex flex-col justify-start items-start px-2 sm:px-12 pt-14 pb-8 bg-white dark:bg-zinc-700"
-          ref={memosElRef}
+                key={`${memo.id}-${memo.displayTs}`}
+                className="relative w-full flex flex-col justify-start items-start pl-8 sm:pl-12 pt-2 pb-4"
               >
-          <div className="flex flex-col justify-center items-center mx-auto pb-10 select-none">
-            <div className="mx-auto font-bold text-gray-600 dark:text-gray-300 text-center leading-6 mb-2">{currentDate.getFullYear()}</div>
-            <div className="flex flex-col justify-center items-center m-auto w-24 h-24 shadow rounded-3xl dark:bg-zinc-800">
-              <div className="text-center w-full leading-6 text-sm text-white bg-blue-700 rounded-t-3xl">
-                {currentMonth[0].toUpperCase() + currentMonth.substring(1)}
-              </div>
-              <div className="text-black dark:text-white text-4xl font-medium leading-12">{currentDate.getDate()}</div>
-              <div className="dark:text-gray-300 text-center w-full leading-6 -mt-2 text-xs">
-                {currentDayOfWeek[0].toUpperCase() + currentDayOfWeek.substring(1)}
+                <div className="w-full flex flex-row justify-start items-center mt-0.5 mb-1 text-sm font-mono text-gray-500 dark:text-gray-400">
+                  <span className="opacity-80">{getTimeString(memo.displayTs)}</span>
+                  <Icon.Dot className="w-5 h-auto opacity-60" />
+                  <span className="opacity-60">#{memo.id}</span>
                 </div>
+                <MemoContent content={memo.content} />
+                <MemoResourceListView resourceList={memo.resourceList} />
+                <MemoRelationListView memo={memo} relationList={memo.relationList.filter((relation) => relation.type === "REFERENCE")} />
+                <div className="absolute left-1 sm:left-2 top-3 h-full">
+                  <Icon.Circle className="w-4 h-auto bg-gray-400 text-gray-400 dark:bg-gray-500 dark:text-gray-500 rounded-full" />
+                  {index !== dailyMemos.length - 1 && (
+                    <div className="absolute top-2 left-1.5 h-full w-1 bg-gray-400 dark:bg-gray-500 block"></div>
+                  )}
                 </div>
               </div>
-          {dailyMemos.length === 0 ? (
-            <div className="w-full mt-4 mb-8 flex flex-col justify-center items-center italic">
-              <Empty />
-              <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
+            ))}
+
+            <div className="w-full sm:mt-4">
+              {selectedDateStamp === currentDateStamp ? (
+                <div className="w-full pl-0 sm:pl-10">
+                  <MemoEditor className="!border" cacheKey="daily-review-editor" />
                 </div>
               ) : (
-            <div className="flex flex-col justify-start items-start w-full mt-2">
-              {dailyMemos.map((memo) => (
-                <DailyMemo key={`${memo.id}-${memo.displayTs}`} memo={memo} />
-              ))}
+                <div className="w-full flex flex-row justify-center items-center">
+                  <Button startDecorator={<Icon.Undo2 className="w-5 h-auto" />} onClick={() => setSelectedDateStamp(currentDateStamp)}>
+                    {"Back to today"}
+                  </Button>
                 </div>
               )}
             </div>
           </div>
+        </div>
+      </div>
     </section>
   );
 };