feat: submission of projects (#71)

* feat: improved submission projects

* feat: improved information modals

* feat: added select theme on project submission

* feat: update database to the new parameter theme

Author: FilipeR13

src/components/forms/selector.jsx

@@ -16,7 +16,7 @@ export default function Selector({ param, title, options }) {
           --Please choose an option--
         </option>
         {options.map((option) => (
-          <option key={option}>{option}</option>
+          <option key={option.key} value={option.key}>{option.value}</option>
         ))}
       </select>
     </div>

src/components/header.astro

@@ -44,6 +44,14 @@ const headerClass = sticky
               Register
             </a>
           </li>
+          <li>
+            <a
+              href="/projects"
+              class="rounded-full px-2.5 py-1 text-xs font-semibold text-white shadow-sm ring-1 ring-inset ring-white hover:ring-secondary"
+            >
+              Upload Project
+            </a>
+          </li>
         </ul>
       </nav>
       <button

src/components/projectSubmission.jsx

@@ -2,14 +2,18 @@ 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 Selector from "~/components/forms/selector.jsx";
 import ConfirmationModal from "~/components/confirmationModal.jsx";
+import InformationModal from "~/components/informationModal.jsx";
 import Button from "./button.jsx";
 import ErrorBox from "~/components/forms/errorBox.jsx";
+import themes from "~/data/themes.json";
 
 export default function ProjectDelivery() {
   const [responseErrors, setResponseErrors] = useState([]);
   const [loadingState, setLoadingState] = useState(false);
   const [showModal, setShowModal] = useState(false);
+  const [showInfoModal, setShowInfoModal] = useState(false);
 
   async function submit(e) {
     console.log("submit");
@@ -28,7 +32,8 @@ export default function ProjectDelivery() {
       setResponseErrors(data.message.errors);
       setLoadingState(false);
     } else {
-      window.location.href = "/";
+      setShowInfoModal(true);
+      setLoadingState(false);
     }
   }
 
@@ -40,6 +45,15 @@ export default function ProjectDelivery() {
     setShowModal(false);
   }
 
+  function goBack() {
+    closeInfoModal();
+    window.location.href = "/";
+  }
+
+  function closeInfoModal() {
+    setShowInfoModal(false);
+  }
+
   return (
     <FormsTemplate
       title="Project Submission"
@@ -65,6 +79,16 @@ export default function ProjectDelivery() {
           title="Project link"
           placeholder="Insert your project repo link"
         />
+
+        <Selector
+          param="theme"
+          title="Project Theme"
+          options={themes.map((theme) => ({
+            key: theme.company,
+            value: `${theme.company}: ${theme.theme}`
+          }))}
+        />
+
         <TextBox
           param="description"
           title="Project description"
@@ -83,10 +107,24 @@ export default function ProjectDelivery() {
         />
         {showModal && (
           <ConfirmationModal
-            placeHolder="Are you sure you want to submit?"
+            title="Are you sure you want to submit?"
+            content="This is a unique submission and cannot be undone."
             closeModal={closeModal}
           />
         )}
+        {showInfoModal && (
+          <InformationModal
+            title="Project submitted!"
+            content={
+              <>
+                Your project has been successfully submitted!
+                Thank you for participating in <span class="text-primary">Hackathon Bugsbyte</span>. Good luck!
+              </>
+            }
+            closeModal={goBack}
+          />
+        )}
+
       </form>
     </FormsTemplate>
   );

src/components/registerForm.jsx

@@ -127,7 +127,7 @@ export default function Form() {
         <Selector
           param="university"
           title="University"
-          options={universities}
+          options={universities.map((uni) => ({ key: uni, value: uni }))}
         />
 
         <TextInput

src/data/themes.json

@@ -0,0 +1,14 @@
+[
+    {
+        "company": "McSonae",
+        "theme": "Price optimization tool"
+    },
+    {
+        "company": "Uphold",
+        "theme": "Crypto basket price predictor"
+    },
+    {
+        "company": "SingleStore",
+        "theme": "Real-Time GenAI: Build Smarter, Faster AI Apps"
+    }
+]

src/pages/api/projects/create.ts

@@ -9,6 +9,10 @@ const supabase = createClient(
   import.meta.env.SUPABASE_ANON_KEY,
 );
 
+const apiGithub = "https://api.github.com/repos/";
+// TODO: Change this date to the contest start date
+const beginContestDate = new Date("2022-03-28T18:00:00Z");
+
 export const POST: APIRoute = async ({ request }) => {
   const formData = await request.formData();
 
@@ -31,6 +35,7 @@ export const POST: APIRoute = async ({ request }) => {
     name: formData.get("name")?.toString() ?? "",
     description: formData.get("description")?.toString() ?? "",
     link: formData.get("link")?.toString() ?? "",
+    theme: formData.get("theme")?.toString() ?? "",
   };
 
   const insertion_msg = await supabase.from("projects").insert([data]).select();
@@ -57,15 +62,27 @@ export const POST: APIRoute = async ({ request }) => {
 };
 
 const validateForms = async (formData: FormData, errors: String[]) => {
+  const team_code = formData.get("team_code")?.toString().replace("#", "");
+  const link = formData.get("link")?.toString();
+
+  if (!team_code || !link) {
+    errors.push("All fields are required.");
+    return false
+  }
+
+  const valid = (await validateTeamCode(team_code, errors) && await validateLink(link, errors))
+
+  return valid;
+};
+
+
+const validateTeamCode = async (team_code: string, errors: String[]) => {
   let valid = true;
 
-  // check if there's already a project with the same team code
-  // if there is one, return an error
-  const team_code = formData.get("team_code")?.toString().replace("#", "");
   let { data: projects, error } = await supabase
-    .from("projects")
-    .select("*")
-    .eq("team_code", team_code);
+  .from("projects")
+  .select("*")
+  .eq("team_code", team_code);
 
   if (error) {
     errors.push(
@@ -78,4 +95,31 @@ const validateForms = async (formData: FormData, errors: String[]) => {
   }
 
   return valid;
-};
+}  
+
+const validateLink = async (link: string, errors: String[]) => {
+  const githubLinkRegex = /^https:\/\/github\.com\/([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+)$/;
+
+  const match = link.match(githubLinkRegex);
+  if (!match) {
+    errors.push("The link must be a valid GitHub repository URL.");
+    return false;
+  }
+
+  const [, username, repositoryName] = match;
+
+  const response = await fetch(apiGithub + `${username}/${repositoryName}`);
+  if (!response.ok) {
+    errors.push("The repository doesn't exist or is private.");
+    return false;
+  }
+
+  const data = await response.json();
+  const creationDate = new Date(data.created_at);
+  if (creationDate < beginContestDate) {
+    errors.push("The repository must be created after the contest start date.");
+    return false;
+  }
+
+  return true;
+}

src/hidden_pages/projects.astro renamed to src/pages/projects.astro

@@ -53,6 +53,7 @@ export interface SubmitProjectItem {
   name: string;
   description: string;
   link: string;
+  theme: string;
 }
 
 export interface SideBarOption {

src/types.ts

@@ -0,0 +1,11 @@
+-- Step 1: Drop the current primary key constraint
+ALTER TABLE public.projects
+DROP CONSTRAINT projects_pkey;
+
+-- Step 2: Drop the id column
+ALTER TABLE public.projects
+DROP COLUMN id;
+
+-- Step 3: Set the team_code column as the new primary key
+ALTER TABLE public.projects
+ADD CONSTRAINT projects_pkey PRIMARY KEY (team_code);

supabase/migrations/20250327150742_modify_projects_table.sql

@@ -0,0 +1,2 @@
+ALTER TABLE public.projects
+ADD COLUMN theme text;