disable button

pages/laporan/new/index.js

@@ -151,6 +151,8 @@ class App extends Component {
       data: {},
       token: "",
       loading: false,
+      disable: false,
+      disablekirim: false,
     };
   }
 
@@ -168,6 +170,14 @@ class App extends Component {
       this.setState({ modalNotnoHP: !this.state.modalNotnoHP });
     }
   };
+  // disableKirim = (modalNotnoHP = false) => {
+  //   if (modalNotnoHP == false) {
+  //     this.setState({ disableKirim: true })
+
+  //   } else {
+  //     this.setState({ disableKirim: false })
+  //   }
+  // }
 
   optionsJenisPelanggaran = (pelanggaran) => {
     return pelanggaran.data.map((e) => ({
@@ -249,6 +259,7 @@ class App extends Component {
     }
 
     this.setState({ loading: true });
+    this.setState({ disable: true });
     const success = await createLaporanPublic(token, formdata);
     if (!success) {
       swal.fire({
@@ -267,6 +278,8 @@ class App extends Component {
       Router.push("/laporan/new");
     }
     this.setState({ loading: false });
+    this.setState({ disable: false });
+
   };
 
   createUser = async (data) => {
@@ -284,6 +297,7 @@ class App extends Component {
 
   render() {
     const { selectedJenis, pelanggaran } = this.state;
+
     return (
       <div>
         <ToastContainer />
@@ -678,6 +692,7 @@ class App extends Component {
                 <Button
                   className="btn-login"
                   color
+                  disable={this.state.disablekirim}
                   onClick={async () => {
                     await this.createLaporan(this.state.token);
                   }}
@@ -702,13 +717,15 @@ class App extends Component {
                 <Button
                   className="color-3e3a8e  btn-login bg-danger"
                   color
-                  type="cancel"
+                  disabled={this.state.disable}
+                  onClick={() => this.setState({ modal: false, disablekirim: true })}
                 >
-                  <span className="font-color-white">cancel</span>
+                  <span className="font-color-white">Cancel</span>
                 </Button>
                 <Button
                   className="color-3e3a8e btn-login bg-success"
                   color
+                  disable={this.state.disablekirim}
                   onClick={async () => {
                     if (this.state.kode) {
                       await this.createLaporan(
@@ -761,17 +778,21 @@ class App extends Component {
               </ModalBody>
               <ModalFooter>
                 <Button
-                  className="color-3e3a8e  btn-login bg-danger"
+                  className="bg-danger"
                   color
-                  type="cancel"
+                  disabled={this.state.disable}
+                  // disabled={true}
+                  onClick={() => this.setState({ modalNotnoHP: false, disablekirim: true })}
                 >
-                  <span className="font-color-white">cancel</span>
+                  <span className="font-color-white">Cancel</span>
                 </Button>
                 <Button
                   className="btn-login bg-success"
                   color
+                  disable={this.state.disablekirim}
                   onClick={async () => {
                     await this.createLaporan(this.state.token);
+                    // this.state.disable
                   }}
                 >
                   <span className="font-color-white">
@@ -782,7 +803,7 @@ class App extends Component {
             </form>
           </Modal>
         </ContentWrapper>
-      </div>
+      </div >
     );
   }
 }