feat: UI additions and bug fixes

components/AboutHeader.tsx

@@ -9,7 +9,7 @@ import React from 'react';
  *
  */
 interface AboutHeaderProps {
-  active: '/about' | '/about/faq' | '/about/questions';
+  active: '/about' | '/about/faq';
 }
 
 /**
@@ -42,7 +42,7 @@ export default function AboutHeader({ active }: AboutHeaderProps) {
               </a>
             </a>
           </Link>
-          <Link href="/about/questions">
+          {/* <Link href="/about/questions">
             <a>
               <span className="inline md:invisible"></span>
               <a
@@ -53,7 +53,7 @@ export default function AboutHeader({ active }: AboutHeaderProps) {
                 Ask a Question
               </a>
             </a>
-          </Link>
+          </Link> */}
         </div>
       </header>
     </section>

components/AdminHeader.tsx

@@ -1,5 +1,4 @@
-import Link from 'next/link';
-import React from 'react';
+import NavLink from './NavLink';
 
 /**
  * An about header.
@@ -9,24 +8,15 @@ export default function AdminHeader() {
     <section className="p-4">
       <header className="top-0 sticky flex flex-row justify-between p-2 md:p-4 items-center">
         <div className="mx-auto md:flex justify-center text-xl font-header md:text-left  gap-x-8">
-          <Link href="/admin">
-            <a>
-              <span className="inline md:invisible"></span>
-              <a className="link font-bold">Event Dashboard</a>
-            </a>
-          </Link>
-          <Link href="/admin/scan">
-            <a>
-              <span className="inline md:invisible"></span>
-              <a className="link font-bold">Scanner</a>
-            </a>
-          </Link>
-          <Link href="/admin/users">
-            <a>
-              <span className="inline md:invisible"></span>
-              <a className="link font-bold">Users Dashboard</a>
-            </a>
-          </Link>
+          <NavLink href="/admin" exact={true}>
+            Event Dashboard
+          </NavLink>
+          <NavLink href="/admin/scan" exact={true}>
+            Scanner
+          </NavLink>
+          <NavLink href="/admin/users" exact={true}>
+            Users Dashboard
+          </NavLink>
         </div>
       </header>
     </section>

components/AppHeader.tsx

@@ -40,9 +40,7 @@ export default function AppHeader() {
               className="flex order-2 relative ml-[-6px] font-display self-center items-center w-[112px] md:order-1 md:ml-0 md:w-[176px] after:absolute after:block after:right-0 after:w-4 after:h-4 md:after:w-6 md:after:h-6 after:rounded-full after:bg-gray-400"
               onClick={dismissDialog}
             >
-              <span className="text-[16px] font-black md:z-0 md:text-2xl md:mr-10">
-                HackUTD VIII
-              </span>
+              <span className="text-[16px] font-black md:z-0 md:text-2xl md:mr-10">HackPortal</span>
             </a>
           </Link>
           {/* Smartphone nav */}

components/DashboardHeader.tsx

@@ -8,7 +8,7 @@ interface DashboardHeaderProps {
 /**
  * A dashboard header.
  */
-export default function DashboardHeader({ active }: DashboardHeaderProps) {
+export default function DashboardHeader() {
   return (
     <>
       <header className="flex flex-row justify-between py-2 md:p-4 items-center">
@@ -25,6 +25,9 @@ export default function DashboardHeader({ active }: DashboardHeaderProps) {
           <NavLink href="/dashboard/submit" exact={true} className="p-2 mx-4">
             Submit
           </NavLink>
+          <NavLink href="/dashboard/questions" exact={true} className="p-2 mx-4">
+            Ask a Question
+          </NavLink>
         </div>
       </header>
     </>

lib/types.d.ts

@@ -157,6 +157,21 @@ type KeynoteSpeaker = {
   description: string;
 };
 
+/**
+ *
+ * Represent a challenge in hackcenter
+ *
+ * @param title title of challenge
+ * @param description description of that challenge
+ * @param prizes array of prizes starting from first and ending to last place prize
+ *
+ */
+type Challenge = {
+  title: string;
+  description: string;
+  prizes: [];
+};
+
 /**
  *
  * Represent a keynote speaker in home page

pages/api/announcements/index.ts

@@ -1,4 +1,4 @@
-import { auth, firestore } from 'firebase-admin';
+import { firestore } from 'firebase-admin';
 import { NextApiRequest, NextApiResponse } from 'next';
 import initializeApi from '../../../lib/admin/init';
 import { userIsAuthorized } from '../../../lib/authorization/check-authorization';
@@ -8,7 +8,6 @@ const db = firestore();
 
 const ANNOUNCEMENTS_COLLECTION = '/announcements';
 const TOKENS_COLLECTION = '/tokens';
-
 const MAX_PER_BATCH = 1000;
 
 async function sendNotifications(announcement: unknown) {
@@ -85,6 +84,11 @@ async function getAllAnnouncements(req: NextApiRequest, res: NextApiResponse) {
   snapshot.forEach((doc) => {
     data.push(doc.data());
   });
+  data.sort((a, b) => {
+    const timeA = new Date(a.timestamp),
+      timeB = new Date(b.timestamp);
+    return timeB.getTime() - timeA.getTime();
+  });
   res.json(data);
 }
 

pages/api/challenges/index.tsx

@@ -0,0 +1,44 @@
+import { firestore } from 'firebase-admin';
+import { NextApiRequest, NextApiResponse } from 'next';
+import initializeApi from '../../../lib/admin/init';
+
+initializeApi();
+const db = firestore();
+
+const CHALLENGES = '/challenges';
+
+/**
+ *
+ * API endpoint to get data of keynote speakers from backend for the keynote speakers section in home page
+ *
+ * @param req HTTP request object
+ * @param res HTTP response object
+ *
+ *
+ */
+async function getChallenges(req: NextApiRequest, res: NextApiResponse) {
+  const snapshot = await db.collection(CHALLENGES).get();
+  let data = [];
+  snapshot.forEach((doc) => {
+    data.push(doc.data());
+  });
+  res.json(data);
+}
+
+function handleGetRequest(req: NextApiRequest, res: NextApiResponse) {
+  return getChallenges(req, res);
+}
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { method } = req;
+  switch (method) {
+    case 'GET': {
+      return handleGetRequest(req, res);
+    }
+    default: {
+      return res.status(404).json({
+        msg: 'Route not found',
+      });
+    }
+  }
+}

pages/dashboard/Components/AnnouncementCards.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 function AnouncementCard(props) {
   return (
     <>
-      <div id="announcement-content" className="bg-purple-200 md:min-h-1/4 rounded-lg p-3">
+      <div id="announcement-content" className="md:min-h-1/4 rounded-lg p-3 bg-purple-200">
         {props.text}
       </div>
       <p className="text-right">{props.time}</p>

pages/dashboard/Components/ChallengeCard.tsx

@@ -0,0 +1,33 @@
+/**
+ * Challenge Cards Component
+ *
+ * Cards for challenge section in hack center
+ */
+
+function ChallengeCard(props) {
+  // if(props.prizes !== null && props.prizes !== undefined){
+  //   console.log(props.prizes);
+  // }
+  return (
+    <div className="max-w-[22rem] min-w-[22rem] min-h-[22rem] m-4 text-center sm:p-6 p-2 border-2 rounded-lg">
+      <div className="lg:min-h-[5rem] min-h-[3rem] md:text-xl text-lg font-bold mb-4">
+        {props.title}
+      </div>
+      <div className="">
+        <div className=" md:text-sm text-xs">{props.description}</div>
+      </div>
+      {props.prizes !== null && props.prizes !== undefined && (
+        <div className="md:text-base text-sm">
+          <div className="mt-4 font-bold underline">Prizes</div>
+          <ul className="list-decimal list-inside">
+            {props.prizes.map((prize, idx) => (
+              <li key={idx}>{prize}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ChallengeCard;

pages/dashboard/Components/MentorCard1.tsx

@@ -14,7 +14,7 @@ function MentorCard1(props) {
         <div className="h-2/5 p-4 md:text-2xl text-lg font-black">{props.room}</div>
         <div className="h-2/5 bg-pink-300 p-4 flex flex-wrap content-start">
           <p className="text-md w-full">Find help with:</p>
-          <div className="bg-pink-100 w-full h-1/4 rounded-full text-center md:text-lg text-md flex items-center justify-center m-1">
+          <div className="flex items-center justify-center w-full h-1/4 rounded-full text-center md:text-lg text-md m-1 bg-pink-100">
             {props.topic}
           </div>
         </div>

pages/dashboard/Components/MentorCard3.tsx

@@ -10,17 +10,17 @@ import React from 'react';
 function MentorCard3(props) {
   return (
     <>
-      <div className="md:h-80 md:min-w-64 h-64 min-w-56 bg-pink-100 rounded-2xl md:mx-4 mx-2 flex flex-col">
+      <div className="flex flex-col md:h-80 md:min-w-64 h-64 min-w-56 md:mx-4 mx-2 bg-pink-100 rounded-2xl">
         <div className="h-2/5 p-4 md:text-2xl text-lg font-black">{props.room}</div>
-        <div className="h-2/5 bg-pink-300 p-4 flex flex-wrap content-start">
+        <div className="flex flex-wrap content-start h-2/5 bg-pink-300 p-4">
           <p className="text-md w-full">Find help with:</p>
-          <div className="bg-pink-100 w-2/5 h-1/4 rounded-full text-center md:text-lg text-md flex items-center justify-center m-1">
+          <div className="flex items-center justify-center w-2/5 h-1/4 rounded-full text-center md:text-lg text-md m-1 bg-pink-100">
             {props.topic1}
           </div>
-          <div className="bg-pink-100 w-2/5 h-1/4 rounded-full text-center md:text-lg text-md flex items-center justify-center m-1">
+          <div className="flex items-center justify-center w-2/5 h-1/4 rounded-full text-center md:text-lg text-md m-1 bg-pink-100">
             {props.topic2}
           </div>
-          <div className="bg-pink-100 w-2/5 h-1/4 rounded-full text-center md:text-lg text-md flex items-center justify-center m-1">
+          <div className="flex items-center justify-center w-2/5 h-1/4 rounded-full text-center md:text-lg text-md m-1 bg-pink-100">
             {props.topic3}
           </div>
         </div>

pages/dashboard/Components/Sidebar.tsx

@@ -16,7 +16,7 @@ function Sidebar() {
 
       <section
         id="Sidebar"
-        className="hidden md:flex flex-col content-center justify-center items-center h-screen fixed top-16 border-r-2 border-gray-600 lg:w-1/8 md:w-1/7 w-1/6 text-xs lg:text-sm text-center bg-white"
+        className="hidden md:flex flex-col content-center justify-center items-center h-screen fixed top-16 lg:w-1/8 md:w-1/7 w-1/6 border-r-2 border-gray-600 text-xs lg:text-sm text-center bg-white"
       >
         <div>Welcome, {!user || !isSignedIn ? 'hacker' : user.firstName}</div>
         <div className="text-indigo-500">{role}</div>

pages/dashboard/Components/SpotlightCard.tsx

@@ -42,39 +42,37 @@ function SpotlightCard(props: any) {
 
   return (
     <>
-      {/* <div className="min-w-3/4 h-full bg-lightBackground flex justify-center pt-2"> */}
-      <div className="scrollItem min-w-3/4 h-[90%] bg-aqua rounded-lg p-3 flex flex-col justify-between my-4 mx-12">
+      <div className="scrollItem flex flex-col justify-between min-w-3/4 h-[90%] bg-aqua rounded-lg p-3 my-4 mx-12">
         <h1 className="lg:text-4xl text-xl font-black">{props.title}</h1>
         <h3 className="md:text-md text-sm font-black">{speakerString}</h3>
         {/* info section */}
-        <div className="rounded-lg bg-darkAqua w-full min-h-1/2 p-3 flex flex-col justify-around">
+        <div className="flex flex-col justify-around w-full min-h-1/2 rounded-lg bg-darkAqua p-3">
           {/* top row info */}
           <div className="flex justify-around">
-            <div className="lg:text-lg sm:text-md text-xs flex items-center">
+            <div className="flex items-center lg:text-lg sm:text-md text-xs">
               {<CalendarIcon style={{ fontSize: 'medium', margin: '2px' }} />}
               <p>{dayString}</p>
             </div>
-            <div className="lg:text-lg sm:text-md text-xs flex items-center">
+            <div className="flex items-center lg:text-lg sm:text-md text-xs">
               {<PinDrop style={{ fontSize: 'medium', margin: '2px' }} />}
               <p>{props.location}</p>
             </div>
           </div>
           {/* botton row info */}
           <div className="flex justify-around">
-            <div className="lg:text-lg sm:text-md text-xs flex items-center">
+            <div className="flex items-center lg:text-lg sm:text-md text-xs">
               {<ClockIcon style={{ fontSize: 'large', margin: '2px' }} />}
               <p>
                 {props.startTime} - {props.endTime}
               </p>
             </div>
-            <div className="lg:text-lg sm:text-md text-xs flex items-center">
+            <div className="flex items-center lg:text-lg sm:text-md text-xs">
               {<Backpack style={{ fontSize: 'medium', margin: '2px' }} />}
               <p>{props.page}</p>
             </div>
           </div>
         </div>
       </div>
-      {/* </div> */}
     </>
   );
 }

pages/dashboard/hackerpack.tsx

@@ -108,9 +108,7 @@ export default function HackerPack() {
       </section>
 
       <section id="mainContent" className="px-6 py-3 w-3/4 md:wd-5/6 2xl:w-7/8">
-        <section id="subheader" className="p-4">
-          <DashboardHeader active="/dashboard/hackerpack" />
-        </section>
+        <DashboardHeader />
 
         <div className="font-bold text-2xl md:text-4xl lg-text-6xl">Big Heading</div>
 
@@ -151,7 +149,7 @@ export default function HackerPack() {
         </section>
 
         <div id="Subsection1" className="my-7">
-          <div className="font-bold text-lg md:text-xl lg-text-3xl mb-4">SubHeading 1</div>
+          <div className="font-bold text-lg md:text-xl lg:text-3xl mb-4">SubHeading 1</div>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
             incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id volutpat lacus
@@ -167,7 +165,7 @@ export default function HackerPack() {
         </div>
 
         <div id="Subsection2" className="my-7">
-          <div className="font-bold text-lg md:text-xl lg-text-3xl mb-4">SubHeading 2</div>
+          <div className="font-bold text-lg md:text-xl lg:text-3xl mb-4">SubHeading 2</div>
           <div className="flex grid grid-cols-2 gap-x-4 ">
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et eu et vitae, in quis metus
@@ -189,7 +187,7 @@ export default function HackerPack() {
         </div>
 
         <div id="Subsection3" className="my-7">
-          <div className="font-bold text-lg md:text-xl lg-text-3xl mb-4">SubHeading 3</div>
+          <div className="font-bold text-lg md:text-xl lg:text-3xl mb-4">SubHeading 3</div>
           <p>
             Arcu dui vivamus arcu felis bibendum ut tristique et egestas. Mauris nunc congue nisi
             vitae suscipit. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet.
@@ -201,7 +199,7 @@ export default function HackerPack() {
         </div>
 
         <div id="Subsection4" className="my-7">
-          <div className="font-bold text-lg md:text-xl lg-text-3xl mb-4">SubHeading 4</div>
+          <div className="font-bold text-lg md:text-xl lg:text-3xl mb-4">SubHeading 4</div>
           <p>
             Arcu dui vivamus arcu felis bibendum ut tristique et egestas. Mauris nunc congue nisi
             vitae suscipit. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet.
@@ -213,7 +211,7 @@ export default function HackerPack() {
         </div>
 
         <div id="Subsection5" className="my-7">
-          <div className="font-bold text-lg md:text-xl lg-text-3xl mb-4">SubHeading 5</div>
+          <div className="font-bold text-lg md:text-xl lg:text-3xl mb-4">SubHeading 5</div>
           <div>
             <p>
               Turpis egestas pretium aenean pharetra magna. Turpis in eu mi bibendum neque egestas
@@ -232,7 +230,7 @@ export default function HackerPack() {
         </div>
 
         <div id="Subsection6" className="my-7">
-          <div className="font-bold text-lg md:text-xl lg-text-3xl mb-4">SubHeading 6</div>
+          <div className="font-bold text-lg md:text-xl lg:text-3xl mb-4">SubHeading 6</div>
           <div className="flex grid grid-cols-2 gap-x-4 ">
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et eu et vitae, in quis metus