feat: customize memo list sorting rules (#312)

* chore: update .gitignore

* feat: 添加Memo列表按更新时间排序

* fix go-static-checks

* update

* update

* update Memo.tsx/MemoList.tsx

* handle conflict

Co-authored-by: boojack <stevenlgtm@gmail.com>
This commit is contained in:
Zeng1998
2022-10-19 21:00:34 +08:00
committed by GitHub
parent 24154c95f2
commit bf5b7e747d
14 changed files with 109 additions and 19 deletions

View File

@ -7,6 +7,7 @@ import { useNavigate } from "react-router-dom";
import "dayjs/locale/zh";
import { UNKNOWN_ID } from "../helpers/consts";
import { editorStateService, locationService, memoService, userService } from "../services";
import { useAppSelector } from "../store";
import Icon from "./Icon";
import toastHelper from "./Toast";
import MemoContent from "./MemoContent";
@ -22,19 +23,21 @@ interface Props {
memo: Memo;
}
export const getFormatedMemoCreatedAtStr = (createdTs: number, locale = "en"): string => {
if (Date.now() - createdTs < 1000 * 60 * 60 * 24) {
return dayjs(createdTs).locale(locale).fromNow();
export const getFormatedMemoTimeStr = (time: number, locale = "en"): string => {
if (Date.now() - time < 1000 * 60 * 60 * 24) {
return dayjs(time).locale(locale).fromNow();
} else {
return dayjs(createdTs).locale(locale).format("YYYY/MM/DD HH:mm:ss");
return dayjs(time).locale(locale).format("YYYY/MM/DD HH:mm:ss");
}
};
const Memo: React.FC<Props> = (props: Props) => {
const memo = props.memo;
const user = useAppSelector((state) => state.user.user);
const { t, i18n } = useTranslation();
const navigate = useNavigate();
const [createdAtStr, setCreatedAtStr] = useState<string>(getFormatedMemoCreatedAtStr(memo.createdTs, i18n.language));
const [createdAtStr, setCreatedAtStr] = useState<string>(getFormatedMemoTimeStr(memo.createdTs, i18n.language));
const [updatedAtStr, setUpdatedAtStr] = useState<string>(getFormatedMemoTimeStr(memo.updatedTs, i18n.language));
const memoContainerRef = useRef<HTMLDivElement>(null);
const isVisitorMode = userService.isVisitorMode();
@ -42,7 +45,8 @@ const Memo: React.FC<Props> = (props: Props) => {
let intervalFlag: any = -1;
if (Date.now() - memo.createdTs < 1000 * 60 * 60 * 24) {
intervalFlag = setInterval(() => {
setCreatedAtStr(getFormatedMemoCreatedAtStr(memo.createdTs, i18n.language));
setCreatedAtStr(getFormatedMemoTimeStr(memo.createdTs, i18n.language));
setUpdatedAtStr(getFormatedMemoTimeStr(memo.updatedTs, i18n.language));
}, 1000 * 1);
}
@ -182,12 +186,13 @@ const Memo: React.FC<Props> = (props: Props) => {
editorStateService.setEditMemoWithId(memo.id);
};
const timeStr = user?.setting.memoSortOption === "created_ts" ? createdAtStr : `${t("common.update-on")} ${updatedAtStr}`;
return (
<div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned ? "pinned" : ""}`} ref={memoContainerRef}>
<div className="memo-top-wrapper">
<div className="status-text-container">
<span className="time-text" onClick={handleShowMemoStoryDialog}>
{createdAtStr}
{timeStr}
</span>
{memo.visibility !== "PRIVATE" && !isVisitorMode && (
<span className={`status-text ${memo.visibility.toLocaleLowerCase()}`}>{memo.visibility}</span>