From b5d34996bf9212fdf108a05ad6672c4bc2ae5519 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 2 Jul 2024 11:26:51 +0200 Subject: [PATCH] Add typing to RegistrationModal Adds typesript to the registration modal. Not perfect as I could not quite figure out how to properly work with literal type unions, but should prove helpful to whoever will be fixing the registration modal in the future nonetheless. --- src/components/shared/RegistrationModal.tsx | 68 ++++++++++----------- src/configs/adopterRegistrationConfig.ts | 15 ++--- src/utils/adopterRegistrationUtils.ts | 27 ++++++-- 3 files changed, 62 insertions(+), 48 deletions(-) diff --git a/src/components/shared/RegistrationModal.tsx b/src/components/shared/RegistrationModal.tsx index 2a12ba7351..ba22d4b493 100644 --- a/src/components/shared/RegistrationModal.tsx +++ b/src/components/shared/RegistrationModal.tsx @@ -6,6 +6,7 @@ import { countries, states } from "../../configs/adopterRegistrationConfig"; import cn from "classnames"; import { AdopterRegistrationSchema } from "../../utils/validate"; import { + Registration, deleteAdopterRegistration, fetchAdopterRegistration, postRegistration, @@ -16,14 +17,33 @@ import { availableHotkeys } from "../../configs/hotkeysConfig"; /** * This component renders the adopter registration modal. This modal has various states. */ -// @ts-expect-error TS(7031): Binding element 'close' implicitly has an 'any' ty... Remove this comment to see the full error message -const RegistrationModal = ({ close }) => { +const RegistrationModal = ({ + close +}: { + close: () => void +}) => { const { t } = useTranslation(); // current state of the modal that is shown - const [state, setState] = useState("form"); + const [state, setState] = useState("form"); // initial values for Formik - const [initialValues, setInitialValues] = useState({}); + const [initialValues, setInitialValues] = useState({ + contactMe: false, + allowsStatistics: false, + allowsErrorReports: false, + organisationName: "", + departmentName: "", + country: "", + postalCode: "", + city: "", + firstName: "", + lastName: "", + street: "", + streetNo: "", + email: "", + agreedToPolicy: false, + registered: false, + }); useHotkeys( availableHotkeys.general.CLOSE_MODAL.sequence, @@ -45,8 +65,7 @@ const RegistrationModal = ({ close }) => { if (state === "delete_submit") { await resetRegistrationData(); } else { -// @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message - setState(states[state].nextState[1]); + setState(states[state].nextState[1] as keyof typeof states); } }; @@ -57,19 +76,16 @@ const RegistrationModal = ({ close }) => { setInitialValues(registrationInfo); }; -// @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type. - const handleSubmit = (values) => { + const handleSubmit = (values: Registration) => { // post request for adopter information postRegistration(values) .then(() => { // show thank you state -// @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message - return setState(states[state].nextState[0]); + return setState(states[state].nextState[0] as keyof typeof states); }) .catch(() => { // show error state -// @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message - return setState(states[state].nextState[1]); + return setState(states[state].nextState[1] as keyof typeof states); }); }; @@ -78,13 +94,11 @@ const RegistrationModal = ({ close }) => { deleteAdopterRegistration() .then(() => { // show thank you state -// @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message - return setState(states[state].nextState[0]); + return setState(states[state].nextState[0] as keyof typeof states); }) .catch(() => { // show error state -// @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message - return setState(states[state].nextState[1]); + return setState(states[state].nextState[1] as keyof typeof states); }); }; @@ -289,7 +303,6 @@ const RegistrationModal = ({ close }) => { className="form-control-placeholder" htmlFor="adopter_organisation" style={ -// @ts-expect-error TS(2339): Property 'organisationName' does not exist on type... Remove this comment to see the full error message formik.values.organisationName ? styleWithContent : {} @@ -313,7 +326,6 @@ const RegistrationModal = ({ close }) => { className="form-control-placeholder" htmlFor="adopter_department" style={ -// @ts-expect-error TS(2339): Property 'departmentName' does not exist on type '... Remove this comment to see the full error message formik.values.departmentName ? styleWithContent : {} @@ -347,7 +359,6 @@ const RegistrationModal = ({ close }) => { className="form-control-placeholder" htmlFor="adopter_country" style={ -// @ts-expect-error TS(2339): Property 'country' does not exist on type '{}'. formik.values.country ? styleWithContent : {} } > @@ -370,7 +381,6 @@ const RegistrationModal = ({ close }) => { className="form-control-placeholder" htmlFor="adopter_postalcode" style={ -// @ts-expect-error TS(2339): Property 'postalCode' does not exist on type '{}'. formik.values.postalCode ? styleWithContent : {} @@ -392,7 +402,6 @@ const RegistrationModal = ({ close }) => { className="form-control-placeholder" htmlFor="adopter_city" style={ -// @ts-expect-error TS(2339): Property 'city' does not exist on type '{}'. formik.values.city ? styleWithContent : {} } > @@ -424,7 +433,6 @@ const RegistrationModal = ({ close }) => { className="form-control-placeholder" htmlFor="adopter_firstname" style={ -// @ts-expect-error TS(2339): Property 'firstName' does not exist on type '{}'. formik.values.firstName ? styleWithContent : {} @@ -448,7 +456,6 @@ const RegistrationModal = ({ close }) => { className="form-control-placeholder" htmlFor="adopter_lastname" style={ -// @ts-expect-error TS(2339): Property 'lastName' does not exist on type '{}'. formik.values.lastName ? styleWithContent : {} } > @@ -472,7 +479,6 @@ const RegistrationModal = ({ close }) => { className="form-control-placeholder" htmlFor="adopter_street" style={ -// @ts-expect-error TS(2339): Property 'street' does not exist on type '{}'. formik.values.street ? styleWithContent : {} } > @@ -494,7 +500,6 @@ const RegistrationModal = ({ close }) => { className="form-control-placeholder" htmlFor="adopter_streetnumber" style={ -// @ts-expect-error TS(2339): Property 'streetNo' does not exist on type '{}'. formik.values.streetNo ? styleWithContent : {} } > @@ -518,7 +523,6 @@ const RegistrationModal = ({ close }) => { className="form-control-placeholder" htmlFor="adopter_emailadr" style={ -// @ts-expect-error TS(2339): Property 'email' does not exist on type '{}'. formik.values.email ? styleWithContent : {} } > @@ -600,7 +604,7 @@ const RegistrationModal = ({ close }) => { - setState(states[state].nextState[2]) + setState(states[state].nextState[2] as keyof typeof states) } > {t( @@ -622,23 +626,19 @@ const RegistrationModal = ({ close }) => { {/* navigation buttons depending on state of modal */}