Add support to set telegram user id from UI

usememos · May 26, 2023 · 0d4a671 · 0d4a671
1 parent 02d5420
commit 0d4a671
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 1 deletion.
diff --git a/web/src/components/Settings/PreferencesSection.tsx b/web/src/components/Settings/PreferencesSection.tsx
@@ -1,4 +1,6 @@
-import { Switch, Option, Select } from "@mui/joy";
+import { Input, Button, Divider, Switch, Option, Select } from "@mui/joy";
+import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useGlobalStore, useUserStore } from "@/store/module";
@@ -13,13 +15,17 @@ const PreferencesSection = () => {
   const userStore = useUserStore();
   const { appearance, locale } = globalStore.state;
   const { setting, localSetting } = userStore.state.user as User;
+  const [telegramUserId, setTelegramUserId] = useState<string>("");
   const visibilitySelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
     return {
       value: item.value,
       text: t(`memo.visibility.${item.text.toLowerCase()}`),
     };
   });
 
+  useEffect(() => {
+    setTelegramUserId(setting.telegramUserId);
+  }, [setting]);
   const dailyReviewTimeOffsetOptions: number[] = [...Array(24).keys()];
 
   const handleLocaleSelectChange = async (locale: Locale) => {
@@ -49,6 +55,21 @@ const PreferencesSection = () => {
     userStore.upsertLocalSetting({ ...localSetting, enableAutoCollapse: event.target.checked });
   };
 
+  const handleSaveTelegramUserId = async () => {
+    try {
+      await userStore.upsertUserSetting("telegram-user-id", parseInt(telegramUserId));
+      toast.success(t("common.dialog.success"));
+    } catch (error) {
+      console.error(error);
+      toast.error(error.response.data.message);
+      return;
+    }
+  };
+
+  const handleTelegramUserIdChanged = async (value: string) => {
+    setTelegramUserId(value);
+  };
+
   return (
     <div className="section-container preferences-section-container">
       <p className="title-text">{t("common.basic")}</p>
@@ -118,6 +139,25 @@ const PreferencesSection = () => {
         <span className="normal-text">{t("setting.preference-section.auto-collapse")}</span>
         <Switch className="ml-2" checked={localSetting.enableAutoCollapse} onChange={handleAutoCollapseChanged} />
       </label>
+
+      <Divider className="!mt-3 !my-4" />
+
+      <div className="form-label">
+        <div className="flex flex-row items-center">
+          <span className="text-sm mr-1">{t("setting.preference-section.telegram-user-id")}</span>
+        </div>
+        <Button onClick={handleSaveTelegramUserId}>{t("common.save")}</Button>
+      </div>
+      <Input
+        className="w-full"
+        sx={{
+          fontFamily: "monospace",
+          fontSize: "14px",
+        }}
+        value={telegramUserId}
+        onChange={(event) => handleTelegramUserIdChanged(event.target.value)}
+        placeholder={t("setting.preference-section.telegram-user-id-placeholder")}
+      />
     </div>
   );
 };

diff --git a/web/src/locales/en.json b/web/src/locales/en.json
@@ -192,6 +192,8 @@
       "editor-font-style": "Editor font style",
       "mobile-editor-style": "Mobile editor style",
       "default-memo-sort-option": "Memo display time",
+      "telegram-user-id": "Telegram UserID",
+      "telegram-user-id-placeholder": "Send any words to Your Telegram Robot to get",
       "created_ts": "Created Time",
       "updated_ts": "Updated Time",
       "daily-review-time-offset": "Daily Review Time Offset",

diff --git a/web/src/locales/zh-Hans.json b/web/src/locales/zh-Hans.json
@@ -328,6 +328,8 @@
       "enable-double-click": "开启双击编辑",
       "enable-folding-memo": "开启折叠备忘录",
       "mobile-editor-style": "移动端编辑器样式",
+      "telegram-user-id": "Telegram UserID",
+      "telegram-user-id-placeholder": "向Telegram机器人发送任意消息以获取",
       "theme": "主题",
       "updated_ts": "更新时间"
     },

diff --git a/web/src/store/module/user.ts b/web/src/store/module/user.ts
@@ -11,6 +11,7 @@ const defaultSetting: Setting = {
   locale: "en",
   appearance: getSystemColorScheme(),
   memoVisibility: "PRIVATE",
+  telegramUserId: "",
 };
 
 const defaultLocalSetting: LocalSetting = {