Refactor: Update ConfigItem component styles and dependencies

This commit is contained in:
ALi Josheghani
2024-09-14 22:02:56 +03:30
parent ee88723057
commit 2cac814664

View File

@@ -39,7 +39,7 @@ const ConfigItem = ({
setConfigId(id); setConfigId(id);
setIsOpenDropDown(!isOpenDropDown); setIsOpenDropDown(!isOpenDropDown);
}; };
const [_, setCopyText] = useState<string>(""); const [, setCopyText] = useState<string>("");
const copyToClipboard = async (textToCopy: string) => { const copyToClipboard = async (textToCopy: string) => {
try { try {
await navigator.clipboard.writeText(textToCopy); await navigator.clipboard.writeText(textToCopy);
@@ -62,7 +62,7 @@ const ConfigItem = ({
setUsername(""); setUsername("");
setPassword(""); setPassword("");
} }
}, [textCopy]); }, [textCopy , type]);
const queryUpdateConfig = useQuery({ const queryUpdateConfig = useQuery({
queryKey: ["updateConfig", isOpenDropDown || isOpen], queryKey: ["updateConfig", isOpenDropDown || isOpen],
@@ -82,7 +82,7 @@ const ConfigItem = ({
maxTraffic: queryUpdateConfig?.data?.data?.result?.max_traffic, maxTraffic: queryUpdateConfig?.data?.data?.result?.max_traffic,
traffic: queryUpdateConfig?.data?.data?.result?.traffic, traffic: queryUpdateConfig?.data?.data?.result?.traffic,
}); });
}, [queryUpdateConfig?.data, queryUpdateConfig.error]); }, [queryUpdateConfig?.data, queryUpdateConfig.error , queryUpdateConfig.isFetching , queryUpdateConfig.isLoading]);
return ( return (
<> <>
<ModalConfigDetails <ModalConfigDetails
@@ -121,12 +121,12 @@ const ConfigItem = ({
</div> </div>
)} )}
<div <div
className={`w-full h-full p-3 rounded-md text-xs md:text-base gap-2 flex justify-between items-center text-secondTheme bg-gray-900 shadow-md shadow-gray-900 ${ className={`w-full h-full p-3 rounded-md text-xs md:text-base gap-2 flex justify-between items-center flex-wrap text-secondTheme bg-gray-900 shadow-md shadow-gray-900 ${
isDisabled ? "filter blur-sm" : "" isDisabled ? "filter blur-sm" : ""
}`} }`}
> >
<p className="max-md:hidden">تاریخ خرید : {dateBuy}</p> <p className="max-md:hidden">تاریخ خرید : {dateBuy}</p>
<li className="px-2 py-1 bg-secondTheme shadow-md rounded-md w-auto h-auto text-gray-900 font-bold list-none"> <li className="px-2 py-1 max-[400px]:w-full max-[400px]:text-center bg-secondTheme shadow-md rounded-md w-auto h-auto text-gray-900 font-bold list-none">
{configName} {configName}
</li> </li>
<div className="max-md:hidden flex flex-row-reverse gap-2 justify-end items-center"> <div className="max-md:hidden flex flex-row-reverse gap-2 justify-end items-center">
@@ -207,9 +207,9 @@ const ConfigItem = ({
</Dropdown> </Dropdown>
)} )}
</div> </div>
<div className="md:hidden flex flex-row-reverse gap-2 justify-end items-center"> <div className="max-[400px]:w-full md:hidden flex flex-row-reverse gap-2 justify-end items-center">
<Button <Button
extra="!m-0 !px-2 !py-1 shadow-md" extra="!m-0 !px-2 max-[400px]:w-full !py-1 shadow-md"
onClick={() => { onClick={() => {
setConfigId(id); setConfigId(id);
setIsOpen(true); setIsOpen(true);