Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add typing to RegistrationModal #781

Merged
merged 1 commit into from
Jul 5, 2024
Merged

Add typing to RegistrationModal #781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
68 changes: 32 additions & 36 deletions src/components/shared/RegistrationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { countries, states } from "../../configs/adopterRegistrationConfig";
import cn from "classnames";
import { AdopterRegistrationSchema } from "../../utils/validate";
import {
Registration,
deleteAdopterRegistration,
fetchAdopterRegistration,
postRegistration,
Expand All @@ -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<keyof typeof states>("form");
// initial values for Formik
const [initialValues, setInitialValues] = useState({});
const [initialValues, setInitialValues] = useState<Registration & { agreedToPolicy: boolean, registered: boolean }>({
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,
Expand All @@ -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);
}
};

Expand All @@ -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);
});
};

Expand All @@ -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);
});
};

Expand Down Expand Up @@ -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
: {}
Expand All @@ -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
: {}
Expand Down Expand Up @@ -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 : {}
}
>
Expand All @@ -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
: {}
Expand All @@ -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 : {}
}
>
Expand Down Expand Up @@ -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
: {}
Expand All @@ -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 : {}
}
>
Expand All @@ -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 : {}
}
>
Expand All @@ -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 : {}
}
>
Expand All @@ -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 : {}
}
>
Expand Down Expand Up @@ -600,7 +604,7 @@ const RegistrationModal = ({ close }) => {
<span
className="link"
onClick={() =>
setState(states[state].nextState[2])
setState(states[state].nextState[2] as keyof typeof states)
}
>
{t(
Expand All @@ -622,23 +626,19 @@ const RegistrationModal = ({ close }) => {

{/* navigation buttons depending on state of modal */}
<footer>
{/* @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message */}
{states[state].buttons.submit && (
<div className="pull-right">
{/* submit of form content */}
{state === "form" ? (
<button
disabled={
// @ts-expect-error TS(2339): Property 'agreedToPolicy' does not exist on type '... Remove this comment to see the full error message
!(formik.isValid && formik.values.agreedToPolicy)
}
onClick={() => formik.handleSubmit()}
className={cn("submit", {
active:
// @ts-expect-error TS(2339): Property 'agreedToPolicy' does not exist on type '... Remove this comment to see the full error message
formik.isValid && formik.values.agreedToPolicy,
inactive: !(
// @ts-expect-error TS(2339): Property 'agreedToPolicy' does not exist on type '... Remove this comment to see the full error message
formik.isValid && formik.values.agreedToPolicy
),
})}
Expand All @@ -651,7 +651,6 @@ const RegistrationModal = ({ close }) => {
className="continue-registration"
onClick={() => onClickContinue()}
>
{/* @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message */}
{t(states[state].buttons.submitButtonText)}
</button>
)}
Expand All @@ -660,7 +659,6 @@ const RegistrationModal = ({ close }) => {

{/* back, delete or cancel button depending on state */}
<div className="pull-left">
{/* @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message */}
{state !== "form" && states[state].buttons.back && (
<button
className="cancel"
Expand All @@ -670,16 +668,14 @@ const RegistrationModal = ({ close }) => {
{t("ADOPTER_REGISTRATION.MODAL.BACK")}
</button>
)}
{/* @ts-expect-error TS(2339): Property 'registered' does not exist on type '{}'. */}
{state === "form" && formik.values.registered && (
<button
className="danger"
onClick={() => setState(states[state].nextState[4])}
onClick={() => setState(states[state].nextState[4] as keyof typeof states)}
>
{t("WIZARD.DELETE")}
</button>
)}
{/* @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message */}
{states[state].buttons.skip && (
<button
className="cancel"
Expand Down
15 changes: 8 additions & 7 deletions src/configs/adopterRegistrationConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const states = {
back: false,
skip: false,
close: false,
submitButtonText: null,
submitButtonText: "",
},
},
update: {
Expand All @@ -55,7 +55,7 @@ export const states = {
back: false,
skip: false,
close: false,
submitButtonText: null,
submitButtonText: "",
},
},
delete_submit: {
Expand All @@ -82,7 +82,7 @@ export const states = {
back: false,
skip: false,
close: false,
submitButtonText: null,
submitButtonText: "",
},
},
thank_you: {
Expand All @@ -95,19 +95,20 @@ export const states = {
back: false,
skip: false,
close: true,
submitButtonText: null,
submitButtonText: "",
},
},
error: {
nextState: {
0: "close",
1: "error",
},
buttons: {
submit: false,
back: false,
skip: false,
close: true,
submitButtonText: null,
submitButtonText: "",
},
},
skip: {
Expand All @@ -120,7 +121,7 @@ export const states = {
back: false,
skip: false,
close: true,
submitButtonText: null,
submitButtonText: "",
},
},
legal_info: {
Expand All @@ -134,7 +135,7 @@ export const states = {
back: true,
skip: false,
close: true,
submitButtonText: null,
submitButtonText: "",
},
},
};
Expand Down
27 changes: 22 additions & 5 deletions src/utils/adopterRegistrationUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,31 @@ export const fetchAdopterRegistration = async () => {
return await response.data;
};

export type Registration = {
contactMe: boolean,
allowsStatistics: boolean,
allowsErrorReports: boolean,
organisationName: string,
departmentName: string,
country: string,
postalCode: string,
city: string,
firstName: string,
lastName: string,
street: string,
streetNo: string,
email: string,
}

// post request for adopter information
// @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type.
export const postRegistration = async (values) => {
export const postRegistration = async (
values: Registration
) => {
// build body
let body = new URLSearchParams();
body.append("contactMe", values.contactMe);
body.append("allowsStatistics", values.allowsStatistics);
body.append("allowsErrorReports", values.allowsErrorReports);
body.append("contactMe", values.contactMe.toString());
body.append("allowsStatistics", values.allowsStatistics.toString());
body.append("allowsErrorReports", values.allowsErrorReports.toString());
body.append("organisationName", values.organisationName);
body.append("departmentName", values.departmentName);
body.append("country", values.country);
Expand Down
Loading