feat: enhance button dx & add confirmation modal do registration

cesium · Apr 1, 2024 · 1c98100 · 1c98100
1 parent 4414d30
commit 1c98100
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 21 deletions.
diff --git a/src/components/forms/submitButton.jsx → src/components/button.jsx b/src/components/forms/submitButton.jsx → src/components/button.jsx
@@ -1,12 +1,12 @@
-export default function Button({ placeholder, loading, onClick, type }) {
+export default function Button({ placeholder, loadingState, onClick }) {
   return (
     <div>
       <button
         className="text-white bg-primary hover:bg-primary focus:ring-4 focus:outline-none focus:ring-primary font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
-        type={type}
+        type="button"
         onClick={onClick}
       >
-        {loading ? (
+        {loadingState ? (
           <div role="status">
             <svg
               aria-hidden="true"
@@ -24,7 +24,6 @@ export default function Button({ placeholder, loading, onClick, type }) {
                 fill="currentFill"
               />
             </svg>
-            <span className="sr-only">Loading...</span>
           </div>
         ) : (
           placeholder

diff --git a/src/components/registerForm.jsx b/src/components/registerForm.jsx
@@ -4,18 +4,21 @@ import Selector from "~/components/forms/selector.jsx";
 import TextBox from "~/components/forms/textBox.jsx";
 import FileUpload from "~/components/forms/fileUpload.jsx";
 import ToggleButton from "~/components/forms/toggleButton.jsx";
-import SubmitButton from "~/components/forms/submitButton.jsx";
+import Button from "~/components/button.jsx";
+import ConfirmationModal from "~/components/confirmationModal.jsx";
 import { useState } from "react";
 
 import universities from "~/data/institutes.json";
 
 export default function Form() {
   const [responseErrors, setResponseErrors] = useState("");
   const [loadingState, setLoadingState] = useState(false);
+  const [showModal, setShowModal] = useState(false);
 
   async function submit(e) {
-    setLoadingState(true);
     e.preventDefault();
+    closeModal();
+    setLoadingState(true);
     const formData = new FormData(e.target);
     const response = await fetch("/api/register", {
       method: "POST",
@@ -31,6 +34,14 @@ export default function Form() {
     }
   }
 
+  function openModal() {
+    setShowModal(true);
+  }
+
+  function closeModal() {
+    setShowModal(false);
+  }
+
   return (
     <div className="mx-auto max-w-7xl px-4 pb-24 sm:px-6 lg:px-8">
       <div className="mx-auto max-w-3xl">
@@ -133,25 +144,34 @@ export default function Form() {
                 id="terms"
                 type="checkbox"
                 value=""
-                class="w-4 h-4 border border-gray-300 text-primary rounded bg-gray-50 focus:ring-3 focus:ring-primary"
+                className="w-4 h-4 border border-gray-300 text-primary rounded bg-gray-50 focus:ring-3 focus:ring-primary"
                 required
               />
             </div>
-            <label htmlFor="terms" class="ms-2 text-sm font-medium text-white ">
+            <label
+              htmlFor="terms"
+              className="ms-2 text-sm font-medium text-white "
+            >
               I agree with the{" "}
               <a
                 href="/docs/regulation.pdf"
-                class="text-primary hover:underline"
+                className="text-primary hover:underline"
               >
                 event regulations
               </a>
             </label>
           </div>
-          <SubmitButton
-            loading={loadingState}
-            placeholder="Send"
-            type="submit"
+          <Button
+            loadingState={loadingState}
+            placeholder="Submit"
+            onClick={openModal}
           />
+          {showModal && (
+            <ConfirmationModal
+              placeHolder="Are you sure you want to submit?"
+              closeModal={closeModal}
+            />
+          )}
         </form>
       </div>
     </div>

diff --git a/src/components/teamFormation/createTeam.jsx b/src/components/teamFormation/createTeam.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import TextInput from "~/components/forms/textInput.jsx";
 import ConfirmationModal from "~/components/confirmationModal.jsx";
-import SubmitButton from "~/components/forms/submitButton.jsx";
+import Button from "~/components/button.jsx";
 
 export default function CreateTeam() {
   const [responseErrors, setResponseErrors] = useState("");
@@ -94,11 +94,10 @@ export default function CreateTeam() {
               </div>
             </div>
           )}
-          <SubmitButton
-            loading={loadingState}
+          <Button
+            loadingState={loadingState}
             placeholder="Create"
             onClick={openModal}
-            type="button"
           />
           {showModal && (
             <ConfirmationModal

diff --git a/src/components/teamFormation/joinTeam.jsx b/src/components/teamFormation/joinTeam.jsx
@@ -1,7 +1,7 @@
 import TextInput from "~/components/forms/textInput.jsx";
 import { useState } from "react";
 import ConfirmationModal from "~/components/confirmationModal.jsx";
-import SubmitButton from "~/components/forms/submitButton.jsx";
+import Button from "~/components/button.jsx";
 
 export default function JoinTeam() {
   const [responseErrors, setResponseErrors] = useState("");
@@ -94,11 +94,10 @@ export default function JoinTeam() {
               </div>
             </div>
           )}
-          <SubmitButton
-            loading={loadingState}
+          <Button
+            loadingState={loadingState}
             placeholder="Join"
             onClick={openModal}
-            type="button"
           />
           {showModal && (
             <ConfirmationModal