feat: add project submission (#49)

* feat: add project submission

* feat: finish backend feature

* feat: finish backend feature

* fix: css border bug

* fix: switch names to submission

src/components/button.jsx

@@ -3,6 +3,7 @@ export default function Button({ placeholder, loadingState, onClick }) {
     <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="button"
         onClick={onClick}
       >
         {loadingState ? (

src/components/forms/errorBox.jsx

@@ -0,0 +1,34 @@
+export default function ErrorBox({ responseErrors }) {
+  return (
+    <div className="rounded-md bg-red-50 p-4">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <svg
+            className="h-5 w-5 text-red-400"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <div className="ml-3">
+          <h3 className="text-sm font-medium text-red-800">
+            There were {responseErrors.length} error(s) with your submission
+          </h3>
+          <div className="mt-2 text-sm text-red-700">
+            <ul role="list" className="list-disc space-y-1 pl-5">
+              {responseErrors.map((error) => (
+                <li>{error}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/forms/formsTemplate.jsx

@@ -0,0 +1,17 @@
+export default function FormsTemplate({ title, description, children }) {
+  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">
+        <div className="mt-10 mb-10">
+          <h2 className="font-semibold tracking-wide text-3xl leading-7 text-white">
+            {title}
+          </h2>
+          <p className="mt-1 max-w-2xl text-xl leading-6 text-white">
+            {description}
+          </p>
+        </div>
+        <div>{children}</div>
+      </div>
+    </div>
+  );
+}

src/components/forms/textBox.jsx

@@ -1,11 +1,14 @@
-export default function TextBox({ param, title, placeholder }) {
+export default function TextBox({ param, title, placeholder, help = "" }) {
   return (
     <div>
       <label
         htmlFor={param}
         className="block mb-2 text-sm font-medium text-white dark:text-white"
       >
-        {title}
+        <div className="flex flex-col">
+          {title}
+          {help && <span className="text-xs text-gray-400">{help}</span>}
+        </div>
       </label>
       <textarea
         id={param}

src/components/forms/textInput.jsx

@@ -21,7 +21,7 @@ export default function TextInput({
         id={param}
         name={param}
         className={
-          "bg-gray-50 border border-white text-gray-900 text-sm rounded-lg focus:ring-primary focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          "bg-gray-50 border border-white text-gray-900 text-sm rounded-lg focus:ring-primary focus:border-green-500 block w-full p-2.5"
         }
         placeholder={placeholder}
         required

src/components/projectSubmission.jsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import FormsTemplate from "./forms/formsTemplate.jsx";
+import TextInput from "~/components/forms/textInput.jsx";
+import TextBox from "~/components/forms/textBox.jsx";
+import ConfirmationModal from "~/components/confirmationModal.jsx";
+import Button from "./button.jsx";
+import ErrorBox from "~/components/forms/errorBox.jsx";
+
+export default function ProjectDelivery() {
+  const [responseErrors, setResponseErrors] = useState([]);
+  const [loadingState, setLoadingState] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+
+  async function submit(e) {
+    console.log("submit");
+    e.preventDefault();
+    closeModal();
+    setLoadingState(true);
+    const formData = new FormData(e.target);
+    const response = await fetch("/api/projects/create", {
+      method: "POST",
+      body: formData,
+    });
+
+    const data = await response.json();
+    console.log(data);
+    if (!response.ok) {
+      setResponseErrors(data.message.errors);
+      setLoadingState(false);
+    } else {
+      window.location.href = "/";
+    }
+  }
+
+  function openModal() {
+    setShowModal(true);
+  }
+
+  function closeModal() {
+    setShowModal(false);
+  }
+
+  return (
+    <FormsTemplate
+      title="Project Submission"
+      description="To submit your project, please provide the following information."
+    >
+      <form onSubmit={submit} className="space-y-5">
+        <TextInput
+          type="text"
+          param="team_code"
+          title="Team code"
+          help="The code emailed to you when you registered your team."
+          placeholder="Enter your team code"
+        />
+        <TextInput
+          type="text"
+          param="name"
+          title="Project name"
+          placeholder="Insert your project name"
+        />
+        <TextInput
+          type="link"
+          param="link"
+          title="Project link"
+          placeholder="Insert your project repo link"
+        />
+        <TextBox
+          param="description"
+          title="Project description"
+          help="Please provide a detailed description of your project."
+          placeholder="Insert your project description"
+        />
+
+        {responseErrors.length > 0 && (
+          <ErrorBox responseErrors={responseErrors} />
+        )}
+
+        <Button
+          loadingState={loadingState}
+          placeholder="Submit"
+          onClick={openModal}
+        />
+        {showModal && (
+          <ConfirmationModal
+            placeHolder="Are you sure you want to submit?"
+            closeModal={closeModal}
+          />
+        )}
+      </form>
+    </FormsTemplate>
+  );
+}