feat: persist registration form on refresh and error

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);
       })

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() {
                   />
                 }
               />
+
+              <PersistRegistrationValues />
             </Form>
           </Formik>
         </Box>

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<RegistrationForm>();
+
+  // 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");
+};