From 5fac2f9156c4e75b439a40e475303099b4aa4039 Mon Sep 17 00:00:00 2001
From: delivan <wjdgurdl272@gmail.com>
Date: Sun, 18 Dec 2022 20:24:33 +0900
Subject: [PATCH] Add loading state to register button on final check modal

---
 components/final-check-modal/index.tsx | 7 ++++++-
 components/primary-button/index.tsx    | 4 +++-
 pages/verification/index.tsx           | 3 +--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/final-check-modal/index.tsx b/components/final-check-modal/index.tsx
index d012fe4..ee31793 100644
--- a/components/final-check-modal/index.tsx
+++ b/components/final-check-modal/index.tsx
@@ -17,6 +17,7 @@ interface Props {
   isModalOpen: boolean;
   onCloseModal: () => void;
   onClickRegisterButton: () => Promise<void>;
+  isLoadingRegistration?: boolean;
 }
 
 export const FinalCheckModal: FunctionComponent<Props> = (props) => {
@@ -26,6 +27,7 @@ export const FinalCheckModal: FunctionComponent<Props> = (props) => {
     isModalOpen,
     onCloseModal,
     onClickRegisterButton,
+    isLoadingRegistration,
   } = props;
   const router = useRouter();
 
@@ -89,7 +91,10 @@ export const FinalCheckModal: FunctionComponent<Props> = (props) => {
             Use a different account
           </SecondaryButton>
           <RegisterButton>
-            <PrimaryButton onClick={onClickRegisterButton}>
+            <PrimaryButton
+              onClick={onClickRegisterButton}
+              isLoading={isLoadingRegistration}
+            >
               Register
             </PrimaryButton>
           </RegisterButton>
diff --git a/components/primary-button/index.tsx b/components/primary-button/index.tsx
index 45aa9f3..cb6dd22 100644
--- a/components/primary-button/index.tsx
+++ b/components/primary-button/index.tsx
@@ -9,10 +9,11 @@ interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export const PrimaryButton: FunctionComponent<PrimaryButtonProps> = ({
   children,
   isLoading,
+  disabled,
   ...props
 }) => {
   return (
-    <StyledPrimaryButton {...props}>
+    <StyledPrimaryButton {...props} disabled={disabled || isLoading}>
       {isLoading ? (
         <SpinnerWrapper>
           <Spinner />
@@ -61,6 +62,7 @@ const StyledPrimaryButton = styled.button`
 
   &:disabled {
     background-color: ${color.orange["300"]};
+    cursor: not-allowed;
 
     span {
       opacity: 0.5;
diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx
index 9ad1960..5ce3ac0 100644
--- a/pages/verification/index.tsx
+++ b/pages/verification/index.tsx
@@ -267,8 +267,6 @@ export default function VerificationPage() {
   const onClickRegistration = () => {
     amplitude.track("click register button");
 
-    console.log(isOwner);
-
     if (isOwner) {
       handleRegistration();
     } else {
@@ -448,6 +446,7 @@ export default function VerificationPage() {
         isModalOpen={isModalOpen}
         onCloseModal={() => setModalOpen(false)}
         onClickRegisterButton={handleRegistration}
+        isLoadingRegistration={isLoadingRegistration}
       />
     </Container>
   );