mirror of
https://github.com/usememos/memos.git
synced 2025-10-17 09:46:55 +08:00
feat: update daily review
This commit is contained in:
Steven
parent
af7c0a76d0
commit
7b25b8c1e1
5 changed files with 59 additions and 174 deletions
|
|
@ -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;
|
||||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,69 +73,62 @@ 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 sm:px-12 pt-14 pb-8 bg-white dark:bg-zinc-700"
|
||||
ref={memosElRef}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{dailyMemos.length === 0 ? (
|
||||
<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) => (
|
||||
<DailyMemo key={`${memo.id}-${memo.displayTs}`} memo={memo} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col justify-start items-start w-full mt-2">
|
||||
{dailyMemos.map((memo, index) => (
|
||||
<div
|
||||
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="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>
|
||||
))}
|
||||
|
||||
<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="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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue