Fix async/rendering issues with Query form and provide a loading indi…

…cator (#25)

* switch button to mui

* Use onSubmit to prevent blocking UI

thanks andy

* delete unused imports

* Fix Join Form Submit button and phone input

* Fix join form, fix nn assign form button

* maybe it would make more sense to hardcode the routes

.env.sample

@@ -1,4 +1,4 @@
-NEXT_PUBLIC_MESHDB_URL=http://127.0.0.1:8000/api/v1/
+NEXT_PUBLIC_MESHDB_URL=http://127.0.0.1:8000
 
 # Docker compose environment variables
 # Set this to true in prod

app/api.ts

@@ -4,7 +4,7 @@ if (process.env.NEXT_PUBLIC_MESHDB_URL === undefined) {
   throw new Error('Expected API url environment variable');
 }
 
-const API_BASE = new URL(process.env.NEXT_PUBLIC_MESHDB_URL as string);
+const API_BASE = new URL(process.env.NEXT_PUBLIC_MESHDB_URL as string + "/api/v1/");
 
 export const JoinFormInput = z.object({
   first_name: z.string(),

components/JoinForm/JoinForm.module.scss

@@ -79,3 +79,8 @@
   border-radius: 4px;
   outline-offset: 4px;
 }
+
+.centered {
+  display: flex;
+  justify-content: center;
+}

components/JoinForm/JoinForm.tsx

@@ -16,9 +16,9 @@ import styles from './JoinForm.module.scss'
 
 // import { SubmitHandler, useForm } from 'react-hook-form'
 import Select from 'react-select'
-import { useState } from "react";
+import { FormEvent, useState } from "react";
 
-import Button from '@/components/Button/Button';
+import Button from "@mui/material/Button";
 
 const options = [
   { value: 'NY', label: 'New York' },
@@ -41,9 +41,10 @@ const options = [
  }
 
 const JoinForm = () => {
-  function parseForm(event: FormData) {
+  function parseForm(event: FormEvent<HTMLFormElement>) {
+    const formData = new FormData(event.currentTarget)
     const data: Record<string, string | Blob | boolean | Number > = {};
-    event.forEach((value, key) => {
+    formData.forEach((value, key) => {
       if (key === 'roof_access' || key === 'ncl') {
         // Special case for the checkbox
         // This won't work for unchecked boxes because JS good language
@@ -75,11 +76,13 @@ const JoinForm = () => {
     return JoinFormInput.parse(data);
   }
 
-  async function sendForm(event: FormData) {
+  // TODO: Redirect them to a thank you/next steps page or something after they have submitted.
+  async function sendForm(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
     console.log(event); 
 
     try {
-      setDisableSubmitButton(true);
+      setIsLoading(true);
       let parsedForm = parseForm(event);
       if (parsedForm === undefined) return;
       let j: JoinFormInput = parsedForm;
@@ -92,32 +95,34 @@ const JoinForm = () => {
     } catch (e) {
       console.log("Could not submit Join Form:");
       toastErrorMessage(e);
-      setDisableSubmitButton(false);
+      setIsLoading(false);
       return;
     }
+    setSubmitted(true);
+    setIsLoading(false);
   }
 
-  const initialState = {};
   const [phoneNumber, setPhoneNumber] = useState<E164Number | undefined>()
-
-  const router = useRouter()
-  const [disableSubmitButton, setDisableSubmitButton] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
 
   return <>
     <div className={styles.formBody}>
-      <form action={sendForm}>
+      <form onSubmit={sendForm}>
         <h2>Join NYC Mesh</h2>
         <p>Join our community network! Fill out the form, and we will reach out over email shortly.</p>
         <div>
         <h3>Personal Info</h3>
-            <input type="text" name="first_name" placeholder="First Name" required />
-            <input type="text" name="last_name" placeholder="Last Name" required />
+          <input type="text" name="first_name" placeholder="First Name" required />
+          <input type="text" name="last_name" placeholder="Last Name" required />
 
           <input type="email" name="email" placeholder="Email Address" required />
 
           <PhoneInput
             name="phone"
             placeholder="Phone Number"
+            defaultCountry="US"
+            international={true}
             value={phoneNumber}
             onChange={setPhoneNumber}/>
         </div>
@@ -140,7 +145,17 @@ const JoinForm = () => {
             <input type="checkbox" name="ncl" required/>
             I agree to the <a href="https://www.nycmesh.net/ncl.pdf" target="_blank" style={{color:"black"}}>Network Commons License</a>
           </label>
-        <Button type="submit" disabled={disableSubmitButton}>Submit</Button>
+        <div className={styles.centered}>
+          <Button
+            type="submit"
+            disabled={isLoading || submitted}
+            variant="contained"
+            size="large"
+            sx={{ width: "12rem", fontSize: "1rem", m:"1rem"}}
+          >
+            { isLoading ? "Loading..." : (submitted ? "Thanks!" : "Submit") }
+          </Button>
+        </div>
       </form>
     </div>
     <ToastContainer />

components/Landing/Landing.tsx

@@ -1,7 +1,6 @@
 "use client";
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
-// import Button from "@/components/Button/Button";
 
 import styles from "./Landing.module.scss";
 import { Box, Grid, Typography } from "@mui/material";

components/NNAssignForm/NNAssignForm.module.scss

@@ -20,19 +20,6 @@
   outline-offset: 4px;
 }
 
-.submitButton {
-  background-color: black;
-  border-radius: 4px;
-  color: white;
-  margin: 30px 0px 30px 0px;
-  padding: 10px 24px;
-  border: none;
-  cursor: pointer;
-  width: 100%;
-  font-size: 16px;
-  outline-offset: 4px;
-}
-
 .formBody button:hover {
   opacity: 0.8;
 }
@@ -97,3 +84,9 @@
 .nnLabel {
   color: #666;
 }
+
+/*FIXME: For the love of god stop duplicating this*/
+.centered {
+  display: flex;
+  justify-content: center;
+}

components/NNAssignForm/NNAssignForm.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@mui/material/Button";
 import { useFormState } from "react-dom";
 import { useFormStatus } from "react-dom";
 import { NNAssignFormInput, submitNNAssignForm } from "@/app/api";
@@ -73,7 +74,16 @@ export function NNAssignForm() {
             <input type="number" name="install_number" placeholder="Install Number" required />
             <input type="password" name="password" placeholder="Pre-Shared Key" required />
           </div>
-        <button className={styles.submitButton} type="submit" disabled={disableSubmitButton} hidden={disableSubmitButton}>Submit</button>
+        <div className={styles.centered}>
+          <Button
+            type="submit"
+            disabled={disableSubmitButton}
+            hidden={disableSubmitButton}
+            variant="contained"
+            size="large"
+            sx={{ width: "12rem", fontSize: "1rem", m:"1rem"}}
+          >Submit</Button>
+        </div>
         <h3 hidden={!disableSubmitButton} className={styles.nnLabel}>Your Network Number:</h3>
         <h1 hidden={!disableSubmitButton} id="">{networkNumber}</h1>
       </form>

components/QueryForm/QueryForm.module.scss

@@ -20,19 +20,6 @@
   outline-offset: 4px;
 }
 
-.submitButton {
-  background-color: black;
-  border-radius: 4px;
-  color: white;
-  margin: 30px 0px 30px 0px;
-  padding: 10px 24px;
-  border: none;
-  cursor: pointer;
-  width: 100%;
-  font-size: 16px;
-  outline-offset: 4px;
-}
-
 .formBody button:hover {
   opacity: 0.8;
 }
@@ -103,3 +90,7 @@
   justify-content: center;
 }
 
+.centered {
+  display: flex;
+  justify-content: center;
+}