ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: contact verification switch

Browse Source
This commit is contained in:
Tristan Yang
2023-05-15 15:39:26 +08:00
parent 110b0891ad
commit d00359d742
8 changed files with 85 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/Layout/AddContactTip.tsx
+17 -26
View File
@@ -1,12 +1,9 @@
import { useTranslation } from 'react-i18next';
// import React from 'react';
import IconAdd from '../../../assets/icons/add.person.svg';
import IconBlock from '../../../assets/icons/block.svg';
import { useAppSelector } from '../../../app/store';
import { useUpdateContactStatusMutation } from '../../../app/services/user';
import { ContactAction } from '../../../types/user';
import ServerVersionChecker from '../../../common/component/ServerVersionChecker';
// import toast from 'react-hot-toast';
type Props = {
uid: number
@@ -15,36 +12,30 @@ type Props = {
const AddContactTip = (props: Props) => {
const { t } = useTranslation("chat");
const [updateContactStatus] = useUpdateContactStatusMutation();
const targetUser = useAppSelector(store => store.users.byId[props.uid]);
const { targetUser, enableContact } = useAppSelector(store => {
return { targetUser: store.users.byId[props.uid], enableContact: store.server.contact_verification_enable };
});
const handleContactStatus = (action: ContactAction) => {
updateContactStatus({ target_uid: props.uid, action });
};
// useEffect(() => {
// if(isSuccess){
// toast.success(t("tip"))
// }
// }, [isSuccess])
const itemClass = `cursor-pointer flex flex-col items-center gap-1 rounded-lg w-32 text-primary-400 bg-gray-50 dark:bg-gray-800 text-sm pt-3.5 pb-3`;
if (!targetUser) return null;
if (!targetUser || !enableContact) return null;
if (targetUser.status == "added") return null;
const blocked = targetUser.status == "blocked";
return (
<ServerVersionChecker version='0.3.7' empty={true}>
<div className="py-4 px-10 flex flex-col items-center gap-3 bg-slate-100 dark:bg-slate-600">
<h3 className='text-gray-700 dark:text-gray-300 text-sm font-semibold'>{blocked ? t("contact_block_tip") : t("contact_tip")}</h3>
<ul className='flex gap-4'>
{!blocked && <li className={itemClass} onClick={handleContactStatus.bind(null, "add")}>
<IconAdd className="fill-primary-400" />
<span>{t("add_contact")}</span>
</li>}
<li className={itemClass} onClick={blocked ? handleContactStatus.bind(null, "unblock") : handleContactStatus.bind(null, "block")}>
<IconBlock className="stroke-primary-400" />
<span>{blocked ? t("unblock") : t("block")}</span>
</li>
</ul>
</div>
</ServerVersionChecker>
<div className="py-4 px-10 flex flex-col items-center gap-3 bg-slate-100 dark:bg-slate-600">
<h3 className='text-gray-700 dark:text-gray-300 text-sm font-semibold'>{blocked ? t("contact_block_tip") : t("contact_tip")}</h3>
<ul className='flex gap-4'>
{!blocked && <li className={itemClass} onClick={handleContactStatus.bind(null, "add")}>
<IconAdd className="fill-primary-400" />
<span>{t("add_contact")}</span>
</li>}
<li className={itemClass} onClick={blocked ? handleContactStatus.bind(null, "unblock") : handleContactStatus.bind(null, "block")}>
<IconBlock className="stroke-primary-400" />
<span>{blocked ? t("unblock") : t("block")}</span>
</li>
</ul>
</div>
);
};