Tristan Yang
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
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";
|
|
|
|
|
|
type Props = {
|
|
id: number,
|
|
type?: "user" | "channel",
|
|
// 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 [updateSetting, { isSuccess }] = useUpdateAutoDeleteMsgMutation();
|
|
const [value, setValue] = useState<number>(setting?.expires_in ?? 0);
|
|
const { t } = useTranslation("setting", { keyPrefix: "auto_delete_msg" });
|
|
const options = [
|
|
{ title: t("off"), value: 0 },
|
|
{ title: t("30_seconds"), value: 30 },
|
|
{ title: t("10_min"), value: 10 * 60 },
|
|
{ title: t("1_hour"), value: 60 * 60 },
|
|
{ title: t("1_day"), value: 24 * 60 * 60 },
|
|
{ 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 }] };
|
|
updateSetting(dto);
|
|
};
|
|
const handleReset = () => {
|
|
setValue(setting?.expires_in ?? 0);
|
|
};
|
|
const handleChange = (val: number) => {
|
|
setValue(val);
|
|
};
|
|
useEffect(() => {
|
|
if (isSuccess) {
|
|
toast.success("Update Successfully!");
|
|
}
|
|
}, [isSuccess]);
|
|
const originalVal = setting?.expires_in ?? 0;
|
|
return (
|
|
<section className="max-w-[512px] h-full relative">
|
|
<div className="text-sm">
|
|
<h2 >{t("title")}</h2>
|
|
<p className="text-gray-500">{t("desc")}</p>
|
|
</div>
|
|
<div className="mt-4">
|
|
<StyledRadio
|
|
options={options.map(({ title }) => title)}
|
|
values={options.map(({ value }) => value)}
|
|
value={value || 0}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
{originalVal !== value && <SaveTip saveHandler={handleSave} resetHandler={handleReset} />}
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default AutoDeleteMessages; |