chore: update memo display time (#327)

* chore: update memo display time

* chore: update

api/user_setting.go

@@ -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.
+	// UserSettingMemoDisplayTsOptionKey is the key type for memo display ts option.
-	UserSettingMemoSortOptionKey UserSettingKey = "memoSortOption"
+	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:
+	case UserSettingMemoDisplayTsOptionKey:
-		return "memoSortOption"
+		return "memoDisplayTsOption"
 	}
 	return ""
 }
 
 var (
-	UserSettingLocaleValue            = []string{"en", "zh", "vi"}
+	UserSettingLocaleValue                 = []string{"en", "zh", "vi"}
-	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 {
@@ -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 {
+	} 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 {
-			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 {
+		for _, value := range UserSettingMemoDisplayTsOptionKeyValue {
-			if memoSortOption == value {
+			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")

store/memo.go

@@ -64,22 +64,22 @@ func (s *Store) ComposeMemo(ctx context.Context, memo *api.Memo) (*api.Memo, 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,
-		Key:    &memoSortOptionKey,
+		Key:    &memoDisplayTsOptionKey,
 	})
 	if err != nil {
 		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 {
-			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
 	}
 

web/src/components/ArchivedMemo.tsx

@@ -12,12 +12,7 @@ interface 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 [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}>

web/src/components/DailyMemo.tsx

@@ -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 } = props;
-  const memo: DailyMemo = {
+  const displayTimeStr = utils.getTimeString(memo.displayTs);
-    ...propsMemo,
-    createdAtStr: utils.getDateTimeString(propsMemo.createdTs),
-    timeStr: utils.getTimeString(propsMemo.createdTs),
-  };
   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} />

web/src/components/DailyReviewDialog.tsx

@@ -30,10 +30,10 @@ const DailyReviewDialog: React.FC<Props> = (props: Props) => {
     .filter(
       (m) =>
         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 = () => {
     if (!memosElRef.current) {

web/src/components/MemoCardDialog.tsx

@@ -58,8 +58,8 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
             if (memoTemp) {
               linkMemos.push({
                 ...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(
           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),
+              createdAtStr: utils.getDateTimeString(m.displayTs),
-              dateStr: utils.getDateString(m.createdTs),
+              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 && (

web/src/components/MemoList.tsx

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

web/src/components/Settings/PreferencesSection.tsx

@@ -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) => {
+  const handleMemoDisplayTsOptionChanged = async (value: string) => {
-    await userService.upsertUserSetting("memoSortOption", value);
+    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}
+          value={setting.memoDisplayTsOption}
-          dataSource={memoSortOptionSelectorItems}
+          dataSource={memoDisplayTsOptionSelectorItems}
-          handleValueChanged={handleMemoSortOptionChanged}
+          handleValueChanged={handleMemoDisplayTsOptionChanged}
         />
       </label>
     </div>

web/src/components/ShareMemoImageDialog.tsx

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

web/src/components/UsageHeatMap.tsx

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

web/src/helpers/consts.ts

@@ -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" },
 ];

web/src/locales/en.json

@@ -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"
     },

web/src/locales/zh.json

@@ -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": "复制内容到剪贴板成功。"
   }
-}
+}

web/src/pages/Explore.tsx

@@ -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">

web/src/pages/MemoDetail.tsx

@@ -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"

web/src/services/userService.ts

@@ -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 => {

web/src/types/modules/setting.d.ts

@@ -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 {