YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: update page router (#1330)

Browse Source
This commit is contained in:
boojack
2023-03-11 08:43:45 +08:00
committed by GitHub
parent ccdcd3d154
commit f3f0efba1e
15 changed files with 293 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
web/src/components/DailyReviewDialog.tsx
View File

@ -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 }
);
}

64
web/src/components/Header.tsx
View File

@ -1,10 +1,9 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { Link } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useLayoutStore, useLocationStore, useUserStore } from "../store/module"; import { useLayoutStore, useUserStore } from "../store/module";
import { resolution } from "../utils/layout"; import { resolution } from "../utils/layout";
import Icon from "./Icon"; import Icon from "./Icon";
import showDailyReviewDialog from "./DailyReviewDialog";
import showResourcesDialog from "./ResourcesDialog"; import showResourcesDialog from "./ResourcesDialog";
import showSettingDialog from "./SettingDialog"; import showSettingDialog from "./SettingDialog";
import showAskAIDialog from "./AskAIDialog"; import showAskAIDialog from "./AskAIDialog";
@ -14,9 +13,9 @@ import UserBanner from "./UserBanner";
const Header = () => { const Header = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const userStore = useUserStore(); const userStore = useUserStore();
const locationStore = useLocationStore();
const layoutStore = useLayoutStore(); const layoutStore = useLayoutStore();
const showHeader = layoutStore.state.showHeader; const showHeader = layoutStore.state.showHeader;
const isVisitorMode = userStore.isVisitorMode() && !userStore.state.user;
useEffect(() => { useEffect(() => {
const handleWindowResize = () => { const handleWindowResize = () => {
@ -49,26 +48,47 @@ const Header = () => {
> >
<UserBanner /> <UserBanner />
<div className="w-full px-2 py-2 flex flex-col justify-start items-start shrink-0 space-y-2"> <div className="w-full px-2 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
<Link {!isVisitorMode && (
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" <NavLink
onClick={() => locationStore.clearQuery()} to="/"
> className={({ isActive }) =>
<Icon.Home className="mr-4 w-6 h-auto opacity-80" /> {t("common.home")} `${
</Link> isActive && "bg-white dark:bg-zinc-700 shadow"
<button } 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="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")} <Icon.Home className="mr-4 w-6 h-auto opacity-80" /> {t("common.home")}
</button> </>
<Link </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" 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> <Icon.Hash className="mr-4 w-6 h-auto opacity-80" /> {t("common.explore")}
{!userStore.isVisitorMode() && ( </>
</NavLink>
{!isVisitorMode && (
<> <>
<button <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" 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"

18
web/src/components/Memo.tsx
View File

@ -3,7 +3,7 @@ import dayjs from "dayjs";
import { memo, useEffect, useRef, useState } from "react"; import { memo, useEffect, useRef, useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next"; 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 { useEditorStore, useLocationStore, useMemoStore, useUserStore } from "../store/module";
import Icon from "./Icon"; import Icon from "./Icon";
import MemoContent from "./MemoContent"; import MemoContent from "./MemoContent";
@ -66,10 +66,6 @@ const Memo: React.FC<Props> = (props: Props) => {
}; };
const handleTogglePinMemoBtnClick = async () => { const handleTogglePinMemoBtnClick = async () => {
if (isVisitorMode) {
return;
}
try { try {
if (memo.pinned) { if (memo.pinned) {
await memoStore.unpinMemo(memo.id); await memoStore.unpinMemo(memo.id);
@ -82,18 +78,10 @@ const Memo: React.FC<Props> = (props: Props) => {
}; };
const handleEditMemoClick = () => { const handleEditMemoClick = () => {
if (isVisitorMode) {
return;
}
editorStore.setEditMemoWithId(memo.id); editorStore.setEditMemoWithId(memo.id);
}; };
const handleArchiveMemoClick = async () => { const handleArchiveMemoClick = async () => {
if (isVisitorMode) {
return;
}
try { try {
await memoStore.patchMemo({ await memoStore.patchMemo({
id: memo.id, id: memo.id,
@ -205,9 +193,9 @@ const Memo: React.FC<Props> = (props: Props) => {
{createdTimeStr} {createdTimeStr}
</span> </span>
{isVisitorMode && ( {isVisitorMode && (
<a className="name-text" href={`/u/${memo.creatorId}`}> <Link className="name-text" to={`/u/${memo.creatorId}`}>
@{memo.creatorName} @{memo.creatorName}
</a> </Link>
)} )}
{memo.visibility !== "PRIVATE" && !isVisitorMode && ( {memo.visibility !== "PRIVATE" && !isVisitorMode && (
<span <span

11
web/src/components/MemoList.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next"; 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 { TAG_REG, LINK_REG } from "../labs/marked/parser";
import * as utils from "../helpers/utils"; import * as utils from "../helpers/utils";
import { DEFAULT_MEMO_LIMIT } from "../helpers/consts"; import { DEFAULT_MEMO_LIMIT } from "../helpers/consts";
@ -12,17 +12,19 @@ import "../less/memo-list.less";
const MemoList = () => { const MemoList = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const memoStore = useMemoStore(); const memoStore = useMemoStore();
const userStore = useUserStore();
const shortcutStore = useShortcutStore(); const shortcutStore = useShortcutStore();
const locationStore = useLocationStore(); const locationStore = useLocationStore();
const query = locationStore.state.query; const query = locationStore.state.query;
const { memos, isFetching } = memoStore.state; const { memos, isFetching } = memoStore.state;
const [isComplete, setIsComplete] = useState<boolean>(false); const [isComplete, setIsComplete] = useState<boolean>(false);
const currentUserId = userStore.getCurrentUserId();
const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId, visibility } = query ?? {}; const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId, visibility } = query ?? {};
const shortcut = shortcutId ? shortcutStore.getShortcutById(shortcutId) : null; const shortcut = shortcutId ? shortcutStore.getShortcutById(shortcutId) : null;
const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery || shortcut || visibility); const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery || shortcut || visibility);
const shownMemos = const shownMemos = (
showMemoFilter || shortcut showMemoFilter || shortcut
? memos.filter((memo) => { ? memos.filter((memo) => {
let shouldShow = true; let shouldShow = true;
@ -72,7 +74,8 @@ const MemoList = () => {
return shouldShow; return shouldShow;
}) })
: memos; : memos
).filter((memo) => memo.creatorId === currentUserId);
const pinnedMemos = shownMemos.filter((m) => m.pinned); const pinnedMemos = shownMemos.filter((m) => m.pinned);
const unpinnedMemos = shownMemos.filter((m) => !m.pinned); const unpinnedMemos = shownMemos.filter((m) => !m.pinned);
@ -97,7 +100,7 @@ const MemoList = () => {
console.error(error); console.error(error);
toast.error(error.response.data.message); toast.error(error.response.data.message);
}); });
}, []); }, [currentUserId]);
useEffect(() => { useEffect(() => {
const pageWrapper = document.body.querySelector(".page-wrapper"); const pageWrapper = document.body.querySelector(".page-wrapper");

29
web/src/components/MobileHeader.tsx
View File

@ -1,12 +1,14 @@
import { useCallback, useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useLayoutStore, useLocationStore, useMemoStore, useShortcutStore } from "../store/module"; import { useLayoutStore, useLocationStore, useShortcutStore } from "../store/module";
import Icon from "./Icon"; 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 locationStore = useLocationStore();
const memoStore = useMemoStore();
const shortcutStore = useShortcutStore(); const shortcutStore = useShortcutStore();
const layoutStore = useLayoutStore(); const layoutStore = useLayoutStore();
const query = locationStore.state.query; const query = locationStore.state.query;
@ -25,16 +27,6 @@ const MobileHeader = () => {
} }
}, [query, shortcuts]); }, [query, shortcuts]);
const handleTitleTextClick = useCallback(() => {
const now = Date.now();
if (now - prevRequestTimestamp > 1 * 1000) {
prevRequestTimestamp = now;
memoStore.fetchMemos().catch(() => {
// do nth
});
}
}, []);
return ( 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="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"> <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" /> <Icon.Menu className="w-5 h-auto dark:text-gray-200" />
</div> </div>
<span <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">
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}
>
{titleText} {titleText}
</span> </span>
</div> </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)} /> <Icon.Search className="w-5 h-auto dark:text-gray-200" onClick={() => layoutStore.setHomeSidebarStatus(true)} />
</div> </div>
</div> </div>

14
web/src/components/UserBanner.tsx
View File

@ -9,20 +9,14 @@ import showSettingDialog from "./SettingDialog";
const UserBanner = () => { const UserBanner = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const userStore = useUserStore(); const userStore = useUserStore();
const { user, owner } = userStore.state; const { user } = userStore.state;
const [username, setUsername] = useState("Memos"); const [username, setUsername] = useState("Memos");
const isVisitorMode = userStore.isVisitorMode();
useEffect(() => { useEffect(() => {
if (isVisitorMode) { if (user) {
if (!owner) {
return;
}
setUsername(owner.nickname || owner.username);
} else if (user) {
setUsername(user.nickname || user.username); setUsername(user.nickname || user.username);
} }
}, [isVisitorMode, user, owner]); }, [user]);
const handleMyAccountClick = () => { const handleMyAccountClick = () => {
showSettingDialog("my-account"); 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"> <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} /> <UserAvatar avatarUrl={user?.avatarUrl} />
<span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{username}</span> <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> <span className="text-xs px-1 bg-blue-600 dark:bg-blue-800 rounded text-white dark:text-gray-200 shadow">MOD</span>
) : null} ) : null}
</div> </div>

87
web/src/less/daily-review-dialog.less
View File

@ -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
View 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;

38
web/src/pages/Explore.tsx
View File

@ -1,14 +1,13 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom"; import { useLocationStore, useMemoStore } from "../store/module";
import { useGlobalStore, useLocationStore, useMemoStore, useUserStore } from "../store/module";
import { TAG_REG } from "../labs/marked/parser"; import { TAG_REG } from "../labs/marked/parser";
import { DEFAULT_MEMO_LIMIT } from "../helpers/consts"; import { DEFAULT_MEMO_LIMIT } from "../helpers/consts";
import useLoading from "../hooks/useLoading"; import useLoading from "../hooks/useLoading";
import Icon from "../components/Icon";
import MemoFilter from "../components/MemoFilter"; import MemoFilter from "../components/MemoFilter";
import Memo from "../components/Memo"; import Memo from "../components/Memo";
import MobileHeader from "../components/MobileHeader";
interface State { interface State {
memos: Memo[]; memos: Memo[];
@ -16,10 +15,7 @@ interface State {
const Explore = () => { const Explore = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate();
const globalStore = useGlobalStore();
const locationStore = useLocationStore(); const locationStore = useLocationStore();
const userStore = useUserStore();
const memoStore = useMemoStore(); const memoStore = useMemoStore();
const query = locationStore.state.query; const query = locationStore.state.query;
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
@ -27,8 +23,6 @@ const Explore = () => {
}); });
const [isComplete, setIsComplete] = useState<boolean>(false); const [isComplete, setIsComplete] = useState<boolean>(false);
const loadingState = useLoading(); const loadingState = useLoading();
const customizedProfile = globalStore.state.systemStatus.customizedProfile;
const user = userStore.state.user;
const location = locationStore.state; const location = locationStore.state;
useEffect(() => { useEffect(() => {
@ -88,33 +82,11 @@ const Explore = () => {
} }
}; };
const handleTitleClick = () => {
if (user) {
navigate("/");
} else {
navigate("/auth");
}
};
return ( return (
<section className="w-full min-h-full flex flex-col justify-start items-center pb-8 bg-zinc-100 dark:bg-zinc-800"> <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">
<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"> <MobileHeader showSearch={false} />
<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>
{!loadingState.isLoading && ( {!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 /> <MemoFilter />
{sortedMemos.map((memo) => { {sortedMemos.map((memo) => {
return <Memo key={`${memo.id}-${memo.createdTs}`} memo={memo} readonly={true} />; return <Memo key={`${memo.id}-${memo.createdTs}`} memo={memo} readonly={true} />;

14
web/src/pages/Home.tsx
View File

@ -1,6 +1,5 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { useGlobalStore, useUserStore } from "../store/module"; import { useGlobalStore, useUserStore } from "../store/module";
import MemoEditor from "../components/MemoEditor"; import MemoEditor from "../components/MemoEditor";
@ -11,20 +10,19 @@ import HomeSidebar from "../components/HomeSidebar";
function Home() { function Home() {
const { t } = useTranslation(); const { t } = useTranslation();
const location = useLocation();
const globalStore = useGlobalStore(); const globalStore = useGlobalStore();
const userStore = useUserStore(); const userStore = useUserStore();
const user = userStore.state.user; const user = userStore.state.user;
useEffect(() => { useEffect(() => {
const { owner } = userStore.getState(); const currentUserId = userStore.getCurrentUserId();
userStore.getUserById(currentUserId).then((user) => {
if (userStore.isVisitorMode()) { if (!user) {
if (!owner) {
toast.error(t("message.user-not-found")); toast.error(t("message.user-not-found"));
return;
} }
} });
}, [location]); }, [userStore.getCurrentUserId()]);
useEffect(() => { useEffect(() => {
if (user?.setting.locale) { if (user?.setting.locale) {

96
web/src/router/index.tsx
View File

@ -3,6 +3,7 @@ import { lazy } from "react";
import { isNullorUndefined } from "../helpers/utils"; import { isNullorUndefined } from "../helpers/utils";
import store from "../store"; import store from "../store";
import { initialGlobalState, initialUserState } from "../store/module"; import { initialGlobalState, initialUserState } from "../store/module";
import DailyReview from "../pages/DailyReview";
const Root = lazy(() => import("../layouts/Root")); const Root = lazy(() => import("../layouts/Root"));
const Auth = lazy(() => import("../pages/Auth")); const Auth = lazy(() => import("../pages/Auth"));
@ -67,46 +68,65 @@ const router = createBrowserRouter([
return null; 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", path: "/m/:memoId",
element: <MemoDetail />, element: <MemoDetail />,

10
web/src/store/module/memo.ts
View File

@ -1,9 +1,9 @@
import { omit, uniqBy } from "lodash-es"; import { omit } from "lodash-es";
import * as api from "../../helpers/api"; import * as api from "../../helpers/api";
import { DEFAULT_MEMO_LIMIT } from "../../helpers/consts"; import { DEFAULT_MEMO_LIMIT } from "../../helpers/consts";
import { useUserStore } from "./"; import { useUserStore } from "./";
import store, { useAppSelector } 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 => { const convertResponseModelMemo = (memo: Memo): Memo => {
return { return {
@ -41,11 +41,7 @@ export const useMemoStore = () => {
} }
const { data } = (await api.getMemoList(memoFind)).data; const { data } = (await api.getMemoList(memoFind)).data;
const fetchedMemos = data.map((m) => convertResponseModelMemo(m)); const fetchedMemos = data.map((m) => convertResponseModelMemo(m));
if (offset === 0) { store.dispatch(upsertMemos(fetchedMemos));
store.dispatch(setMemos([]));
}
const memos = state.memos;
store.dispatch(setMemos(uniqBy(memos.concat(fetchedMemos), "id")));
store.dispatch(setIsFetching(false)); store.dispatch(setIsFetching(false));
return fetchedMemos; return fetchedMemos;

22
web/src/store/module/user.ts
View File

@ -4,7 +4,7 @@ import * as storage from "../../helpers/storage";
import { UNKNOWN_ID } from "../../helpers/consts"; import { UNKNOWN_ID } from "../../helpers/consts";
import { getSystemColorScheme } from "../../helpers/utils"; import { getSystemColorScheme } from "../../helpers/utils";
import { setAppearance, setLocale } from "../reducer/global"; 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 = { const defaultSetting: Setting = {
locale: "en", locale: "en",
@ -50,14 +50,6 @@ export const initialUserState = async () => {
store.dispatch(setHost(convertResponseModelUser(systemStatus.host))); 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; const { data } = (await api.getMyselfUser()).data;
if (data) { if (data) {
const user = convertResponseModelUser(data); const user = convertResponseModelUser(data);
@ -72,7 +64,7 @@ export const initialUserState = async () => {
}; };
const getUserIdFromPath = () => { const getUserIdFromPath = () => {
const { pathname } = store.getState().location; const pathname = location.pathname;
const userIdRegex = /^\/u\/(\d+).*/; const userIdRegex = /^\/u\/(\d+).*/;
const result = pathname.match(userIdRegex); const result = pathname.match(userIdRegex);
if (result && result.length === 2) { if (result && result.length === 2) {
@ -99,7 +91,7 @@ export const useUserStore = () => {
const state = useAppSelector((state) => state.user); const state = useAppSelector((state) => state.user);
const isVisitorMode = () => { const isVisitorMode = () => {
return !(getUserIdFromPath() === undefined); return state.user === undefined || (getUserIdFromPath() && state.user.id !== getUserIdFromPath());
}; };
return { return {
@ -119,9 +111,11 @@ export const useUserStore = () => {
} }
}, },
getUserById: async (userId: UserId) => { getUserById: async (userId: UserId) => {
const { data: user } = (await api.getUserById(userId)).data; const { data } = (await api.getUserById(userId)).data;
if (user) { if (data) {
return convertResponseModelUser(user); const user = convertResponseModelUser(data);
store.dispatch(setUserById(user));
return user;
} else { } else {
return undefined; return undefined;
} }

7
web/src/store/reducer/memo.ts
View File

@ -1,4 +1,5 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { uniqBy } from "lodash-es";
interface State { interface State {
memos: Memo[]; memos: Memo[];
@ -13,10 +14,10 @@ const memoSlice = createSlice({
isFetching: true, isFetching: true,
} as State, } as State,
reducers: { reducers: {
setMemos: (state, action: PayloadAction<Memo[]>) => { upsertMemos: (state, action: PayloadAction<Memo[]>) => {
return { return {
...state, ...state,
memos: action.payload, memos: uniqBy([...state.memos, ...action.payload], "id"),
}; };
}, },
createMemo: (state, action: PayloadAction<Memo>) => { 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; export default memoSlice.reducer;

24
web/src/store/reducer/user.ts
View File

@ -1,17 +1,19 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { cloneDeep } from "lodash-es";
interface State { interface State {
// host is the user who hist the system // host is the user who hist the system
host?: User; 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 is the user who is currently logged in
user?: User; user?: User;
userById: { [key: UserId]: User };
} }
const userSlice = createSlice({ const userSlice = createSlice({
name: "user", name: "user",
initialState: {} as State, initialState: {
userById: {},
} as State,
reducers: { reducers: {
setHost: (state, action: PayloadAction<User | undefined>) => { setHost: (state, action: PayloadAction<User | undefined>) => {
return { return {
@ -19,18 +21,20 @@ const userSlice = createSlice({
host: action.payload, host: action.payload,
}; };
}, },
setOwner: (state, action: PayloadAction<User | undefined>) => {
return {
...state,
owner: action.payload,
};
},
setUser: (state, action: PayloadAction<User | undefined>) => { setUser: (state, action: PayloadAction<User | undefined>) => {
return { return {
...state, ...state,
user: action.payload, 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>>) => { patchUser: (state, action: PayloadAction<Partial<User>>) => {
return { return {
...state, ...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; export default userSlice.reducer;