refactor: remove channel msg

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

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": "禁用",

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<number>(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 (
         <section className="max-w-[512px] h-full relative">
             <div className="text-sm">
@@ -61,6 +80,16 @@ const AutoDeleteMessages = ({ id, type = "channel" }: Props) => {
                 />
             </div>
             {originalVal !== value && <SaveTip saveHandler={handleSave} resetHandler={handleReset} />}
+            {showClear && <>
+                <div className="text-sm mt-8">
+                    <h2 className='dark:text-white' >{t("clear_title")}</h2>
+                    <p className="text-gray-500 dark:text-gray-400">{t("clear_desc")}</p>
+                </div>
+                <div className="mt-4">
+                    <StyledButton className="danger" onClick={handleClear}>{t("clear")}</StyledButton>
+                </div>
+            </>
+            }
         </section>
     );
 };

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<Channel>();
   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 }) {
             }}
           />
         </div>}
-        {/* <StyledButton className="danger" onClick={handleClear}>Clear Message</StyledButton> */}
+
       </div>
       {changed && <SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />}
     </div>

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: <AutoDeleteMessages id={uid} type="user" />
+          component: <AutoDeleteMessages id={uid} type="dm" />
         },
       ]
     }