diff --git a/public/locales/en/setting.json b/public/locales/en/setting.json index 96514eb6..587811a8 100644 --- a/public/locales/en/setting.json +++ b/public/locales/en/setting.json @@ -149,7 +149,10 @@ "10_min": "10 minutes", "1_hour": "1 hour", "1_day": "1 day", - "1_week": "1 week" + "1_week": "1 week", + "clear": "Clear all channel messages", + "clear_title": "Clear all messages in this channel.", + "clear_desc": "This will remove all the messages data stored on both the server and client side." }, "firebase": { "disable": "Disable", diff --git a/public/locales/zh/setting.json b/public/locales/zh/setting.json index dcff370e..f1475001 100644 --- a/public/locales/zh/setting.json +++ b/public/locales/zh/setting.json @@ -142,7 +142,10 @@ "10_min": "10 分钟", "1_hour": "1 小时", "1_day": "1 天", - "1_week": "1 周" + "1_week": "1 周", + "clear": "清除频道消息", + "clear_title": "清除频道消息", + "clear_desc": "该频道内消息将在客户端和服务端彻底删除" }, "firebase": { "disable": "禁用", diff --git a/src/common/component/AutoDeleteMessages.tsx b/src/common/component/AutoDeleteMessages.tsx index c8d5f384..a6cb133f 100644 --- a/src/common/component/AutoDeleteMessages.tsx +++ b/src/common/component/AutoDeleteMessages.tsx @@ -1,24 +1,32 @@ import { useState, useEffect } from 'react'; import { toast } from 'react-hot-toast'; - import { useTranslation } from "react-i18next"; + import { useUpdateAutoDeleteMsgMutation } from "../../app/services/user"; import { useAppSelector } from '../../app/store'; import SaveTip from "./SaveTip"; import StyledRadio from "./styled/Radio"; +import { ChatContext } from '../../types/common'; +import StyledButton from "../../common/component/styled/Button"; +import { useLazyClearChannelMessageQuery } from '../../app/services/channel'; type Props = { id: number, - type?: "user" | "channel", + type?: ChatContext, // expires_in?: number } const AutoDeleteMessages = ({ id, type = "channel" }: Props) => { - const setting = useAppSelector(store => type == "channel" ? - store.footprint.autoDeleteMsgChannels.find(item => item.gid == id) - : - store.footprint.autoDeleteMsgUsers.find(item => item.uid == id)); + const { setting, channel, loginUser } = useAppSelector(store => { + return { + setting: type == "channel" ? store.footprint.autoDeleteMsgChannels.find(item => item.gid == id) : store.footprint.autoDeleteMsgUsers.find(item => item.uid == id), + loginUser: store.authData.user, + channel: type == "channel" ? store.channels.byId[id] : null + }; + }); const [updateSetting, { isSuccess }] = useUpdateAutoDeleteMsgMutation(); + const [clearMessage, { isSuccess: clearSuccess }] = useLazyClearChannelMessageQuery(); + const [value, setValue] = useState(setting?.expires_in ?? 0); const { t } = useTranslation("setting", { keyPrefix: "auto_delete_msg" }); const { t: ct } = useTranslation(); @@ -31,7 +39,7 @@ const AutoDeleteMessages = ({ id, type = "channel" }: Props) => { { title: t("1_week"), value: 7 * 24 * 60 * 60 }, ]; const handleSave = () => { - const dto = type == "user" ? { users: [{ uid: id, expires_in: value }] } : { groups: [{ gid: id, expires_in: value }] }; + const dto = type == "dm" ? { users: [{ uid: id, expires_in: value }] } : { groups: [{ gid: id, expires_in: value }] }; updateSetting(dto); }; const handleReset = () => { @@ -45,7 +53,18 @@ const AutoDeleteMessages = ({ id, type = "channel" }: Props) => { toast.success(ct("tip.update")); } }, [isSuccess]); + useEffect(() => { + if (clearSuccess) { + toast.success("Cleared!"); + } + }, [clearSuccess]); + const handleClear = () => { + if (confirm("are you sure?")) { + clearMessage(id); + } + }; const originalVal = setting?.expires_in ?? 0; + const showClear = type == "channel" && (channel?.owner == loginUser?.uid || loginUser?.is_admin); return (
@@ -61,6 +80,16 @@ const AutoDeleteMessages = ({ id, type = "channel" }: Props) => { />
{originalVal !== value && } + {showClear && <> +
+

{t("clear_title")}

+

{t("clear_desc")}

+
+
+ {t("clear")} +
+ + }
); }; diff --git a/src/routes/settingChannel/Overview.tsx b/src/routes/settingChannel/Overview.tsx index 9a1d6f0c..cbdd4588 100644 --- a/src/routes/settingChannel/Overview.tsx +++ b/src/routes/settingChannel/Overview.tsx @@ -3,7 +3,6 @@ import toast from "react-hot-toast"; import { useChangeChannelTypeMutation, useGetChannelQuery, - // useLazyClearChannelMessageQuery, useUpdateChannelMutation, useUpdateIconMutation } from "../../app/services/channel"; @@ -17,7 +16,7 @@ import IconChannel from "../../assets/icons/channel.svg"; import { useAppSelector } from "../../app/store"; import { Channel } from "../../types/channel"; import { useTranslation } from "react-i18next"; -// import StyledButton from "../../common/component/styled/Button"; + export default function Overview({ id = 0 }) { const { t } = useTranslation("setting", { keyPrefix: "channel" }); @@ -32,7 +31,6 @@ export default function Overview({ id = 0 }) { const [changed, setChanged] = useState(false); const [values, setValues] = useState(); const [updateChannelIcon] = useUpdateIconMutation(); - // const [clearMessage, { isSuccess: clearSuccess }] = useLazyClearChannelMessageQuery(); const [updateChannel, { isSuccess: updated }] = useUpdateChannelMutation(); const [changeChannelType, { isSuccess: changeTypeSuccess }] = useChangeChannelTypeMutation(); const handleUpdate = () => { @@ -54,11 +52,7 @@ export default function Overview({ id = 0 }) { updateChannelIcon({ gid: id, image }); }; - // const handleClear = () => { - // if (confirm("are you sure?")) { - // clearMessage(id); - // } - // }; + const handleReset = () => { setValues(data); }; @@ -68,11 +62,7 @@ export default function Overview({ id = 0 }) { setValues(data); } }, [data]); - // useEffect(() => { - // if (clearSuccess) { - // toast.success("Cleared!"); - // } - // }, [clearSuccess]); + useEffect(() => { if (data && values) { @@ -145,7 +135,7 @@ export default function Overview({ id = 0 }) { }} /> } - {/* Clear Message */} + {changed && } diff --git a/src/routes/settingDM/navs.tsx b/src/routes/settingDM/navs.tsx index f5b5a494..bbd2bba7 100644 --- a/src/routes/settingDM/navs.tsx +++ b/src/routes/settingDM/navs.tsx @@ -29,7 +29,7 @@ const useNavs = (uid: number): Nav[] => { { name: "auto_delete_msg", title: t("nav.auto_delete_msg"), - component: + component: }, ] }