diff --git a/src/components/Button.module.css b/src/components/Button.module.css index a4bdfa73e..e6a09b7a5 100644 --- a/src/components/Button.module.css +++ b/src/components/Button.module.css @@ -137,11 +137,16 @@ button.rainbow.cyan { transition: background-position 1s ease-out; } -.rainbow.red:hover, -.rainbow.orange:hover, -.rainbow.purple:hover, -.rainbow.pink:hover, -.rainbow.cyan:hover { +.rainbow.red:hover:not([disabled]), +.rainbow.orange:hover:not([disabled]), +.rainbow.purple:hover:not([disabled]), +.rainbow.pink:hover:not([disabled]), +.rainbow.cyan:hover:not([disabled]) { background-position: left bottom; transition: background-position 4s ease-out; } + +button[disabled] { + opacity: 0.5; + cursor: not-allowed; +} diff --git a/src/components/PassengerShowcaseForm.js b/src/components/PassengerShowcaseForm.js index 902a62120..3473e621d 100644 --- a/src/components/PassengerShowcaseForm.js +++ b/src/components/PassengerShowcaseForm.js @@ -132,7 +132,7 @@ const PassengerShowcaseForm = () => { video: location.state?.video ?? '' }); const [error, setError] = useState(null); - const [submitted, setSubmitted] = useState(false); + const [submitted, setSubmitted] = useState('not-submitted'); // not-submitted, waiting, submitted const data = useVideosWithShowcase(); @@ -158,12 +158,14 @@ const PassengerShowcaseForm = () => { const onSubmit = async (e) => { e.preventDefault(); + setSubmitted('waiting'); // Check that everything has been filled out try { await schema.validate(state, { strict: true }); } catch (e) { setError(e.toString().replace('ValidationError: ', '')); + setSubmitted('not-submitted'); return; } @@ -176,6 +178,7 @@ const PassengerShowcaseForm = () => { setError( 'The uploaded image is larger than 500kb. Please upload a JPG or PNG that is maximum 800 pixels wide and 500kb in size.' ); + setSubmitted('not-submitted'); return; } @@ -199,22 +202,25 @@ const PassengerShowcaseForm = () => { }); const json = await response.json(); if (response.ok) { - setSubmitted(true); + setSubmitted('submitted'); setState(defaultState); } else { setError( json.error || 'Oh no! The train broke down. Please contact help@thecodingtrain.com to report the malfunction!' ); + setSubmitted('not-submitted'); } } catch (e) { setError( 'Oh no! The train broke down. Please contact help@thecodingtrain.com to report the malfunction!' ); + setSubmitted('not-submitted'); } }; reader.onerror = function (error) { setError('Something went wrong parsing your image.'); + setSubmitted('not-submitted'); }; }; @@ -419,7 +425,7 @@ const PassengerShowcaseForm = () => { {error &&
{error}
} - {submitted && ( + {submitted === 'submitted' && (
Thank you for submitting to the Passenger Showcase! Please refresh the page in order to upload another submission. @@ -429,7 +435,7 @@ const PassengerShowcaseForm = () => { className={css.submitBtn} onClick={onSubmit} variant="purple" - disabled={submitted} + disabled={submitted !== 'not-submitted'} rainbow> Submit diff --git a/src/components/PassengerShowcaseForm.module.css b/src/components/PassengerShowcaseForm.module.css index a5ddeff3c..8ce330e6b 100644 --- a/src/components/PassengerShowcaseForm.module.css +++ b/src/components/PassengerShowcaseForm.module.css @@ -64,6 +64,6 @@ } } -.submitBtn:hover { +.submitBtn:hover:not([disabled]) { cursor: pointer; }