Merge pull request #48 from erland-syafiq/persistant-registration-form

Persistant registration form

site/app/hooks/useLocalStorage.jsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * Hook to automatically save state to local storage.
+ * 
+ * @param {string} key - unique key for storage 
+ * @param {any | Function} initialValue - initial value can be function
+ * @returns {[any, Function]} the same values as setState
+ */
+export default function useLocalStorage(key, initialValue) {
+    const [state, setState] = useState(initialValue);
+
+    function setStoredState(newState) {
+        localStorage.setItem(key, JSON.stringify(newState));
+        setState(newState);
+    }
+
+    useEffect(() => {
+        const savedValue = localStorage.getItem(key);
+
+        if (savedValue) {
+            setState(JSON.parse(savedValue))
+        }
+        else {
+            localStorage.setItem(key, JSON.stringify(newState));
+        }
+    }, [])
+
+    return [state, setStoredState];
+}

site/app/register/RegisterForm.jsx

@@ -3,25 +3,28 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { getApplicantErrors } from '../utils/applicantUtils';
+import useLocalStorage from '../hooks/useLocalStorage';
+
+const initialFormData = {
+    advisorEmail: "",
+    advisorName: "",
+    advisorPhone: "",
+    advisorRelation: "",
+    advisorOtherInformation: "",
+    headDelegateEmail: "",
+    headDelegateName: "",
+    headDelegatePhone: "",
+    schoolName: "",
+    delegationSize: 0,
+    schoolMailingAddress: "",
+    delegateList: "",
+    isAgreeWithTerms: false,
+    commentsOrQuestions: ""
+};
 
 export default function RegisterForm() {
 
-    const [formData, setFormData] = useState({
-        advisorEmail: "",
-        advisorName: "",
-        advisorPhone: "",
-        advisorRelation: "",
-        advisorOtherInformation: "",
-        headDelegateEmail: "",
-        headDelegateName: "",
-        headDelegatePhone: "",
-        schoolName: "",
-        delegationSize: 0,
-        schoolMailingAddress: "",
-        delegateList: "",
-        isAgreeWithTerms: false,
-        commentsOrQuestions: ""
-    });
+    const [formData, setFormData] = useLocalStorage("registerForm", initialFormData);
 
     const [errors, setErrors] = useState({});
 
@@ -88,6 +91,7 @@ export default function RegisterForm() {
             });
 
             if (response.status === 200) {
+                setFormData(initialFormData);
                 router.push("/register/success");
             } else {
                 console.error(response);

site/app/register/page.jsx

@@ -10,7 +10,7 @@ export const metadata = {
 export default function RegisterPage() {
     return (
         <main className="registerPage">
-            <div className="container mt-3">
+            <div className="container pt-3">
                 <div className="row">
                     <div className="col-md-12">
                         <h1>Registration</h1>