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 is the key type for mobile editor style.
UserSettingMobileEditorStyleKey UserSettingKey = "mobileEditorStyle"
// UserSettingMemoSortOptionKey is the key type for memo sort option.
UserSettingMemoSortOptionKey UserSettingKey = "memoSortOption"
// UserSettingMemoDisplayTsOptionKey is the key type for memo display ts option.
UserSettingMemoDisplayTsOptionKey UserSettingKey = "memoSortOption"
)
// String returns the string format of UserSettingKey type.
@ -31,18 +31,18 @@ func (key UserSettingKey) String() string {
return "editorFontFamily"
case UserSettingMobileEditorStyleKey:
return "mobileEditorStyle"
case UserSettingMemoSortOptionKey:
return "memoSortOption"
case UserSettingMemoDisplayTsOptionKey:
return "memoDisplayTsOption"
}
return ""
}
var (
UserSettingLocaleValue = []string{"en", "zh", "vi"}
UserSettingMemoVisibilityValue = []Visibility{Privite, Protected, Public}
UserSettingEditorFontStyleValue = []string{"normal", "mono"}
UserSettingMobileEditorStyleValue = []string{"normal", "float"}
UserSettingMemoSortOptionKeyValue = []string{"created_ts", "updated_ts"}
UserSettingLocaleValue = []string{"en", "zh", "vi"}
UserSettingMemoVisibilityValue = []Visibility{Privite, Protected, Public}
UserSettingEditorFontStyleValue = []string{"normal", "mono"}
UserSettingMobileEditorStyleValue = []string{"normal", "float"}
UserSettingMemoDisplayTsOptionKeyValue = []string{"created_ts", "updated_ts"}
)
type UserSetting struct {
@ -127,22 +127,22 @@ func (upsert UserSettingUpsert) Validate() error {
if invalid {
return fmt.Errorf("invalid user setting mobile editor style value")
}
} else if upsert.Key == UserSettingMemoSortOptionKey {
memoSortOption := "created_ts"
err := json.Unmarshal([]byte(upsert.Value), &memoSortOption)
} else if upsert.Key == UserSettingMemoDisplayTsOptionKey {
memoDisplayTsOption := "created_ts"
err := json.Unmarshal([]byte(upsert.Value), &memoDisplayTsOption)
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
for _, value := range UserSettingMemoSortOptionKeyValue {
if memoSortOption == value {
for _, value := range UserSettingMemoDisplayTsOptionKeyValue {
if memoDisplayTsOption == value {
invalid = false
break
}
}
if invalid {
return fmt.Errorf("invalid user setting memo sort option value")
return fmt.Errorf("invalid user setting memo display ts option value")
}
} else {
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
}
memoSortOptionKey := api.UserSettingMemoSortOptionKey
memoSortOption, err := s.FindUserSetting(ctx, &api.UserSettingFind{
memoDisplayTsOptionKey := api.UserSettingMemoDisplayTsOptionKey
memoDisplayTsOptionSetting, err := s.FindUserSetting(ctx, &api.UserSettingFind{
UserID: memo.CreatorID,
Key: &memoSortOptionKey,
Key: &memoDisplayTsOptionKey,
})
if err != nil {
return nil, err
}
memoSortOptionValue := "created_ts"
if memoSortOption != nil {
err = json.Unmarshal([]byte(memoSortOption.Value), &memoSortOptionValue)
memoDisplayTsOptionValue := "created_ts"
if memoDisplayTsOptionSetting != nil {
err = json.Unmarshal([]byte(memoDisplayTsOptionSetting.Value), &memoDisplayTsOptionValue)
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
}

View file

@ -12,12 +12,7 @@ interface Props {
}
const ArchivedMemo: React.FC<Props> = (props: Props) => {
const { memo: propsMemo } = props;
const memo = {
...propsMemo,
createdAtStr: utils.getDateTimeString(propsMemo.createdTs),
archivedAtStr: utils.getDateTimeString(propsMemo.updatedTs ?? Date.now()),
};
const { memo } = props;
const { t } = useTranslation();
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-top-wrapper">
<span className="time-text">
{t("common.archived-at")} {memo.archivedAtStr}
{t("common.archived-at")} {utils.getDateTimeString(memo.updatedTs)}
</span>
<div className="btns-container">
<span className="btn restore-btn" onClick={handleRestoreMemoClick}>

View file

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

View file

@ -30,10 +30,10 @@ const DailyReviewDialog: React.FC<Props> = (props: Props) => {
.filter(
(m) =>
m.rowStatus === "NORMAL" &&
utils.getTimeStampByDate(m.createdTs) >= currentDateStamp &&
utils.getTimeStampByDate(m.createdTs) < currentDateStamp + DAILY_TIMESTAMP
utils.getTimeStampByDate(m.displayTs) >= currentDateStamp &&
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 = () => {
if (!memosElRef.current) {

View file

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

View file

@ -12,7 +12,7 @@ import "../less/memo-list.less";
const MemoList = () => {
const { t } = useTranslation();
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 { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId } = query ?? {};
@ -50,7 +50,7 @@ const MemoList = () => {
if (
duration &&
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;
}
@ -88,7 +88,7 @@ const MemoList = () => {
console.error(error);
toastHelper.error(error.response.data.message);
});
}, [memoSortOption]);
}, [memoDisplayTsOption]);
useEffect(() => {
const pageWrapper = document.body.querySelector(".page-wrapper");

View file

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

View file

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

View file

@ -41,7 +41,7 @@ const UsageHeatMap = () => {
useEffect(() => {
const newStat: DailyUsageStat[] = getInitialUsageStat(usedDaysAmount, beginDayTimestemp);
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) {
newStat[index].count += 1;
}

View file

@ -13,7 +13,7 @@ export const VISIBILITY_SELECTOR_ITEMS = [
{ 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: "updated_ts" },
];

View file

@ -130,7 +130,7 @@
"default-memo-visibility": "Default memo visibility",
"editor-font-style": "Editor font 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",
"updated_ts": "Updated Time"
},

View file

@ -130,7 +130,7 @@
"default-memo-visibility": "默认 Memo 可见性",
"editor-font-style": "编辑器字体样式",
"mobile-editor-style": "移动端编辑器样式",
"default-memo-sort-option": "按创建时间/更新时间排序",
"default-memo-sort-option": "按创建时间/更新时间显示",
"created_ts": "创建时间",
"updated_ts": "更新时间"
},
@ -163,4 +163,4 @@
"copied": "已复制",
"succeed-copy-content": "复制内容到剪贴板成功。"
}
}
}

View file

@ -55,7 +55,7 @@ const Explore = () => {
<main className="memos-wrapper">
{state.memos.length > 0 ? (
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 (
<div className="memo-container" key={memo.id}>
<div className="memo-header">

View file

@ -99,7 +99,7 @@ const MemoDetail = () => {
<div className="memo-container">
<div className="memo-header">
<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 ? (
<Dropdown
className="visibility-selector"

View file

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

View file

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