import React, { Component } from 'react'
import PropTypes from 'prop-types'
import api from 'api'
import storage from 'storage'
import { LargeButton } from '@hackclub/design-system'

class SubmitButton extends Component {
  static propTypes = {
    status: PropTypes.oneOf(['incomplete', 'complete', 'submitted']).isRequired,
    applicationId: PropTypes.number.isRequired,
    callback: PropTypes.func
  }

  handleSubmit = () => {
    const { status, applicationId, callback } = this.props
    if (status !== 'complete') return null
    api
      .post(`v1/new_club_applications/${applicationId}/submit`, {
        authToken: storage.get('authToken')
      })
      .then(json => {
        callback(json)
      })
      .catch(e => {
        alert(e.statusText)
      })
  }

  render() {
    // this.updateState() // NOTE(@maxwofford): I'm trying to update the update button state when an application is reset
    const { status } = this.props
    return (
      <LargeButton
        onClick={this.handleSubmit}
        bg={status === 'submitted' ? 'success' : 'primary'}
        disabled={status !== 'complete'}
        w={1}
        mt={2}
        mb={4}
        f={3}
        children={
          status === 'submitted'
            ? 'We’ve recieved your application'
            : 'Submit your application'
        }
      />
    )
  }
}

export default SubmitButton

@@ -95,38 +95,8 @@
 pi'%0A
-import storage from 'storage'%0A
 impo
@@ -365,24 +365,59 @@
 pes.func%0A  %7D
+%0A  state = %7B%0A    loading: false%0A  %7D
 %0A%0A  handleSu
@@ -486,24 +486,141 @@
  this.props%0A
+    this.setState(%7B loading: true %7D)%0A    // NOTE(@maxwofford): Give it 3 seconds of waiting to build up anticipation%0A
     if (stat
@@ -650,16 +650,47 @@
 rn null%0A
+    const startTime = Time.now%0A
     api%0A
@@ -755,63 +755,8 @@
 mit%60
-, %7B%0A        authToken: storage.get('authToken')%0A      %7D
 )%0A  
@@ -870,145 +870,96 @@
 )%0A  
-%7D%0A%0A  render()
+    .finally(_ =%3E
  %7B%0A    
-//
+   
  this.
-updateState() // NOTE(@maxwofford): I'm trying to update the update button state when an application is reset
+setState(%7B loading: false %7D)%0A      %7D)%0A  %7D%0A%0A  render() %7B
 %0A   
@@ -985,24 +985,59 @@
  this.props%0A
+    const %7B loading %7D = this.state%0A
     return (
@@ -1104,16 +1104,36 @@
     bg=%7B
+loading ? 'black' : 
 status =
@@ -1211,16 +1211,27 @@
 omplete'
+ %7C%7C loading
 %7D%0A      

Improve accept button experience