chore: update memo display time (#327)

* chore: update memo display time

* chore: update
This commit is contained in:
boojack 2022-10-21 20:26:00 +08:00 committed by GitHub
parent b68d6e2693
commit 2a4fc7dcc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 59 additions and 73 deletions

View File

@ -16,8 +16,8 @@ const (
UserSettingEditorFontStyleKey UserSettingKey = "editorFontStyle" UserSettingEditorFontStyleKey UserSettingKey = "editorFontStyle"
// UserSettingEditorFontStyleKey is the key type for mobile editor style. // UserSettingEditorFontStyleKey is the key type for mobile editor style.
UserSettingMobileEditorStyleKey UserSettingKey = "mobileEditorStyle" UserSettingMobileEditorStyleKey UserSettingKey = "mobileEditorStyle"
// UserSettingMemoSortOptionKey is the key type for memo sort option. // UserSettingMemoDisplayTsOptionKey is the key type for memo display ts option.
UserSettingMemoSortOptionKey UserSettingKey = "memoSortOption" UserSettingMemoDisplayTsOptionKey UserSettingKey = "memoSortOption"
) )
// String returns the string format of UserSettingKey type. // String returns the string format of UserSettingKey type.
@ -31,8 +31,8 @@ func (key UserSettingKey) String() string {
return "editorFontFamily" return "editorFontFamily"
case UserSettingMobileEditorStyleKey: case UserSettingMobileEditorStyleKey:
return "mobileEditorStyle" return "mobileEditorStyle"
case UserSettingMemoSortOptionKey: case UserSettingMemoDisplayTsOptionKey:
return "memoSortOption" return "memoDisplayTsOption"
} }
return "" return ""
} }
@ -42,7 +42,7 @@ var (
UserSettingMemoVisibilityValue = []Visibility{Privite, Protected, Public} UserSettingMemoVisibilityValue = []Visibility{Privite, Protected, Public}
UserSettingEditorFontStyleValue = []string{"normal", "mono"} UserSettingEditorFontStyleValue = []string{"normal", "mono"}
UserSettingMobileEditorStyleValue = []string{"normal", "float"} UserSettingMobileEditorStyleValue = []string{"normal", "float"}
UserSettingMemoSortOptionKeyValue = []string{"created_ts", "updated_ts"} UserSettingMemoDisplayTsOptionKeyValue = []string{"created_ts", "updated_ts"}
) )
type UserSetting struct { type UserSetting struct {
@ -127,22 +127,22 @@ func (upsert UserSettingUpsert) Validate() error {
if invalid { if invalid {
return fmt.Errorf("invalid user setting mobile editor style value") return fmt.Errorf("invalid user setting mobile editor style value")
} }
} else if upsert.Key == UserSettingMemoSortOptionKey { } else if upsert.Key == UserSettingMemoDisplayTsOptionKey {
memoSortOption := "created_ts" memoDisplayTsOption := "created_ts"
err := json.Unmarshal([]byte(upsert.Value), &memoSortOption) err := json.Unmarshal([]byte(upsert.Value), &memoDisplayTsOption)
if err != nil { if err != nil {
return fmt.Errorf("failed to unmarshal user setting memo sort option") return fmt.Errorf("failed to unmarshal user setting memo display ts option")
} }
invalid := true invalid := true
for _, value := range UserSettingMemoSortOptionKeyValue { for _, value := range UserSettingMemoDisplayTsOptionKeyValue {
if memoSortOption == value { if memoDisplayTsOption == value {
invalid = false invalid = false
break break
} }
} }
if invalid { if invalid {
return fmt.Errorf("invalid user setting memo sort option value") return fmt.Errorf("invalid user setting memo display ts option value")
} }
} else { } else {
return fmt.Errorf("invalid user setting key") return fmt.Errorf("invalid user setting key")

View File

@ -64,22 +64,22 @@ func (s *Store) ComposeMemo(ctx context.Context, memo *api.Memo) (*api.Memo, err
return nil, err return nil, err
} }
memoSortOptionKey := api.UserSettingMemoSortOptionKey memoDisplayTsOptionKey := api.UserSettingMemoDisplayTsOptionKey
memoSortOption, err := s.FindUserSetting(ctx, &api.UserSettingFind{ memoDisplayTsOptionSetting, err := s.FindUserSetting(ctx, &api.UserSettingFind{
UserID: memo.CreatorID, UserID: memo.CreatorID,
Key: &memoSortOptionKey, Key: &memoDisplayTsOptionKey,
}) })
if err != nil { if err != nil {
return nil, err return nil, err
} }
memoSortOptionValue := "created_ts" memoDisplayTsOptionValue := "created_ts"
if memoSortOption != nil { if memoDisplayTsOptionSetting != nil {
err = json.Unmarshal([]byte(memoSortOption.Value), &memoSortOptionValue) err = json.Unmarshal([]byte(memoDisplayTsOptionSetting.Value), &memoDisplayTsOptionValue)
if err != nil { if err != nil {
return nil, fmt.Errorf("failed to unmarshal user setting memo sort option value") return nil, fmt.Errorf("failed to unmarshal user setting memo display ts option value")
} }
} }
if memoSortOptionValue == "updated_ts" { if memoDisplayTsOptionValue == "updated_ts" {
memo.DisplayTs = memo.UpdatedTs memo.DisplayTs = memo.UpdatedTs
} }

View File

@ -12,12 +12,7 @@ interface Props {
} }
const ArchivedMemo: React.FC<Props> = (props: Props) => { const ArchivedMemo: React.FC<Props> = (props: Props) => {
const { memo: propsMemo } = props; const { memo } = props;
const memo = {
...propsMemo,
createdAtStr: utils.getDateTimeString(propsMemo.createdTs),
archivedAtStr: utils.getDateTimeString(propsMemo.updatedTs ?? Date.now()),
};
const { t } = useTranslation(); const { t } = useTranslation();
const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false); const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false);
@ -60,7 +55,7 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
<div className={`memo-wrapper archived-memo ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}> <div className={`memo-wrapper archived-memo ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}>
<div className="memo-top-wrapper"> <div className="memo-top-wrapper">
<span className="time-text"> <span className="time-text">
{t("common.archived-at")} {memo.archivedAtStr} {t("common.archived-at")} {utils.getDateTimeString(memo.updatedTs)}
</span> </span>
<div className="btns-container"> <div className="btns-container">
<span className="btn restore-btn" onClick={handleRestoreMemoClick}> <span className="btn restore-btn" onClick={handleRestoreMemoClick}>

View File

@ -3,22 +3,13 @@ import MemoContent, { DisplayConfig } from "./MemoContent";
import MemoResources from "./MemoResources"; import MemoResources from "./MemoResources";
import "../less/daily-memo.less"; import "../less/daily-memo.less";
interface DailyMemo extends Memo {
createdAtStr: string;
timeStr: string;
}
interface Props { interface Props {
memo: Memo; memo: Memo;
} }
const DailyMemo: React.FC<Props> = (props: Props) => { const DailyMemo: React.FC<Props> = (props: Props) => {
const { memo: propsMemo } = props; const { memo } = props;
const memo: DailyMemo = { const displayTimeStr = utils.getTimeString(memo.displayTs);
...propsMemo,
createdAtStr: utils.getDateTimeString(propsMemo.createdTs),
timeStr: utils.getTimeString(propsMemo.createdTs),
};
const displayConfig: DisplayConfig = { const displayConfig: DisplayConfig = {
enableExpand: false, enableExpand: false,
}; };
@ -26,7 +17,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
return ( return (
<div className="daily-memo-wrapper"> <div className="daily-memo-wrapper">
<div className="time-wrapper"> <div className="time-wrapper">
<span className="normal-text">{memo.timeStr}</span> <span className="normal-text">{displayTimeStr}</span>
</div> </div>
<div className="memo-container"> <div className="memo-container">
<MemoContent content={memo.content} displayConfig={displayConfig} /> <MemoContent content={memo.content} displayConfig={displayConfig} />

View File

@ -30,10 +30,10 @@ const DailyReviewDialog: React.FC<Props> = (props: Props) => {
.filter( .filter(
(m) => (m) =>
m.rowStatus === "NORMAL" && m.rowStatus === "NORMAL" &&
utils.getTimeStampByDate(m.createdTs) >= currentDateStamp && utils.getTimeStampByDate(m.displayTs) >= currentDateStamp &&
utils.getTimeStampByDate(m.createdTs) < currentDateStamp + DAILY_TIMESTAMP utils.getTimeStampByDate(m.displayTs) < currentDateStamp + DAILY_TIMESTAMP
) )
.sort((a, b) => utils.getTimeStampByDate(a.createdTs) - utils.getTimeStampByDate(b.createdTs)); .sort((a, b) => utils.getTimeStampByDate(a.displayTs) - utils.getTimeStampByDate(b.displayTs));
const handleShareBtnClick = () => { const handleShareBtnClick = () => {
if (!memosElRef.current) { if (!memosElRef.current) {

View File

@ -58,8 +58,8 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
if (memoTemp) { if (memoTemp) {
linkMemos.push({ linkMemos.push({
...memoTemp, ...memoTemp,
createdAtStr: utils.getDateTimeString(memoTemp.createdTs), createdAtStr: utils.getDateTimeString(memoTemp.displayTs),
dateStr: utils.getDateString(memoTemp.createdTs), dateStr: utils.getDateString(memoTemp.displayTs),
}); });
} }
} }
@ -70,11 +70,11 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
setLinkedMemos( setLinkedMemos(
linkedMemos linkedMemos
.filter((m) => m.rowStatus === "NORMAL" && m.id !== memo.id) .filter((m) => m.rowStatus === "NORMAL" && m.id !== memo.id)
.sort((a, b) => utils.getTimeStampByDate(b.createdTs) - utils.getTimeStampByDate(a.createdTs)) .sort((a, b) => utils.getTimeStampByDate(b.displayTs) - utils.getTimeStampByDate(a.displayTs))
.map((m) => ({ .map((m) => ({
...m, ...m,
createdAtStr: utils.getDateTimeString(m.createdTs), createdAtStr: utils.getDateTimeString(m.displayTs),
dateStr: utils.getDateString(m.createdTs), dateStr: utils.getDateString(m.displayTs),
})) }))
); );
} catch (error) { } catch (error) {
@ -104,7 +104,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
if (memoTemp) { if (memoTemp) {
const nextMemo = { const nextMemo = {
...memoTemp, ...memoTemp,
createdAtStr: utils.getDateTimeString(memoTemp.createdTs), createdAtStr: utils.getDateTimeString(memoTemp.displayTs),
}; };
setLinkMemos([]); setLinkMemos([]);
setLinkedMemos([]); setLinkedMemos([]);
@ -169,7 +169,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
<div className="memo-card-container"> <div className="memo-card-container">
<div className="header-container"> <div className="header-container">
<p className="time-text" onClick={handleMemoCreatedAtClick}> <p className="time-text" onClick={handleMemoCreatedAtClick}>
{utils.getDateTimeString(memo.createdTs)} {utils.getDateTimeString(memo.displayTs)}
</p> </p>
<div className="btns-container"> <div className="btns-container">
{!isVisitorMode && ( {!isVisitorMode && (

View File

@ -12,7 +12,7 @@ import "../less/memo-list.less";
const MemoList = () => { const MemoList = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const query = useAppSelector((state) => state.location.query); const query = useAppSelector((state) => state.location.query);
const memoSortOption = useAppSelector((state) => state.user.user?.setting.memoSortOption); const memoDisplayTsOption = useAppSelector((state) => state.user.user?.setting.memoDisplayTsOption);
const { memos, isFetching } = useAppSelector((state) => state.memo); const { memos, isFetching } = useAppSelector((state) => state.memo);
const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId } = query ?? {}; const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId } = query ?? {};
@ -50,7 +50,7 @@ const MemoList = () => {
if ( if (
duration && duration &&
duration.from < duration.to && duration.from < duration.to &&
(utils.getTimeStampByDate(memo.createdTs) < duration.from || utils.getTimeStampByDate(memo.createdTs) > duration.to) (utils.getTimeStampByDate(memo.displayTs) < duration.from || utils.getTimeStampByDate(memo.displayTs) > duration.to)
) { ) {
shouldShow = false; shouldShow = false;
} }
@ -88,7 +88,7 @@ const MemoList = () => {
console.error(error); console.error(error);
toastHelper.error(error.response.data.message); toastHelper.error(error.response.data.message);
}); });
}, [memoSortOption]); }, [memoDisplayTsOption]);
useEffect(() => { useEffect(() => {
const pageWrapper = document.body.querySelector(".page-wrapper"); const pageWrapper = document.body.querySelector(".page-wrapper");

View File

@ -1,7 +1,7 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { globalService, userService } from "../../services"; import { globalService, userService } from "../../services";
import { useAppSelector } from "../../store"; import { useAppSelector } from "../../store";
import { VISIBILITY_SELECTOR_ITEMS, MEMO_SORT_OPTION_SELECTOR_ITEMS } from "../../helpers/consts"; import { VISIBILITY_SELECTOR_ITEMS, MEMO_DISPLAY_TS_OPTION_SELECTOR_ITEMS } from "../../helpers/consts";
import Selector from "../common/Selector"; import Selector from "../common/Selector";
import "../../less/settings/preferences-section.less"; import "../../less/settings/preferences-section.less";
@ -52,7 +52,7 @@ const PreferencesSection = () => {
}; };
}); });
const memoSortOptionSelectorItems = MEMO_SORT_OPTION_SELECTOR_ITEMS.map((item) => { const memoDisplayTsOptionSelectorItems = MEMO_DISPLAY_TS_OPTION_SELECTOR_ITEMS.map((item) => {
return { return {
value: item.value, value: item.value,
text: t(`setting.preference-section.${item.value}`), text: t(`setting.preference-section.${item.value}`),
@ -76,8 +76,8 @@ const PreferencesSection = () => {
await userService.upsertUserSetting("mobileEditorStyle", value); await userService.upsertUserSetting("mobileEditorStyle", value);
}; };
const handleMemoSortOptionChanged = async (value: string) => { const handleMemoDisplayTsOptionChanged = async (value: string) => {
await userService.upsertUserSetting("memoSortOption", value); await userService.upsertUserSetting("memoDisplayTsOption", value);
}; };
return ( return (
@ -119,9 +119,9 @@ const PreferencesSection = () => {
<span className="normal-text">{t("setting.preference-section.default-memo-sort-option")}</span> <span className="normal-text">{t("setting.preference-section.default-memo-sort-option")}</span>
<Selector <Selector
className="ml-2 w-32" className="ml-2 w-32"
value={setting.memoSortOption} value={setting.memoDisplayTsOption}
dataSource={memoSortOptionSelectorItems} dataSource={memoDisplayTsOptionSelectorItems}
handleValueChanged={handleMemoSortOptionChanged} handleValueChanged={handleMemoDisplayTsOptionChanged}
/> />
</label> </label>
</div> </div>

View File

@ -20,7 +20,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
const [shortcutImgUrl, setShortcutImgUrl] = useState(""); const [shortcutImgUrl, setShortcutImgUrl] = useState("");
const memo = { const memo = {
...propsMemo, ...propsMemo,
createdAtStr: utils.getDateTimeString(propsMemo.createdTs), createdAtStr: utils.getDateTimeString(propsMemo.displayTs),
}; };
const memoElRef = useRef<HTMLDivElement>(null); const memoElRef = useRef<HTMLDivElement>(null);

View File

@ -41,7 +41,7 @@ const UsageHeatMap = () => {
useEffect(() => { useEffect(() => {
const newStat: DailyUsageStat[] = getInitialUsageStat(usedDaysAmount, beginDayTimestemp); const newStat: DailyUsageStat[] = getInitialUsageStat(usedDaysAmount, beginDayTimestemp);
for (const m of memos) { for (const m of memos) {
const index = (utils.getDateStampByDate(m.createdTs) - beginDayTimestemp) / (1000 * 3600 * 24) - 1; const index = (utils.getDateStampByDate(m.displayTs) - beginDayTimestemp) / (1000 * 3600 * 24) - 1;
if (index >= 0) { if (index >= 0) {
newStat[index].count += 1; newStat[index].count += 1;
} }

View File

@ -13,7 +13,7 @@ export const VISIBILITY_SELECTOR_ITEMS = [
{ text: "PRIVATE", value: "PRIVATE" }, { text: "PRIVATE", value: "PRIVATE" },
]; ];
export const MEMO_SORT_OPTION_SELECTOR_ITEMS = [ export const MEMO_DISPLAY_TS_OPTION_SELECTOR_ITEMS = [
{ text: "created_ts", value: "created_ts" }, { text: "created_ts", value: "created_ts" },
{ text: "created_ts", value: "updated_ts" }, { text: "created_ts", value: "updated_ts" },
]; ];

View File

@ -130,7 +130,7 @@
"default-memo-visibility": "Default memo visibility", "default-memo-visibility": "Default memo visibility",
"editor-font-style": "Editor font style", "editor-font-style": "Editor font style",
"mobile-editor-style": "Mobile editor style", "mobile-editor-style": "Mobile editor style",
"default-memo-sort-option": "Sort by created time/updated time", "default-memo-sort-option": "Display by created/updated time",
"created_ts": "Created Time", "created_ts": "Created Time",
"updated_ts": "Updated Time" "updated_ts": "Updated Time"
}, },

View File

@ -130,7 +130,7 @@
"default-memo-visibility": "默认 Memo 可见性", "default-memo-visibility": "默认 Memo 可见性",
"editor-font-style": "编辑器字体样式", "editor-font-style": "编辑器字体样式",
"mobile-editor-style": "移动端编辑器样式", "mobile-editor-style": "移动端编辑器样式",
"default-memo-sort-option": "按创建时间/更新时间排序", "default-memo-sort-option": "按创建时间/更新时间显示",
"created_ts": "创建时间", "created_ts": "创建时间",
"updated_ts": "更新时间" "updated_ts": "更新时间"
}, },

View File

@ -55,7 +55,7 @@ const Explore = () => {
<main className="memos-wrapper"> <main className="memos-wrapper">
{state.memos.length > 0 ? ( {state.memos.length > 0 ? (
state.memos.map((memo) => { state.memos.map((memo) => {
const createdAtStr = dayjs(memo.createdTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss"); const createdAtStr = dayjs(memo.displayTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss");
return ( return (
<div className="memo-container" key={memo.id}> <div className="memo-container" key={memo.id}>
<div className="memo-header"> <div className="memo-header">

View File

@ -99,7 +99,7 @@ const MemoDetail = () => {
<div className="memo-container"> <div className="memo-container">
<div className="memo-header"> <div className="memo-header">
<div className="status-container"> <div className="status-container">
<span className="time-text">{dayjs(state.memo.createdTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss")}</span> <span className="time-text">{dayjs(state.memo.displayTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss")}</span>
{user?.id === state.memo.creatorId ? ( {user?.id === state.memo.creatorId ? (
<Dropdown <Dropdown
className="visibility-selector" className="visibility-selector"

View File

@ -8,7 +8,7 @@ const defauleSetting: Setting = {
memoVisibility: "PRIVATE", memoVisibility: "PRIVATE",
editorFontStyle: "normal", editorFontStyle: "normal",
mobileEditorStyle: "normal", mobileEditorStyle: "normal",
memoSortOption: "created_ts", memoDisplayTsOption: "created_ts",
}; };
export const convertResponseModelUser = (user: User): User => { export const convertResponseModelUser = (user: User): User => {

View File

@ -3,7 +3,7 @@ interface Setting {
memoVisibility: Visibility; memoVisibility: Visibility;
editorFontStyle: "normal" | "mono"; editorFontStyle: "normal" | "mono";
mobileEditorStyle: "normal" | "float"; mobileEditorStyle: "normal" | "float";
memoSortOption: "created_ts" | "updated_ts"; memoDisplayTsOption: "created_ts" | "updated_ts";
} }
interface UserLocaleSetting { interface UserLocaleSetting {