1 files changed, 202 insertions, 0 deletions

diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/components/Form.js b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/components/Form.js
new file mode 100644
index 0000000..b184d9c
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/components/Form.js
@@ -0,0 +1,202 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { mutate } from "swr";
+
+const Form = ({ formId, petForm, forNewPet = true }) => {
+  const router = useRouter();
+  const contentType = "application/json";
+  const [errors, setErrors] = useState({});
+  const [message, setMessage] = useState("");
+
+  const [form, setForm] = useState({
+    name: petForm.name,
+    owner_name: petForm.owner_name,
+    species: petForm.species,
+    age: petForm.age,
+    poddy_trained: petForm.poddy_trained,
+    diet: petForm.diet,
+    image_url: petForm.image_url,
+    likes: petForm.likes,
+    dislikes: petForm.dislikes,
+  });
+
+  /* The PUT method edits an existing entry in the mongodb database. */
+  const putData = async (form) => {
+    const { id } = router.query;
+
+    try {
+      const res = await fetch(`/api/pets/${id}`, {
+        method: "PUT",
+        headers: {
+          Accept: contentType,
+          "Content-Type": contentType,
+        },
+        body: JSON.stringify(form),
+      });
+
+      // Throw error with status code in case Fetch API req failed
+      if (!res.ok) {
+        throw new Error(res.status);
+      }
+
+      const { data } = await res.json();
+
+      mutate(`/api/pets/${id}`, data, false); // Update the local data without a revalidation
+      router.push("/");
+    } catch (error) {
+      setMessage("Failed to update pet");
+    }
+  };
+
+  /* The POST method adds a new entry in the mongodb database. */
+  const postData = async (form) => {
+    try {
+      const res = await fetch("/api/pets", {
+        method: "POST",
+        headers: {
+          Accept: contentType,
+          "Content-Type": contentType,
+        },
+        body: JSON.stringify(form),
+      });
+
+      // Throw error with status code in case Fetch API req failed
+      if (!res.ok) {
+        throw new Error(res.status);
+      }
+
+      router.push("/");
+    } catch (error) {
+      setMessage("Failed to add pet");
+    }
+  };
+
+  const handleChange = (e) => {
+    const target = e.target;
+    const value =
+      target.name === "poddy_trained" ? target.checked : target.value;
+    const name = target.name;
+
+    setForm({
+      ...form,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const errs = formValidate();
+    if (Object.keys(errs).length === 0) {
+      forNewPet ? postData(form) : putData(form);
+    } else {
+      setErrors({ errs });
+    }
+  };
+
+  /* Makes sure pet info is filled for pet name, owner name, species, and image url*/
+  const formValidate = () => {
+    let err = {};
+    if (!form.name) err.name = "Name is required";
+    if (!form.owner_name) err.owner_name = "Owner is required";
+    if (!form.species) err.species = "Species is required";
+    if (!form.image_url) err.image_url = "Image URL is required";
+    return err;
+  };
+
+  return (
+    <>
+      <form id={formId} onSubmit={handleSubmit}>
+        <label htmlFor="name">Name</label>
+        <input
+          type="text"
+          maxLength="20"
+          name="name"
+          value={form.name}
+          onChange={handleChange}
+          required
+        />
+
+        <label htmlFor="owner_name">Owner</label>
+        <input
+          type="text"
+          maxLength="20"
+          name="owner_name"
+          value={form.owner_name}
+          onChange={handleChange}
+          required
+        />
+
+        <label htmlFor="species">Species</label>
+        <input
+          type="text"
+          maxLength="30"
+          name="species"
+          value={form.species}
+          onChange={handleChange}
+          required
+        />
+
+        <label htmlFor="age">Age</label>
+        <input
+          type="number"
+          name="age"
+          value={form.age}
+          onChange={handleChange}
+        />
+
+        <label htmlFor="poddy_trained">Potty Trained</label>
+        <input
+          type="checkbox"
+          name="poddy_trained"
+          checked={form.poddy_trained}
+          onChange={handleChange}
+        />
+
+        <label htmlFor="diet">Diet</label>
+        <textarea
+          name="diet"
+          maxLength="60"
+          value={form.diet}
+          onChange={handleChange}
+        />
+
+        <label htmlFor="image_url">Image URL</label>
+        <input
+          type="url"
+          name="image_url"
+          value={form.image_url}
+          onChange={handleChange}
+          required
+        />
+
+        <label htmlFor="likes">Likes</label>
+        <textarea
+          name="likes"
+          maxLength="60"
+          value={form.likes}
+          onChange={handleChange}
+        />
+
+        <label htmlFor="dislikes">Dislikes</label>
+        <textarea
+          name="dislikes"
+          maxLength="60"
+          value={form.dislikes}
+          onChange={handleChange}
+        />
+
+        <button type="submit" className="btn">
+          Submit
+        </button>
+      </form>
+      <p>{message}</p>
+      <div>
+        {Object.keys(errors).map((err, index) => (
+          <li key={index}>{err}</li>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default Form;