diff --git a/src/auth/hooks/mutations/useRegister.ts b/src/auth/hooks/mutations/useRegister.ts index efad86cf..baf7a04c 100644 --- a/src/auth/hooks/mutations/useRegister.ts +++ b/src/auth/hooks/mutations/useRegister.ts @@ -1,6 +1,7 @@ import { useCallback, useState } from "react"; import { RegistrationForm } from "auth/registration/types"; import { submitRegistration } from "auth/lib"; +import { clearRegistrationValues } from "form/PersistRegistrationValues"; export function useRegister() { const [hasRegistered, setHasRegistered] = useState(false); @@ -10,7 +11,10 @@ export function useRegister() { const register = useCallback((form: RegistrationForm) => { setLoading(true); submitRegistration(form) - .then(() => setHasRegistered(true)) + .then(() => { + setHasRegistered(true); + clearRegistrationValues(); + }) .catch((e) => { setError(e.message); }) diff --git a/src/auth/registration/Register.tsx b/src/auth/registration/Register.tsx index 6dea71ee..6b7f577f 100644 --- a/src/auth/registration/Register.tsx +++ b/src/auth/registration/Register.tsx @@ -13,6 +13,7 @@ import { Box, Toolbar, Typography } from "@mui/material"; import { Background } from "components/Background/Background"; import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar"; import { PaddedCardContainer } from "components/Card/PaddedCardContainer"; +import { PersistRegistrationValues } from "form/PersistRegistrationValues"; export function Register() { const [activeStep, setActiveStep] = useState(0); @@ -66,6 +67,8 @@ export function Register() { /> } /> + + diff --git a/src/form/PersistRegistrationValues.tsx b/src/form/PersistRegistrationValues.tsx new file mode 100644 index 00000000..44816233 --- /dev/null +++ b/src/form/PersistRegistrationValues.tsx @@ -0,0 +1,29 @@ +import { useFormikContext } from "formik"; +import React, { useEffect } from "react"; +import { RegistrationForm } from "auth/registration/types"; +import _ from "lodash"; + +export const PersistRegistrationValues = () => { + const { values, setValues, dirty } = useFormikContext(); + + // read the values from localStorage on load + useEffect(() => { + const form = localStorage.getItem("registerInProgress"); + if (form) { + setValues(JSON.parse(form)); + } + }, []); + + // save the values to localStorage on update + useEffect(() => { + if (!_.isEmpty(values) && dirty) { + localStorage.setItem("registerInProgress", JSON.stringify(values)); + } + }, [values, dirty]); + + return null; +}; + +export const clearRegistrationValues = () => { + localStorage.removeItem("registerInProgress"); +};