feat: auto delete msg

src/routes/settingDM/DeleteConfirmModal.tsx

@@ -0,0 +1,54 @@
+import { useEffect, FC } from "react";
+import toast from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
+import Modal from "../../common/component/Modal";
+import { useLazyDeleteUserQuery } from "../../app/services/user";
+import StyledModal from "../../common/component/styled/Modal";
+import Button from "../../common/component/styled/Button";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+  id: number;
+  closeModal: (cid?: number) => void;
+}
+
+const DeleteConfirmModal: FC<Props> = ({ id, closeModal }) => {
+  const { t } = useTranslation("setting");
+  const { t: ct } = useTranslation();
+  const navigateTo = useNavigate();
+  const [deleteUser, { isLoading, isSuccess }] = useLazyDeleteUserQuery();
+  const handleDelete = () => {
+    deleteUser(id);
+  };
+
+  useEffect(() => {
+    if (isSuccess) {
+      toast.success("delete user successfully!");
+      closeModal();
+      navigateTo("/chat");
+    }
+  }, [isSuccess]);
+
+  if (!id) return null;
+  return (
+    <Modal id="modal-modal">
+      <StyledModal
+        className="compact"
+        title={t("dm.delete")}
+        description={t("dm.delete_desc")}
+        buttons={
+          <>
+            <Button onClick={closeModal.bind(null, undefined)} className="cancel">
+              {ct("action.cancel")}
+            </Button>
+            <Button onClick={handleDelete} className="danger">
+              {isLoading ? "Deleting" : ct("action.remove")}
+            </Button>
+          </>
+        }
+      ></StyledModal>
+    </Modal>
+  );
+};
+
+export default DeleteConfirmModal;

src/routes/settingDM/Overview.tsx

@@ -0,0 +1,10 @@
+// import { useState, useEffect, ChangeEvent } from "react";
+import Profile from "../../common/component/Profile";
+export default function Overview({ id = 0 }) {
+
+  return (
+    <section className="w-full h-full flex justify-center items-start">
+      <Profile uid={id} />
+    </section>
+  );
+}

src/routes/settingDM/index.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { useParams, useNavigate, useSearchParams } from "react-router-dom";
+import StyledSettingContainer from "../../common/component/StyledSettingContainer";
+import DeleteConfirmModal from "./DeleteConfirmModal";
+import useNavs from "./navs";
+import { useAppSelector } from "../../app/store";
+import { useTranslation } from "react-i18next";
+
+let from: string = "";
+
+export default function DMSetting() {
+  const { t } = useTranslation("setting");
+  const { uid = 0 } = useParams();
+  const { loginUser, user } = useAppSelector((store) => {
+    return {
+      loginUser: store.authData.user,
+      user: uid ? store.users.byId[+uid] : undefined
+    };
+  });
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const navs = useNavs(+uid);
+  const flattenNavs = navs
+    .map(({ items }) => {
+      return items;
+    })
+    .flat();
+  const navKey = searchParams.get("nav");
+  from = from ? from : searchParams.get("f") || "/";
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
+  const close = () => {
+    navigate(from);
+    from = "";
+  };
+  const toggleDeleteConfirm = () => {
+    setDeleteConfirm((prev) => !prev);
+  };
+  if (!uid) return null;
+  const currNav = flattenNavs.find((n) => n.name == navKey) || flattenNavs[0];
+  const canDelete = loginUser?.is_admin;
+
+  return (
+    <>
+      <StyledSettingContainer
+        nav={currNav}
+        closeModal={close}
+        title="DM Setting"
+        navs={navs}
+        dangers={[
+          canDelete && {
+            title: t("action.remove"),
+            handler: toggleDeleteConfirm
+          }
+        ]}
+      >
+        {currNav.component}
+      </StyledSettingContainer>
+      {deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfirm} id={+uid} />}
+    </>
+  );
+}

src/routes/settingDM/navs.tsx

@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import Overview from "./Overview";
+import AutoDeleteMessages from '../../common/component/AutoDeleteMessages';
+
+export interface NavItem {
+  name: string;
+  title: string;
+  component: ReactNode;
+}
+
+export interface Nav {
+  name?: string;
+  title: string;
+  items: NavItem[];
+}
+
+const useNavs = (uid: number): Nav[] => {
+  const { t } = useTranslation("setting");
+  return [
+    {
+      title: t("nav.general"),
+      items: [
+        {
+          name: "overview",
+          title: t("nav.overview"),
+          component: <Overview id={uid} />
+        },
+        {
+          name: "auto_delete_msg",
+          title: t("nav.auto_delete_msg"),
+          component: <AutoDeleteMessages id={uid} type="user" />
+        },
+      ]
+    }
+  ];
+};
+
+export default useNavs;