mirror of https://github.com/usememos/memos
feat: update page router (#1330)
boojack
2 years ago
committed by
GitHub
parent
ccdcd3d154
commit
f3f0efba1e
@ -1,129 +0,0 @@
|
||||
import { useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMemoStore, useUserStore } from "../store/module";
|
||||
import toImage from "../labs/html2image";
|
||||
import useToggle from "../hooks/useToggle";
|
||||
import { DAILY_TIMESTAMP } from "../helpers/consts";
|
||||
import * as utils from "../helpers/utils";
|
||||
import Icon from "./Icon";
|
||||
import { generateDialog } from "./Dialog";
|
||||
import DatePicker from "./base/DatePicker";
|
||||
import showPreviewImageDialog from "./PreviewImageDialog";
|
||||
import DailyMemo from "./DailyMemo";
|
||||
import "../less/daily-review-dialog.less";
|
||||
|
||||
interface Props extends DialogProps {
|
||||
currentDateStamp: DateStamp;
|
||||
}
|
||||
|
||||
const monthChineseStrArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
|
||||
const weekdayChineseStrArray = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||
|
||||
const DailyReviewDialog: React.FC<Props> = (props: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const memoStore = useMemoStore();
|
||||
const memos = memoStore.state.memos;
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { localSetting } = userStore.state.user as User;
|
||||
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
|
||||
.filter((m) => {
|
||||
const createdTimestamp = utils.getTimeStampByDate(m.createdTs);
|
||||
const currentDateStampWithOffset = currentDateStamp + utils.convertToMillis(localSetting);
|
||||
return (
|
||||
m.rowStatus === "NORMAL" &&
|
||||
createdTimestamp >= currentDateStampWithOffset &&
|
||||
createdTimestamp < currentDateStampWithOffset + DAILY_TIMESTAMP
|
||||
);
|
||||
})
|
||||
.sort((a, b) => utils.getTimeStampByDate(a.createdTs) - utils.getTimeStampByDate(b.createdTs));
|
||||
|
||||
const handleShareBtnClick = () => {
|
||||
if (!memosElRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
toggleShowDatePicker(false);
|
||||
|
||||
toImage(memosElRef.current, {
|
||||
pixelRatio: window.devicePixelRatio * 2,
|
||||
})
|
||||
.then((url) => {
|
||||
showPreviewImageDialog(url);
|
||||
})
|
||||
.catch(() => {
|
||||
// do nth
|
||||
});
|
||||
};
|
||||
|
||||
const handleDataPickerChange = (datestamp: DateStamp): void => {
|
||||
setCurrentDateStamp(datestamp);
|
||||
toggleShowDatePicker(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text" onClick={() => toggleShowDatePicker()}>
|
||||
<span className="icon-text">📅</span> {t("common.daily-review")}
|
||||
</p>
|
||||
<div className="btns-container">
|
||||
<button className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
|
||||
<Icon.ChevronLeft className="icon-img" />
|
||||
</button>
|
||||
<button className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}>
|
||||
<Icon.ChevronRight className="icon-img" />
|
||||
</button>
|
||||
<button className="btn-text share" onClick={handleShareBtnClick}>
|
||||
<Icon.Share2 size={16} />
|
||||
</button>
|
||||
<span className="split-line">/</span>
|
||||
<button className="btn-text" onClick={() => props.destroy()}>
|
||||
<Icon.X className="icon-img" />
|
||||
</button>
|
||||
</div>
|
||||
<DatePicker
|
||||
className={`date-picker ${showDatePicker ? "" : "!hidden"}`}
|
||||
datestamp={currentDateStamp}
|
||||
handleDateStampChange={handleDataPickerChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="dialog-content-container" ref={memosElRef}>
|
||||
<div className="date-card-container">
|
||||
<div className="year-text">{currentDate.getFullYear()}</div>
|
||||
<div className="date-container">
|
||||
<div className="month-text">{monthChineseStrArray[currentDate.getMonth()]}</div>
|
||||
<div className="date-text">{currentDate.getDate()}</div>
|
||||
<div className="day-text">{weekdayChineseStrArray[currentDate.getDay()]}</div>
|
||||
</div>
|
||||
</div>
|
||||
{dailyMemos.length === 0 ? (
|
||||
<div className="tip-container">
|
||||
<p className="tip-text">{t("daily-review.oops-nothing")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="dailymemos-wrapper">
|
||||
{dailyMemos.map((memo) => (
|
||||
<DailyMemo key={`${memo.id}-${memo.updatedTs}`} memo={memo} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default function showDailyReviewDialog(datestamp: DateStamp = Date.now()): void {
|
||||
generateDialog(
|
||||
{
|
||||
className: "daily-review-dialog",
|
||||
dialogName: "daily-review-dialog",
|
||||
},
|
||||
DailyReviewDialog,
|
||||
{ currentDateStamp: datestamp }
|
||||
);
|
||||
}
|
||||
@ -1,87 +0,0 @@
|
||||
.daily-review-dialog {
|
||||
@apply p-0 sm:py-16;
|
||||
|
||||
> .dialog-container {
|
||||
@apply w-full sm:w-112 max-w-full grow sm:grow-0 p-0 pb-4 rounded-none sm:rounded-lg;
|
||||
|
||||
> .dialog-header-container {
|
||||
@apply relative flex flex-row justify-between items-center w-full p-6 pb-0 mb-0;
|
||||
|
||||
> .title-text {
|
||||
@apply px-2 py-1 -ml-2 cursor-pointer select-none rounded hover:bg-gray-100 dark:hover:bg-zinc-700;
|
||||
}
|
||||
|
||||
> .btns-container {
|
||||
@apply flex flex-row justify-start items-center;
|
||||
|
||||
> .btn-text {
|
||||
@apply w-6 h-6 mr-2 rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200 dark:hover:bg-zinc-700 p-0.5;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-full h-auto;
|
||||
}
|
||||
}
|
||||
|
||||
> .split-line {
|
||||
@apply font-mono text-gray-300 mr-2;
|
||||
}
|
||||
}
|
||||
|
||||
> .date-picker {
|
||||
@apply absolute top-12 left-4 mt-2 bg-white dark:bg-zinc-700 shadow z-20 mx-auto border dark:border-zinc-800 rounded-lg mb-6;
|
||||
}
|
||||
}
|
||||
|
||||
> .dialog-content-container {
|
||||
@apply w-full h-auto flex flex-col justify-start items-start p-6 pb-0 bg-white dark:bg-zinc-800;
|
||||
|
||||
> .date-card-container {
|
||||
@apply flex flex-col justify-center items-center m-auto pb-6 select-none;
|
||||
z-index: 1;
|
||||
|
||||
> .year-text {
|
||||
@apply m-auto font-bold text-gray-600 dark:text-gray-300 text-center leading-6 mb-2;
|
||||
}
|
||||
|
||||
> .date-container {
|
||||
@apply flex flex-col justify-center items-center m-auto w-24 h-24;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
|
||||
|
||||
> .month-text,
|
||||
> .day-text {
|
||||
@apply flex flex-col justify-center items-center text-center w-full h-6 text-sm;
|
||||
}
|
||||
|
||||
> .month-text {
|
||||
@apply bg-blue-700 text-white;
|
||||
border-top-left-radius: 24px;
|
||||
border-top-right-radius: 24px;
|
||||
}
|
||||
|
||||
> .date-text {
|
||||
@apply flex flex-col justify-center items-center text-center w-full pt-1 h-12;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .day-text {
|
||||
@apply text-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .tip-container {
|
||||
@apply m-auto py-6 pb-12 px-0;
|
||||
|
||||
> .tip-text {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
> .dailymemos-wrapper {
|
||||
@apply flex flex-col justify-start items-start w-full mt-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,130 @@
|
||||
import { useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMemoStore, useUserStore } from "../store/module";
|
||||
import { DAILY_TIMESTAMP } from "../helpers/consts";
|
||||
import * as utils from "../helpers/utils";
|
||||
import MobileHeader from "../components/MobileHeader";
|
||||
import useToggle from "../hooks/useToggle";
|
||||
import toImage from "../labs/html2image";
|
||||
import showPreviewImageDialog from "../components/PreviewImageDialog";
|
||||
import Icon from "../components/Icon";
|
||||
import DatePicker from "../components/base/DatePicker";
|
||||
import DailyMemo from "../components/DailyMemo";
|
||||
|
||||
const monthChineseStrArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
|
||||
const weekdayChineseStrArray = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||
|
||||
const DailyReview = () => {
|
||||
const { t } = useTranslation();
|
||||
const memoStore = useMemoStore();
|
||||
const memos = memoStore.state.memos;
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { localSetting } = userStore.state.user as User;
|
||||
const [currentDateStamp, setCurrentDateStamp] = useState(utils.getDateStampByDate(utils.getDateString(Date.now())));
|
||||
const [showDatePicker, toggleShowDatePicker] = useToggle(false);
|
||||
const memosElRef = useRef<HTMLDivElement>(null);
|
||||
const currentDate = new Date(currentDateStamp);
|
||||
const dailyMemos = memos
|
||||
.filter((m) => {
|
||||
const createdTimestamp = utils.getTimeStampByDate(m.createdTs);
|
||||
const currentDateStampWithOffset = currentDateStamp + utils.convertToMillis(localSetting);
|
||||
return (
|
||||
m.rowStatus === "NORMAL" &&
|
||||
createdTimestamp >= currentDateStampWithOffset &&
|
||||
createdTimestamp < currentDateStampWithOffset + DAILY_TIMESTAMP
|
||||
);
|
||||
})
|
||||
.sort((a, b) => utils.getTimeStampByDate(a.createdTs) - utils.getTimeStampByDate(b.createdTs));
|
||||
|
||||
const handleShareBtnClick = () => {
|
||||
if (!memosElRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
toggleShowDatePicker(false);
|
||||
|
||||
toImage(memosElRef.current, {
|
||||
pixelRatio: window.devicePixelRatio * 2,
|
||||
})
|
||||
.then((url) => {
|
||||
showPreviewImageDialog(url);
|
||||
})
|
||||
.catch(() => {
|
||||
// do nth
|
||||
});
|
||||
};
|
||||
|
||||
const handleDataPickerChange = (datestamp: DateStamp): void => {
|
||||
setCurrentDateStamp(datestamp);
|
||||
toggleShowDatePicker(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="w-full max-w-2xl 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} />
|
||||
<div className="w-full flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700">
|
||||
<div className="relative w-full flex flex-row justify-between items-center">
|
||||
<p
|
||||
className="px-2 py-1 flex flex-row justify-start items-center cursor-pointer select-none rounded hover:bg-gray-100 dark:hover:bg-zinc-700"
|
||||
onClick={() => toggleShowDatePicker()}
|
||||
>
|
||||
<Icon.Calendar className="w-5 h-auto mr-1" /> {t("common.daily-review")}
|
||||
</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="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.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.Share2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<DatePicker
|
||||
className={`absolute top-8 bg-white mt-2 z-20 mx-auto border dark:border-zinc-800 rounded-lg mb-6 ${
|
||||
showDatePicker ? "" : "!hidden"
|
||||
}`}
|
||||
datestamp={currentDateStamp}
|
||||
handleDateStampChange={handleDataPickerChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full h-auto flex flex-col justify-start items-start p-6 pb-0 bg-white dark:bg-zinc-800" ref={memosElRef}>
|
||||
<div className="flex flex-col justify-center items-center mx-auto pb-6 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">
|
||||
<div className="text-center w-full leading-6 text-sm text-white bg-blue-700 rounded-t-3xl">
|
||||
{monthChineseStrArray[currentDate.getMonth()]}
|
||||
</div>
|
||||
<div className="text-black text-4xl font-medium leading-12">{currentDate.getDate()}</div>
|
||||
<div className="text-center w-full leading-6 -mt-2 text-xs">{weekdayChineseStrArray[currentDate.getDay()]}</div>
|
||||
</div>
|
||||
</div>
|
||||
{dailyMemos.length === 0 ? (
|
||||
<div className="mx-auto py-6 pb-12 px-0">
|
||||
<p className="italic">{t("daily-review.oops-nothing")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col justify-start items-start w-full mt-2">
|
||||
{dailyMemos.map((memo) => (
|
||||
<DailyMemo key={`${memo.id}-${memo.updatedTs}`} memo={memo} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default DailyReview;
|
||||
Loading…
Reference in New Issue