Skip to content
This repository was archived by the owner on Nov 3, 2025. It is now read-only.

Fix submission button stuck in initial state during API call #104

Draft
Copilot wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Fix submission button stuck in initial state during API call #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3b64c47
Initial plan
Copilot Nov 1, 2025
9bf76b1
Initial exploration of submission button issue
Copilot Nov 1, 2025
6fb97f5
Fix submission button stuck on processing issue
Copilot Nov 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 64 additions & 47 deletions pages/[application]/[leader]/review.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,19 @@ export default function ApplicationReview({
const [errorMessage, setErrorMessage] = useState('')
const [warning, setWarning] = useState(false)
const [acceptCOC, setAcceptCOC] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)

async function sendInvite() {
if (validateEmail(emailToInvite)) {
const loginAPICall = await fetch(
`/api/invite?email=${encodeURIComponent(emailToInvite)}&id=${params.application
`/api/invite?email=${encodeURIComponent(emailToInvite)}&id=${
params.application
}&locale=${router.locale}`
).then(r => r.json())
if (loginAPICall.success) {
setInviteMessage([
applicationsRecord.fields['Prospective Leaders'][
applicationsRecord.fields['Prospective Leaders'].length + 1
applicationsRecord.fields['Prospective Leaders'].length + 1
],
`✅ ${returnLocalizedMessage(router.locale, 'INVITED')}`
])
Expand All @@ -56,7 +58,7 @@ export default function ApplicationReview({
console.error(loginAPICall)
setInviteMessage([
applicationsRecord.fields['Prospective Leaders'][
applicationsRecord.fields['Prospective Leaders'].length + 1
applicationsRecord.fields['Prospective Leaders'].length + 1
],
`✅ ${returnLocalizedMessage(router.locale, 'INVITED')}`
])
Expand All @@ -82,18 +84,32 @@ export default function ApplicationReview({
}
}
async function submitApplication() {
const submissionAPICall = await fetch(
`/api/submit?id=${params.application}`,
{ method: 'POST' }
).then(r => r.json())
if (submissionAPICall.success) {
setSubmitButton(
`✅ ${returnLocalizedMessage(router.locale, 'SUBMITTED')}`
)
router.push(`/${params.application}/${params.leader}/status`)
} else {
console.error(submissionAPICall)
// Prevent multiple submissions
if (isSubmitting) return

setIsSubmitting(true)
setSubmitButton(`⏳ ${returnLocalizedMessage(router.locale, 'PROCESSING')}`)

try {
const submissionAPICall = await fetch(
`/api/submit?id=${params.application}`,
{ method: 'POST' }
).then(r => r.json())

if (submissionAPICall.success) {
setSubmitButton(
`✅ ${returnLocalizedMessage(router.locale, 'SUBMITTED')}`
)
router.push(`/${params.application}/${params.leader}/status`)
} else {
console.error(submissionAPICall)
setSubmitButton(`❌ ${returnLocalizedMessage(router.locale, 'ERROR')}`)
setIsSubmitting(false)
}
} catch (error) {
console.error(error)
setSubmitButton(`❌ ${returnLocalizedMessage(router.locale, 'ERROR')}`)
setIsSubmitting(false)
}
}

Expand Down Expand Up @@ -205,7 +221,7 @@ export default function ApplicationReview({
onClick={() =>
deleteLeader(
applicationsRecord.fields['Prospective Leaders'][
leaderIndex
leaderIndex
]
)
}
Expand All @@ -232,18 +248,19 @@ export default function ApplicationReview({
],
transform: 'translateY(-0.2px)',
mr: '5px',
mb: `${warning &&
mb: `${
warning &&
applicationsRecord.fields['Prospective Leaders'][
leaderIndex
leaderIndex
] === inviteMessage[0]
? '-8px'
: '0px'
}`
? '-8px'
: '0px'
}`
}}
onClick={() => (
setInviteMessage([
applicationsRecord.fields['Prospective Leaders'][
leaderIndex
leaderIndex
],
returnLocalizedMessage(router.locale, 'ARE_YOU_SURE')
]),
Expand All @@ -253,9 +270,9 @@ export default function ApplicationReview({
<Icon
glyph={
warning &&
applicationsRecord.fields['Prospective Leaders'][
applicationsRecord.fields['Prospective Leaders'][
leaderIndex
] === inviteMessage[0]
] === inviteMessage[0]
? 'menu'
: 'member-remove'
}
Expand All @@ -277,7 +294,7 @@ export default function ApplicationReview({
onClick={() =>
deleteLeader(
applicationsRecord.fields['Prospective Leaders'][
leaderIndex
leaderIndex
]
)
}
Expand Down Expand Up @@ -314,10 +331,11 @@ export default function ApplicationReview({
height: '40px',
minWidth: '150px',
fontWeight: 'bold',
cursor: `${applicationsRecord.fields['Submitted']
? 'not-allowed'
: 'pointer'
}`
cursor: `${
applicationsRecord.fields['Submitted']
? 'not-allowed'
: 'pointer'
}`
}}
onClick={() => sendInvite()}
>
Expand Down Expand Up @@ -481,39 +499,38 @@ export default function ApplicationReview({
width: '100%',
textTransform: 'uppercase',
...(applicationsRecord.fields['All Complete (incl Leaders)'] != 1 ||
acceptCOC === false ||
applicationsRecord.fields['Submitted']
acceptCOC === false ||
applicationsRecord.fields['Submitted'] ||
isSubmitting
? {
opacity: 0.3,
':hover,:focus': {
transform: 'none',
boxShadow: 'none',
cursor: 'not-allowed'
opacity: 0.3,
':hover,:focus': {
transform: 'none',
boxShadow: 'none',
cursor: 'not-allowed'
}
}
}
: {})
}}
variant="ctaLg"
onClick={() =>
applicationsRecord.fields['All Complete (incl Leaders)'] != 1 ||
acceptCOC === false ||
applicationsRecord.fields['Submitted']
acceptCOC === false ||
applicationsRecord.fields['Submitted'] ||
isSubmitting
? console.log(applicationsRecord)
: submitApplication(applicationsRecord.fields)
}
>
{submitButton}
</Button>
<Text sx={{ mt: 8 }}>
{
acceptCOC === false ?
"You must agree to the Hacker Code of Conduct to Submit Your Application" :
applicationsRecord.fields['All Complete (incl Leaders)'] !== 1 ?
"Your Hack Club application is not complete. Please ensure you have completed your personal profile, your club profile, and that all of your co-leaders have submitted their application if they were added to the club application." :
""
}
{acceptCOC === false
? 'You must agree to the Hacker Code of Conduct to Submit Your Application'
: applicationsRecord.fields['All Complete (incl Leaders)'] !== 1
? 'Your Hack Club application is not complete. Please ensure you have completed your personal profile, your club profile, and that all of your co-leaders have submitted their application if they were added to the club application.'
: ''}
</Text>

</Card>
<Box
sx={{
Expand Down Expand Up @@ -576,7 +593,7 @@ const ContactCard = ({ router }) => (
color: 'blue',
display: 'flex',
alignItems: 'center',
'> svg': { display: 'inline' }
'> svg': { display: 'inline' }
}}
>
<Icon glyph="message" />
Expand Down
Loading