mirror of
https://github.com/usememos/memos.git
synced 2024-12-19 00:51:30 +03:00
feat: update page router (#1330)
This commit is contained in:
boojack
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,10 +1,9 @@
|
||||
import { useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLayoutStore, useLocationStore, useUserStore } from "../store/module";
|
||||
import { useLayoutStore, useUserStore } from "../store/module";
|
||||
import { resolution } from "../utils/layout";
|
||||
import Icon from "./Icon";
|
||||
import showDailyReviewDialog from "./DailyReviewDialog";
|
||||
import showResourcesDialog from "./ResourcesDialog";
|
||||
import showSettingDialog from "./SettingDialog";
|
||||
import showAskAIDialog from "./AskAIDialog";
|
||||
@ -14,9 +13,9 @@ import UserBanner from "./UserBanner";
|
||||
const Header = () => {
|
||||
const { t } = useTranslation();
|
||||
const userStore = useUserStore();
|
||||
const locationStore = useLocationStore();
|
||||
const layoutStore = useLayoutStore();
|
||||
const showHeader = layoutStore.state.showHeader;
|
||||
const isVisitorMode = userStore.isVisitorMode() && !userStore.state.user;
|
||||
|
||||
useEffect(() => {
|
||||
const handleWindowResize = () => {
|
||||
@ -49,26 +48,47 @@ const Header = () => {
|
||||
>
|
||||
<UserBanner />
|
||||
<div className="w-full px-2 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
|
||||
<Link
|
||||
to="/"
|
||||
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||||
onClick={() => locationStore.clearQuery()}
|
||||
>
|
||||
<Icon.Home className="mr-4 w-6 h-auto opacity-80" /> {t("common.home")}
|
||||
</Link>
|
||||
<button
|
||||
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||||
onClick={() => showDailyReviewDialog()}
|
||||
>
|
||||
<Icon.Calendar className="mr-4 w-6 h-auto opacity-80" /> {t("common.daily-review")}
|
||||
</button>
|
||||
<Link
|
||||
{!isVisitorMode && (
|
||||
<>
|
||||
<NavLink
|
||||
to="/"
|
||||
className={({ isActive }) =>
|
||||
`${
|
||||
isActive && "bg-white dark:bg-zinc-700 shadow"
|
||||
} px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
|
||||
}
|
||||
>
|
||||
<>
|
||||
<Icon.Home className="mr-4 w-6 h-auto opacity-80" /> {t("common.home")}
|
||||
</>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/review"
|
||||
className={({ isActive }) =>
|
||||
`${
|
||||
isActive && "bg-white dark:bg-zinc-700 shadow"
|
||||
} px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
|
||||
}
|
||||
>
|
||||
<>
|
||||
<Icon.Calendar className="mr-4 w-6 h-auto opacity-80" /> {t("common.daily-review")}
|
||||
</>
|
||||
</NavLink>
|
||||
</>
|
||||
)}
|
||||
<NavLink
|
||||
to="/explore"
|
||||
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||||
className={({ isActive }) =>
|
||||
`${
|
||||
isActive && "bg-white dark:bg-zinc-700 shadow"
|
||||
} px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
|
||||
}
|
||||
>
|
||||
<Icon.Hash className="mr-4 w-6 h-auto opacity-80" /> {t("common.explore")}
|
||||
</Link>
|
||||
{!userStore.isVisitorMode() && (
|
||||
<>
|
||||
<Icon.Hash className="mr-4 w-6 h-auto opacity-80" /> {t("common.explore")}
|
||||
</>
|
||||
</NavLink>
|
||||
{!isVisitorMode && (
|
||||
<>
|
||||
<button
|
||||
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||||
|
||||
@ -3,7 +3,7 @@ import dayjs from "dayjs";
|
||||
import { memo, useEffect, useRef, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useEditorStore, useLocationStore, useMemoStore, useUserStore } from "../store/module";
|
||||
import Icon from "./Icon";
|
||||
import MemoContent from "./MemoContent";
|
||||
@ -66,10 +66,6 @@ const Memo: React.FC<Props> = (props: Props) => {
|
||||
};
|
||||
|
||||
const handleTogglePinMemoBtnClick = async () => {
|
||||
if (isVisitorMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (memo.pinned) {
|
||||
await memoStore.unpinMemo(memo.id);
|
||||
@ -82,18 +78,10 @@ const Memo: React.FC<Props> = (props: Props) => {
|
||||
};
|
||||
|
||||
const handleEditMemoClick = () => {
|
||||
if (isVisitorMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
editorStore.setEditMemoWithId(memo.id);
|
||||
};
|
||||
|
||||
const handleArchiveMemoClick = async () => {
|
||||
if (isVisitorMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await memoStore.patchMemo({
|
||||
id: memo.id,
|
||||
@ -205,9 +193,9 @@ const Memo: React.FC<Props> = (props: Props) => {
|
||||
{createdTimeStr}
|
||||
</span>
|
||||
{isVisitorMode && (
|
||||
<a className="name-text" href={`/u/${memo.creatorId}`}>
|
||||
<Link className="name-text" to={`/u/${memo.creatorId}`}>
|
||||
@{memo.creatorName}
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
{memo.visibility !== "PRIVATE" && !isVisitorMode && (
|
||||
<span
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLocationStore, useMemoStore, useShortcutStore } from "../store/module";
|
||||
import { useLocationStore, useMemoStore, useShortcutStore, useUserStore } from "../store/module";
|
||||
import { TAG_REG, LINK_REG } from "../labs/marked/parser";
|
||||
import * as utils from "../helpers/utils";
|
||||
import { DEFAULT_MEMO_LIMIT } from "../helpers/consts";
|
||||
@ -12,17 +12,19 @@ import "../less/memo-list.less";
|
||||
const MemoList = () => {
|
||||
const { t } = useTranslation();
|
||||
const memoStore = useMemoStore();
|
||||
const userStore = useUserStore();
|
||||
const shortcutStore = useShortcutStore();
|
||||
const locationStore = useLocationStore();
|
||||
const query = locationStore.state.query;
|
||||
const { memos, isFetching } = memoStore.state;
|
||||
const [isComplete, setIsComplete] = useState<boolean>(false);
|
||||
|
||||
const currentUserId = userStore.getCurrentUserId();
|
||||
const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId, visibility } = query ?? {};
|
||||
const shortcut = shortcutId ? shortcutStore.getShortcutById(shortcutId) : null;
|
||||
const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery || shortcut || visibility);
|
||||
|
||||
const shownMemos =
|
||||
const shownMemos = (
|
||||
showMemoFilter || shortcut
|
||||
? memos.filter((memo) => {
|
||||
let shouldShow = true;
|
||||
@ -72,7 +74,8 @@ const MemoList = () => {
|
||||
|
||||
return shouldShow;
|
||||
})
|
||||
: memos;
|
||||
: memos
|
||||
).filter((memo) => memo.creatorId === currentUserId);
|
||||
|
||||
const pinnedMemos = shownMemos.filter((m) => m.pinned);
|
||||
const unpinnedMemos = shownMemos.filter((m) => !m.pinned);
|
||||
@ -97,7 +100,7 @@ const MemoList = () => {
|
||||
console.error(error);
|
||||
toast.error(error.response.data.message);
|
||||
});
|
||||
}, []);
|
||||
}, [currentUserId]);
|
||||
|
||||
useEffect(() => {
|
||||
const pageWrapper = document.body.querySelector(".page-wrapper");
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useLayoutStore, useLocationStore, useMemoStore, useShortcutStore } from "../store/module";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useLayoutStore, useLocationStore, useShortcutStore } from "../store/module";
|
||||
import Icon from "./Icon";
|
||||
|
||||
let prevRequestTimestamp = Date.now();
|
||||
interface Props {
|
||||
showSearch?: boolean;
|
||||
}
|
||||
|
||||
const MobileHeader = () => {
|
||||
const MobileHeader = (props: Props) => {
|
||||
const { showSearch = true } = props;
|
||||
const locationStore = useLocationStore();
|
||||
const memoStore = useMemoStore();
|
||||
const shortcutStore = useShortcutStore();
|
||||
const layoutStore = useLayoutStore();
|
||||
const query = locationStore.state.query;
|
||||
@ -25,16 +27,6 @@ const MobileHeader = () => {
|
||||
}
|
||||
}, [query, shortcuts]);
|
||||
|
||||
const handleTitleTextClick = useCallback(() => {
|
||||
const now = Date.now();
|
||||
if (now - prevRequestTimestamp > 1 * 1000) {
|
||||
prevRequestTimestamp = now;
|
||||
memoStore.fetchMemos().catch(() => {
|
||||
// do nth
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="sticky top-0 pt-4 pb-1 mb-1 backdrop-blur-sm flex sm:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1">
|
||||
<div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
|
||||
@ -44,14 +36,11 @@ const MobileHeader = () => {
|
||||
>
|
||||
<Icon.Menu className="w-5 h-auto dark:text-gray-200" />
|
||||
</div>
|
||||
<span
|
||||
className="font-bold text-lg leading-10 mr-1 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-200"
|
||||
onClick={handleTitleTextClick}
|
||||
>
|
||||
<span className="font-bold text-lg leading-10 mr-1 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-200">
|
||||
{titleText}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-row justify-end items-center pr-1">
|
||||
<div className={`${showSearch ? "flex" : "hidden"} flex-row justify-end items-center pr-1`}>
|
||||
<Icon.Search className="w-5 h-auto dark:text-gray-200" onClick={() => layoutStore.setHomeSidebarStatus(true)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,20 +9,14 @@ import showSettingDialog from "./SettingDialog";
|
||||
const UserBanner = () => {
|
||||
const { t } = useTranslation();
|
||||
const userStore = useUserStore();
|
||||
const { user, owner } = userStore.state;
|
||||
const { user } = userStore.state;
|
||||
const [username, setUsername] = useState("Memos");
|
||||
const isVisitorMode = userStore.isVisitorMode();
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisitorMode) {
|
||||
if (!owner) {
|
||||
return;
|
||||
}
|
||||
setUsername(owner.nickname || owner.username);
|
||||
} else if (user) {
|
||||
if (user) {
|
||||
setUsername(user.nickname || user.username);
|
||||
}
|
||||
}, [isVisitorMode, user, owner]);
|
||||
}, [user]);
|
||||
|
||||
const handleMyAccountClick = () => {
|
||||
showSettingDialog("my-account");
|
||||
@ -45,7 +39,7 @@ const UserBanner = () => {
|
||||
<div className="px-3 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-lg hover:shadow hover:bg-white dark:hover:bg-zinc-700">
|
||||
<UserAvatar avatarUrl={user?.avatarUrl} />
|
||||
<span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{username}</span>
|
||||
{!isVisitorMode && user?.role === "HOST" ? (
|
||||
{user?.role === "HOST" ? (
|
||||
<span className="text-xs px-1 bg-blue-600 dark:bg-blue-800 rounded text-white dark:text-gray-200 shadow">MOD</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
130
web/src/pages/DailyReview.tsx
Normal file
130
web/src/pages/DailyReview.tsx
Normal file
@ -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;
|
||||
@ -1,14 +1,13 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useGlobalStore, useLocationStore, useMemoStore, useUserStore } from "../store/module";
|
||||
import { useLocationStore, useMemoStore } from "../store/module";
|
||||
import { TAG_REG } from "../labs/marked/parser";
|
||||
import { DEFAULT_MEMO_LIMIT } from "../helpers/consts";
|
||||
import useLoading from "../hooks/useLoading";
|
||||
import Icon from "../components/Icon";
|
||||
import MemoFilter from "../components/MemoFilter";
|
||||
import Memo from "../components/Memo";
|
||||
import MobileHeader from "../components/MobileHeader";
|
||||
|
||||
interface State {
|
||||
memos: Memo[];
|
||||
@ -16,10 +15,7 @@ interface State {
|
||||
|
||||
const Explore = () => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const globalStore = useGlobalStore();
|
||||
const locationStore = useLocationStore();
|
||||
const userStore = useUserStore();
|
||||
const memoStore = useMemoStore();
|
||||
const query = locationStore.state.query;
|
||||
const [state, setState] = useState<State>({
|
||||
@ -27,8 +23,6 @@ const Explore = () => {
|
||||
});
|
||||
const [isComplete, setIsComplete] = useState<boolean>(false);
|
||||
const loadingState = useLoading();
|
||||
const customizedProfile = globalStore.state.systemStatus.customizedProfile;
|
||||
const user = userStore.state.user;
|
||||
const location = locationStore.state;
|
||||
|
||||
useEffect(() => {
|
||||
@ -88,33 +82,11 @@ const Explore = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleTitleClick = () => {
|
||||
if (user) {
|
||||
navigate("/");
|
||||
} else {
|
||||
navigate("/auth");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="w-full min-h-full flex flex-col justify-start items-center pb-8 bg-zinc-100 dark:bg-zinc-800">
|
||||
<div className="sticky top-0 z-10 max-w-2xl w-full h-auto flex flex-row justify-between backdrop-blur-sm items-center px-4 sm:pr-6 pt-6 mb-2">
|
||||
<div className="flex flex-row justify-start items-center cursor-pointer hover:opacity-80" onClick={handleTitleClick}>
|
||||
<img className="h-12 w-auto rounded-md mr-2" src={customizedProfile.logoUrl} alt="" />
|
||||
<span className="text-xl sm:text-4xl text-gray-700 dark:text-gray-200">{customizedProfile.name}</span>
|
||||
</div>
|
||||
<div className="flex flex-row justify-end items-center">
|
||||
<a
|
||||
className="flex flex-row justify-center items-center h-12 w-12 border rounded-full hover:opacity-80 hover:shadow dark:text-white dark:border-gray-400"
|
||||
href="/explore/rss.xml"
|
||||
target="_blank"
|
||||
>
|
||||
<Icon.Rss className="w-7 h-auto opacity-60" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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} />
|
||||
{!loadingState.isLoading && (
|
||||
<main className="relative flex-grow max-w-2xl w-full h-auto flex flex-col justify-start items-start px-4 sm:pr-6">
|
||||
<main className="relative w-full h-auto flex flex-col justify-start items-start -mt-2">
|
||||
<MemoFilter />
|
||||
{sortedMemos.map((memo) => {
|
||||
return <Memo key={`${memo.id}-${memo.createdTs}`} memo={memo} readonly={true} />;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useGlobalStore, useUserStore } from "../store/module";
|
||||
import MemoEditor from "../components/MemoEditor";
|
||||
@ -11,20 +10,19 @@ import HomeSidebar from "../components/HomeSidebar";
|
||||
|
||||
function Home() {
|
||||
const { t } = useTranslation();
|
||||
const location = useLocation();
|
||||
const globalStore = useGlobalStore();
|
||||
const userStore = useUserStore();
|
||||
const user = userStore.state.user;
|
||||
|
||||
useEffect(() => {
|
||||
const { owner } = userStore.getState();
|
||||
|
||||
if (userStore.isVisitorMode()) {
|
||||
if (!owner) {
|
||||
const currentUserId = userStore.getCurrentUserId();
|
||||
userStore.getUserById(currentUserId).then((user) => {
|
||||
if (!user) {
|
||||
toast.error(t("message.user-not-found"));
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, [location]);
|
||||
});
|
||||
}, [userStore.getCurrentUserId()]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user?.setting.locale) {
|
||||
|
||||
@ -3,6 +3,7 @@ import { lazy } from "react";
|
||||
import { isNullorUndefined } from "../helpers/utils";
|
||||
import store from "../store";
|
||||
import { initialGlobalState, initialUserState } from "../store/module";
|
||||
import DailyReview from "../pages/DailyReview";
|
||||
|
||||
const Root = lazy(() => import("../layouts/Root"));
|
||||
const Auth = lazy(() => import("../pages/Auth"));
|
||||
@ -67,46 +68,65 @@ const router = createBrowserRouter([
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/u/:userId",
|
||||
element: <Home />,
|
||||
loader: async () => {
|
||||
await initialGlobalStateLoader();
|
||||
|
||||
try {
|
||||
await initialUserState();
|
||||
} catch (error) {
|
||||
// do nth
|
||||
}
|
||||
|
||||
const { host } = store.getState().user;
|
||||
if (isNullorUndefined(host)) {
|
||||
return redirect("/auth");
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "explore",
|
||||
element: <Explore />,
|
||||
loader: async () => {
|
||||
await initialGlobalStateLoader();
|
||||
|
||||
try {
|
||||
await initialUserState();
|
||||
} catch (error) {
|
||||
// do nth
|
||||
}
|
||||
|
||||
const { host } = store.getState().user;
|
||||
if (isNullorUndefined(host)) {
|
||||
return redirect("/auth");
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "review",
|
||||
element: <DailyReview />,
|
||||
loader: async () => {
|
||||
await initialGlobalStateLoader();
|
||||
|
||||
try {
|
||||
await initialUserState();
|
||||
} catch (error) {
|
||||
// do nth
|
||||
}
|
||||
|
||||
const { host } = store.getState().user;
|
||||
if (isNullorUndefined(host)) {
|
||||
return redirect("/auth");
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/u/:userId",
|
||||
element: <Home />,
|
||||
loader: async () => {
|
||||
await initialGlobalStateLoader();
|
||||
|
||||
try {
|
||||
await initialUserState();
|
||||
} catch (error) {
|
||||
// do nth
|
||||
}
|
||||
|
||||
const { host } = store.getState().user;
|
||||
if (isNullorUndefined(host)) {
|
||||
return redirect("/auth");
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/explore",
|
||||
element: <Explore />,
|
||||
loader: async () => {
|
||||
await initialGlobalStateLoader();
|
||||
|
||||
try {
|
||||
await initialUserState();
|
||||
} catch (error) {
|
||||
// do nth
|
||||
}
|
||||
|
||||
const { host } = store.getState().user;
|
||||
if (isNullorUndefined(host)) {
|
||||
return redirect("/auth");
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/m/:memoId",
|
||||
element: <MemoDetail />,
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { omit, uniqBy } from "lodash-es";
|
||||
import { omit } from "lodash-es";
|
||||
import * as api from "../../helpers/api";
|
||||
import { DEFAULT_MEMO_LIMIT } from "../../helpers/consts";
|
||||
import { useUserStore } from "./";
|
||||
import store, { useAppSelector } from "../";
|
||||
import { createMemo, deleteMemo, patchMemo, setIsFetching, setMemos } from "../reducer/memo";
|
||||
import { createMemo, deleteMemo, patchMemo, setIsFetching, upsertMemos } from "../reducer/memo";
|
||||
|
||||
const convertResponseModelMemo = (memo: Memo): Memo => {
|
||||
return {
|
||||
@ -41,11 +41,7 @@ export const useMemoStore = () => {
|
||||
}
|
||||
const { data } = (await api.getMemoList(memoFind)).data;
|
||||
const fetchedMemos = data.map((m) => convertResponseModelMemo(m));
|
||||
if (offset === 0) {
|
||||
store.dispatch(setMemos([]));
|
||||
}
|
||||
const memos = state.memos;
|
||||
store.dispatch(setMemos(uniqBy(memos.concat(fetchedMemos), "id")));
|
||||
store.dispatch(upsertMemos(fetchedMemos));
|
||||
store.dispatch(setIsFetching(false));
|
||||
|
||||
return fetchedMemos;
|
||||
|
||||
@ -4,7 +4,7 @@ import * as storage from "../../helpers/storage";
|
||||
import { UNKNOWN_ID } from "../../helpers/consts";
|
||||
import { getSystemColorScheme } from "../../helpers/utils";
|
||||
import { setAppearance, setLocale } from "../reducer/global";
|
||||
import { setUser, patchUser, setHost, setOwner } from "../reducer/user";
|
||||
import { setUser, patchUser, setHost, setUserById } from "../reducer/user";
|
||||
|
||||
const defaultSetting: Setting = {
|
||||
locale: "en",
|
||||
@ -50,14 +50,6 @@ export const initialUserState = async () => {
|
||||
store.dispatch(setHost(convertResponseModelUser(systemStatus.host)));
|
||||
}
|
||||
|
||||
const ownerUserId = getUserIdFromPath();
|
||||
if (ownerUserId) {
|
||||
const { data: owner } = (await api.getUserById(ownerUserId)).data;
|
||||
if (owner) {
|
||||
store.dispatch(setOwner(convertResponseModelUser(owner)));
|
||||
}
|
||||
}
|
||||
|
||||
const { data } = (await api.getMyselfUser()).data;
|
||||
if (data) {
|
||||
const user = convertResponseModelUser(data);
|
||||
@ -72,7 +64,7 @@ export const initialUserState = async () => {
|
||||
};
|
||||
|
||||
const getUserIdFromPath = () => {
|
||||
const { pathname } = store.getState().location;
|
||||
const pathname = location.pathname;
|
||||
const userIdRegex = /^\/u\/(\d+).*/;
|
||||
const result = pathname.match(userIdRegex);
|
||||
if (result && result.length === 2) {
|
||||
@ -99,7 +91,7 @@ export const useUserStore = () => {
|
||||
const state = useAppSelector((state) => state.user);
|
||||
|
||||
const isVisitorMode = () => {
|
||||
return !(getUserIdFromPath() === undefined);
|
||||
return state.user === undefined || (getUserIdFromPath() && state.user.id !== getUserIdFromPath());
|
||||
};
|
||||
|
||||
return {
|
||||
@ -119,9 +111,11 @@ export const useUserStore = () => {
|
||||
}
|
||||
},
|
||||
getUserById: async (userId: UserId) => {
|
||||
const { data: user } = (await api.getUserById(userId)).data;
|
||||
if (user) {
|
||||
return convertResponseModelUser(user);
|
||||
const { data } = (await api.getUserById(userId)).data;
|
||||
if (data) {
|
||||
const user = convertResponseModelUser(data);
|
||||
store.dispatch(setUserById(user));
|
||||
return user;
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||
import { uniqBy } from "lodash-es";
|
||||
|
||||
interface State {
|
||||
memos: Memo[];
|
||||
@ -13,10 +14,10 @@ const memoSlice = createSlice({
|
||||
isFetching: true,
|
||||
} as State,
|
||||
reducers: {
|
||||
setMemos: (state, action: PayloadAction<Memo[]>) => {
|
||||
upsertMemos: (state, action: PayloadAction<Memo[]>) => {
|
||||
return {
|
||||
...state,
|
||||
memos: action.payload,
|
||||
memos: uniqBy([...state.memos, ...action.payload], "id"),
|
||||
};
|
||||
},
|
||||
createMemo: (state, action: PayloadAction<Memo>) => {
|
||||
@ -59,6 +60,6 @@ const memoSlice = createSlice({
|
||||
},
|
||||
});
|
||||
|
||||
export const { setMemos, createMemo, patchMemo, deleteMemo, setIsFetching } = memoSlice.actions;
|
||||
export const { upsertMemos, createMemo, patchMemo, deleteMemo, setIsFetching } = memoSlice.actions;
|
||||
|
||||
export default memoSlice.reducer;
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
|
||||
interface State {
|
||||
// host is the user who hist the system
|
||||
host?: User;
|
||||
// owner is the user who owns the page. If in `/u/101`, then owner's id is `101`
|
||||
owner?: User;
|
||||
// user is the user who is currently logged in
|
||||
user?: User;
|
||||
userById: { [key: UserId]: User };
|
||||
}
|
||||
|
||||
const userSlice = createSlice({
|
||||
name: "user",
|
||||
initialState: {} as State,
|
||||
initialState: {
|
||||
userById: {},
|
||||
} as State,
|
||||
reducers: {
|
||||
setHost: (state, action: PayloadAction<User | undefined>) => {
|
||||
return {
|
||||
@ -19,18 +21,20 @@ const userSlice = createSlice({
|
||||
host: action.payload,
|
||||
};
|
||||
},
|
||||
setOwner: (state, action: PayloadAction<User | undefined>) => {
|
||||
return {
|
||||
...state,
|
||||
owner: action.payload,
|
||||
};
|
||||
},
|
||||
setUser: (state, action: PayloadAction<User | undefined>) => {
|
||||
return {
|
||||
...state,
|
||||
user: action.payload,
|
||||
};
|
||||
},
|
||||
setUserById: (state, action: PayloadAction<User>) => {
|
||||
const userById = cloneDeep(state.userById);
|
||||
userById[action.payload.id] = action.payload;
|
||||
return {
|
||||
...state,
|
||||
userById: userById,
|
||||
};
|
||||
},
|
||||
patchUser: (state, action: PayloadAction<Partial<User>>) => {
|
||||
return {
|
||||
...state,
|
||||
@ -43,6 +47,6 @@ const userSlice = createSlice({
|
||||
},
|
||||
});
|
||||
|
||||
export const { setHost, setOwner, setUser, patchUser } = userSlice.actions;
|
||||
export const { setHost, setUser, setUserById, patchUser } = userSlice.actions;
|
||||
|
||||
export default userSlice.reducer;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user