feat(portal/challenge): add challenge page

Author: Aashna-Verma

apps/portal/app/routes/challenges.tsx

@@ -1,40 +1,31 @@
-// import type { LoaderFunction } from '@remix-run/node'
-// import process from 'node:process'
+import type { LoaderFunction } from '@remix-run/node'
+import process from 'node:process'
 import { ChallengesPage } from '@cuhacking/portal/pages/challenges'
-// import { useLoaderData } from '@remix-run/react'
+import { useLoaderData } from '@remix-run/react'
 
-// export const loader: LoaderFunction = async () => {
-//   try {
-//     const API_URL = process.env.NODE_ENV === 'development' ? 'http://localhost:8000' : 'https://axiom.cuhacking.ca'
-//     const req = await fetch(`${API_URL}/api/challenges`)
+export const loader: LoaderFunction = async () => {
+  try {
+    const API_URL = process.env.NODE_ENV === 'development' ? 'http://localhost:8000' : 'https://axiom.cuhacking.ca'
+    const req = await fetch(`${API_URL}/api/challenges`)
 
-//     if (!req.ok) {
-//       throw new Error('Error')
-//     }
+    if (!req.ok) {
+      throw new Error('Error')
+    }
 
-//     // const { res } = await req.json()
+    const data = await req.json()
 
-//     const data = { title: '', pathTitle: '', symbol: {}, challengeBlock: [] }
-
-//     //console.log(data)
-
-//     return {
-//       title: data.title,
-//       pathTitle: data.pathTitle,
-//       symbol: data.symbol,
-//       challengeBlock: data.challengeBlock
-//     }
-//   }
-//   catch () {
-//     console.error(`Error fetching challenges`)
-//     return { title: '', pathTitle: '', symbol: {}, challengeBlock: [] }
-//   }
-// }
+    return data.docs
+  }
+  catch (error) {
+    console.error(`Error fetching challenges`, error)
+    return [{ title: '', pathTitle: '', sponsor: { symbol: { url: '', alt: '' } }, challengeBlock: [] }]
+  }
+}
 
 export default function Challenges() {
-  // const data = useLoaderData<typeof loader>()
+  const data = useLoaderData<typeof loader>()
 
   return (
-    <ChallengesPage />
+    <ChallengesPage data={data} />
   )
 }

apps/portal/app/routes/map.tsx

@@ -0,0 +1,29 @@
+import type { LoaderFunction } from '@remix-run/node'
+import process from 'node:process'
+import { MapsPage } from '@cuhacking/portal/pages/map'
+
+export const loader: LoaderFunction = async () => {
+  try {
+    const API_URL = process.env.NODE_ENV === 'development' ? 'http://localhost:8000' : 'https://axiom.cuhacking.ca'
+    const req = await fetch(`${API_URL}/api/challenges`)
+
+    if (!req.ok) {
+      throw new Error('Error')
+    }
+
+    const data = await req.json()
+
+    return data.docs
+  }
+  catch (error) {
+    console.error(`Error fetching challenges`, error)
+  }
+}
+
+export default function Map() {
+  // const data = useLoaderData<typeof loader>()
+
+  return (
+    <MapsPage />
+  )
+}

apps/portal/app/routes/qr.tsx

@@ -0,0 +1,29 @@
+import type { LoaderFunction } from '@remix-run/node'
+import process from 'node:process'
+import { QrPage } from '@cuhacking/portal/pages/qr'
+
+export const loader: LoaderFunction = async () => {
+  try {
+    const API_URL = process.env.NODE_ENV === 'development' ? 'http://localhost:8000' : 'https://axiom.cuhacking.ca'
+    const req = await fetch(`${API_URL}/api/challenges`)
+
+    if (!req.ok) {
+      throw new Error('Error')
+    }
+
+    const data = await req.json()
+
+    return data.docs
+  }
+  catch (error) {
+    console.error(`Error fetching challenges`, error)
+  }
+}
+
+export default function QR() {
+  // const data = useLoaderData<typeof loader>()
+
+  return (
+    <QrPage />
+  )
+}

apps/portal/app/routes/schedule.tsx

@@ -0,0 +1,29 @@
+import type { LoaderFunction } from '@remix-run/node'
+import process from 'node:process'
+import { SchedulePage } from '@cuhacking/portal/pages/schedule'
+
+export const loader: LoaderFunction = async () => {
+  try {
+    const API_URL = process.env.NODE_ENV === 'development' ? 'http://localhost:8000' : 'https://axiom.cuhacking.ca'
+    const req = await fetch(`${API_URL}/api/challenges`)
+
+    if (!req.ok) {
+      throw new Error('Error')
+    }
+
+    const data = await req.json()
+
+    return data.docs
+  }
+  catch (error) {
+    console.error(`Error fetching challenges`, error)
+  }
+}
+
+export default function Schedule() {
+  // const data = useLoaderData<typeof loader>()
+
+  return (
+    <SchedulePage />
+  )
+}

libs/db/collections/models/Challenges.ts

@@ -12,7 +12,7 @@ export const Challenges: CollectionConfig = {
   fields: [
     {name: "pathTitle", type: "text"},
     {name: "title", type: "text"},
-    {name: "symbol", type: "upload", relationTo: "media"},
+    {name: "sponsor", type: "relationship", relationTo: "brands"},
         {
       name: 'challengeBlock',
       type: 'blocks',
@@ -65,7 +65,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Best use of QNX - Software",
-        symbol: "qnx-logo.png",
+        sponsor: "QNX",
         challengeBlock: [
           {
             blockName: "QNX Details",
@@ -114,7 +114,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Best use of QNX - Hardware",
-        symbol: "qnx-hardware.png",
+        sponsor: "QNX",
         challengeBlock: [
           {
             blockName: "QNX Hardware Details",
@@ -154,7 +154,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Best overall project (1st, 2nd, and 3rd place)",
-        symbol: "external-judges.png",
+        sponsor: "cuHacking",
         challengeBlock: [
           {
             blockName: "Overall Project Details",
@@ -188,7 +188,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Wolfram Award - Top 5 teams",
-        symbol: "judges.png",
+        sponsor: "Wolfram",
         challengeBlock: [
           {
             blockName: "Wolfram Award Details",
@@ -223,7 +223,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Best Hardware Hack",
-        symbol: "safaa.png",
+        sponsor: "QNX",
         challengeBlock: [
           {
             blockName: "Hardware Hack Details",
@@ -253,7 +253,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Gadget Challenge",
-        symbol: "gadget-logo.png",
+        sponsor: "Gadget",
         challengeBlock: [
           {
             blockName: "Gadget Challenge Details",
@@ -280,7 +280,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Carleton Impact Challenge",
-        symbol: "impact-logo.png",
+        sponsor: "cuHacking",
         challengeBlock: [
           {
             blockName: "Impact Challenge Details",
@@ -305,7 +305,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Best use of Figma",
-        symbol: "figma-logo.png",
+        sponsor: "cuHacking",
         challengeBlock: [
           {
             blockName: "Figma Challenge Details",
@@ -335,7 +335,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Boopbot fan art",
-        symbol: "boopbot-logo.png",
+        sponsor: "cuHacking",
         challengeBlock: [
           {
             blockName: "Boopbot Fan Art Details",
@@ -365,7 +365,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Marketing challenge",
-        symbol: "organizers-logo.png",
+        sponsor: "cuHacking",
         challengeBlock: [
           {
             blockName: "Marketing Challenge Details",
@@ -395,7 +395,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Best Use of Gemini API",
-        symbol: "mlh-logo.png",
+        sponsor: "MLH",
         challengeBlock: [
           {
             blockName: "Gemini API Details",
@@ -420,7 +420,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Best Use of Auth0",
-        symbol: "mlh-logo.png",
+        sponsor: "MLH",
         challengeBlock: [
           {
             blockName: "Auth0 Challenge Details",
@@ -445,7 +445,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Best AI Application Built with Cloudflare",
-        symbol: "mlh-logo.png",
+        sponsor: "MLH",
         challengeBlock: [
           {
             blockName: "Cloudflare AI Details",
@@ -470,7 +470,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Best Domain Name from GoDaddy Registry",
-        symbol: "mlh-logo.png",
+        sponsor: "MLH",
         challengeBlock: [
           {
             blockName: "Domain Name Details",
@@ -495,7 +495,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "People’s choice - Best overall project",
-        symbol: "devpost-logo.png",
+        sponsor: "cuHacking",
         challengeBlock: [
           {
             blockName: "People's Choice Details",
@@ -525,7 +525,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Most Outrageous Hack/Turn Brainrot into brain nourishment",
-        symbol: "organizers-logo.png",
+        sponsor: "cuHacking",
         challengeBlock: [
           {
             blockName: "Outrageous Hack Details",
@@ -555,7 +555,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Best School Crossover",
-        symbol: "judges-logo.png",
+        sponsor: "cuHacking",
         challengeBlock: [
           {
             blockName: "School Crossover Details",
@@ -585,7 +585,7 @@ export async function seedChallenges(payload: Payload, req: any) {
       {
         pathTitle: "E:[email protected]",
         title: "Best First Time Hack",
-        symbol: "judges-logo.png",
+        sponsor: "cuHacking",
         challengeBlock: [
           {
             blockName: "First Time Hack Details",
@@ -618,20 +618,20 @@ export async function seedChallenges(payload: Payload, req: any) {
 
     ].map(async (challenge) => {
       try {
-        const existingMedia = await payload.find({
-          collection: "media",
-          where: { alt: { equals: challenge.symbol.alt } },
+        const existingSponsor = await payload.find({
+          collection: "brands",
+          where: { name: { equals: challenge.sponsor } },
           pagination: false,
         });
 
-        const selectedImage =
-          existingMedia.docs.length > 0 ? existingMedia.docs[0].id : null;
+        const selectedSponsor =
+          existingSponsor.docs.length > 0 ? existingSponsor.docs[0].id : null;
 
         await payload.create({
           collection: "challenges",
           data: {
             pathTitle: challenge.pathTitle,
-            symbol: selectedImage,
+            sponsor: selectedSponsor,
             title: challenge.title,
             challengeBlock: challenge.challengeBlock
           },