feat: allow users to customize the refresh time for Daily Reviews (#1313)

* feat: Allow users to customize the refresh time for Daily Reviews

* feat: Allow users to customize the refresh time for Daily Reviews. Lint fix

* feat: Allow users to customize the refresh time for Daily Reviews. change daily review time offset to include only hour

* feat: Allow users to customize the refresh time for Daily Reviews. Retrigger to try CodeQL pass.

---------

Co-authored-by: Aswath S <aswath.s@thoughtworks.com>

web/src/components/DailyReviewDialog.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useMemoStore } from "../store/module";
+import { useMemoStore, useUserStore } from "../store/module";
 import toImage from "../labs/html2image";
 import useToggle from "../hooks/useToggle";
 import { DAILY_TIMESTAMP } from "../helpers/consts";
@@ -23,17 +23,23 @@ 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) =>
+    .filter((m) => {
+      const createdTimestamp = utils.getTimeStampByDate(m.createdTs);
+      const currentDateStampWithOffset = currentDateStamp + utils.convertToMillis(localSetting);
+      return (
         m.rowStatus === "NORMAL" &&
-        utils.getTimeStampByDate(m.createdTs) >= currentDateStamp &&
-        utils.getTimeStampByDate(m.createdTs) < currentDateStamp + DAILY_TIMESTAMP
-    )
+        createdTimestamp >= currentDateStampWithOffset &&
+        createdTimestamp < currentDateStampWithOffset + DAILY_TIMESTAMP
+      );
+    })
     .sort((a, b) => utils.getTimeStampByDate(a.createdTs) - utils.getTimeStampByDate(b.createdTs));
 
   const handleShareBtnClick = () => {

web/src/components/Settings/PreferencesSection.tsx

@@ -20,6 +20,8 @@ const PreferencesSection = () => {
     };
   });
 
+  const dailyReviewTimeOffsetOptions: number[] = [...Array(24).keys()];
+
   const handleLocaleSelectChange = async (locale: Locale) => {
     await userStore.upsertUserSetting("locale", locale);
     globalStore.setLocale(locale);
@@ -46,6 +48,10 @@ const PreferencesSection = () => {
     userStore.upsertLocalSetting({ ...localSetting, enableDoubleClickEditing: event.target.checked });
   };
 
+  const handleDailyReviewTimeOffsetChanged = (value: number) => {
+    userStore.upsertLocalSetting({ ...localSetting, dailyReviewTimeOffset: value });
+  };
+
   return (
     <div className="section-container preferences-section-container">
       <p className="title-text">{t("common.basic")}</p>
@@ -94,6 +100,37 @@ const PreferencesSection = () => {
           ))}
         </Select>
       </div>
+
+      <div className="form-label selector">
+        <span className="normal-text">Daily Review Time Offset</span>
+        <span className="w-auto inline-flex">
+          <Select
+            placeholder="hh"
+            className="!min-w-[4rem] w-auto text-sm"
+            value={localSetting.dailyReviewTimeOffset}
+            onChange={(_, value) => {
+              if (value !== null) {
+                handleDailyReviewTimeOffsetChanged(value);
+              }
+            }}
+            slotProps={{
+              listbox: {
+                sx: {
+                  maxHeight: "15rem",
+                  overflow: "auto",
+                },
+              },
+            }}
+          >
+            {dailyReviewTimeOffsetOptions.map((item) => (
+              <Option key={item} value={item} className="whitespace-nowrap">
+                {item.toString().padStart(2, "0")}
+              </Option>
+            ))}
+          </Select>
+        </span>
+      </div>
+
       <label className="form-label selector">
         <span className="normal-text">{t("setting.preference-section.enable-folding-memo")}</span>
         <Switch className="ml-2" checked={localSetting.enableFoldMemo} onChange={handleIsFoldingEnabledChanged} />

web/src/helpers/utils.ts

@@ -1,3 +1,8 @@
+export function convertToMillis(localSetting: LocalSetting) {
+  const hoursToMillis = localSetting.dailyReviewTimeOffset * 60 * 60 * 1000;
+  return hoursToMillis;
+}
+
 export const isNullorUndefined = (value: any) => {
   return value === null || value === undefined;
 };

web/src/store/module/user.ts

@@ -16,6 +16,7 @@ const defaultSetting: Setting = {
 const defaultLocalSetting: LocalSetting = {
   enableFoldMemo: true,
   enableDoubleClickEditing: true,
+  dailyReviewTimeOffset: 0,
 };
 
 export const convertResponseModelUser = (user: User): User => {

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

@@ -10,6 +10,7 @@ interface Setting {
 interface LocalSetting {
   enableFoldMemo: boolean;
   enableDoubleClickEditing: boolean;
+  dailyReviewTimeOffset: number;
 }
 
 interface UserLocaleSetting {