Refactor ApplyBusiness component to set success state and update loader component

This commit is contained in:
Pattadon 2024-10-22 13:00:57 +07:00
parent 7764e4ea0b
commit 94368983d6
2 changed files with 16 additions and 11 deletions

View File

@ -24,6 +24,7 @@ export default function ApplyBusiness() {
await sendApplication(transformedData); await sendApplication(transformedData);
}; };
const sendApplication = async (recvData: any) => { const sendApplication = async (recvData: any) => {
setSucess(false);
const { const {
data: { user }, data: { user },
} = await supabase.auth.getUser(); } = await supabase.auth.getUser();
@ -66,6 +67,7 @@ export default function ApplyBusiness() {
}, },
]) ])
.select(); .select();
setSucess(true);
// console.table(data); // console.table(data);
Swal.fire({ Swal.fire({
icon: error == null ? "success" : "error", icon: error == null ? "success" : "error",
@ -141,6 +143,7 @@ export default function ApplyBusiness() {
} }
}); });
} }
setSucess(false);
} else { } else {
console.error("User ID is undefined."); console.error("User ID is undefined.");
} }

View File

@ -10,14 +10,14 @@ const loadingOption = {
preserveAspectRatio: "xMidYMid slice", preserveAspectRatio: "xMidYMid slice",
}, },
}; };
const successOption = { // const successOption = {
loop: false, // loop: false,
autoplay: true, // autoplay: true,
animationData: successData, // animationData: successData,
rendererSettings: { // rendererSettings: {
preserveAspectRatio: "xMidYMid slice", // preserveAspectRatio: "xMidYMid slice",
}, // },
}; // };
interface LoaderProps { interface LoaderProps {
isSuccess: boolean; isSuccess: boolean;
@ -25,15 +25,17 @@ interface LoaderProps {
export function Loader(props: LoaderProps) { export function Loader(props: LoaderProps) {
return ( return (
<div className="fixed inset-0 flex items-center justify-center bg-white bg-opacity-10 backdrop-blur-sm z-50"> <>
{!props.isSuccess && ( {!props.isSuccess && (
<Lottie options={loadingOption} height={200} width={200} /> <div className="fixed inset-0 flex items-center justify-center bg-white bg-opacity-10 backdrop-blur-sm z-50">
<Lottie options={loadingOption} height={200} width={200} />
</div>
)} )}
{/* {!props.isSuccess ? ( {/* {!props.isSuccess ? (
<Lottie options={loadingOption} height={200} width={200} /> <Lottie options={loadingOption} height={200} width={200} />
) : ( ) : (
<Lottie options={successOption} height={200} width={200} /> <Lottie options={successOption} height={200} width={200} />
)} */} )} */}
</div> </>
); );
} }