Sync with template

.eslintrc.json

@@ -3,17 +3,15 @@
     "browser": true,
     "es2021": true
   },
-  "extends": ["plugin:react/recommended", "google", "prettier"],
+  "extends": ["next/core-web-vitals", "google", "prettier"],
   "overrides": [],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
   "plugins": ["react"],
   "rules": {
-    "require-jsdoc": "off",
-    "react/react-in-jsx-scope": "off",
-    "react/prop-types": "off"
+    "require-jsdoc": 0
   },
   "settings": {
     "react": {

src/app/api/dashboard/[type]/route.js

@@ -14,7 +14,7 @@ import {
 } from "firebase/firestore";
 import { authenticate } from "@/utils/auth";
 import { AUTH, ATTRIBUTES } from "@/data/dynamic/admin/Dashboard";
-import EmailService from "@/utils/email";
+import send from "@/utils/email";
 const types = new Set([
   "admins",
   "committees",
@@ -52,7 +52,7 @@ export async function POST(req, { params }) {
         [`${params.type}.0`]: increment(1),
       });
 
-      await EmailService.send({
+      await send({
         email: user.email,
         id: process.env.EMAIL_CONFIRMATION_TEMPLATE,
         name: user.name,
@@ -137,7 +137,7 @@ export async function PUT(req, { params }) {
           await updateDoc(doc(db, "users", object.uid), {
             [`roles.${params.type}`]: status,
           });
-          await EmailService.send({
+          await send({
             email: object.email,
             id:
               status === 1

src/app/user/join/[teamID]/page.js

@@ -2,37 +2,41 @@
 import { useState, useEffect } from "react";
 import Button from "@/components/dynamic/Button";
 import { useRouter } from "next/navigation";
-import toast from "react-hot-toast";
+import toaster from "@/utils/toaster";
 import { useSession } from "next-auth/react";
 import Fault from "@/utils/error";
 import { api } from "@/utils/api";
 
-export default function page({ params }) {
+export default function Page({ params }) {
   const [team, setTeam] = useState(null);
   const router = useRouter();
   const { update: sessionUpdate } = useSession();
+
+  const { teamID } = params;
+
   const handleJoin = () => {
     api({
       method: "PUT",
       url: "/api/members",
-      body: { team: params.teamID },
+      body: { team: teamID },
     }).then((response) => {
       if (response.message !== "OK") {
-        toast(`❌ ${response.message}`);
+        toaster(`${response.message}`, "error");
         return;
       }
-      toast("✅ Successfully joined team!");
+      toaster("Successfully joined team!", "success");
       sessionUpdate({
-        team: params.teamID,
+        team: teamID,
       });
       router.push("/user");
     });
   };
+
   useEffect(() => {
-    if (params.teamID) {
+    if (teamID) {
       api({
         method: "GET",
-        url: `/api/team?teamid=${params.teamID}`,
+        url: `/api/team?teamid=${teamID}`,
       }).then((response) => {
         if (response.message === "OK") {
           setTeam(response.items);
@@ -51,7 +55,7 @@ export default function page({ params }) {
         }
       });
     }
-  }, []);
+  }, [teamID]);
 
   return (
     <div>

src/components/dynamic/Input.jsx

@@ -9,6 +9,7 @@ const Input = ({
   editable = true,
   maxLength,
   required,
+  regex,
 }) => {
   return (
     <div className="flex flex-col w-full">
@@ -24,6 +25,11 @@ const Input = ({
         placeholder={placeholder}
         value={value}
         maxLength={maxLength}
+        onBlur={(e) => {
+          if (regex && !regex.test(e.target.value)) {
+            setUser({ ...user, [name]: "Invalid " + title });
+          }
+        }}
         onChange={(e) => setUser({ ...user, [name]: e.target.value })}
         data-cy={`${name}-input`}
       />

src/components/dynamic/admin/dashboards/Admins.jsx

@@ -1,5 +1,10 @@
 "use client";
-import { STATUSES, TAGS, COLUMNS } from "@/data/dynamic/admin/Admins.js";
+import {
+  STATUSES,
+  TAGS,
+  COLUMNS,
+  DROPDOWN,
+} from "@/data/dynamic/admin/Admins.js";
 import Table from "./dashboard/Dashboard";
 
 const Admin = () => {
@@ -11,6 +16,7 @@ const Admin = () => {
         tags={TAGS}
         page="admins"
         statuses={STATUSES}
+        Dropdown={DROPDOWN}
         empty="No Admins Available"
       />
     </div>

src/components/dynamic/admin/dashboards/Committees.jsx

@@ -1,5 +1,10 @@
 "use client";
-import { STATUSES, TAGS, COLUMNS } from "@/data/dynamic/admin/Committees";
+import {
+  STATUSES,
+  TAGS,
+  COLUMNS,
+  DROPDOWN,
+} from "@/data/dynamic/admin/Committees";
 import Table from "./dashboard/Dashboard";
 
 const Committee = () => {
@@ -11,6 +16,7 @@ const Committee = () => {
         tags={TAGS}
         page="committees"
         statuses={STATUSES}
+        Dropdown={DROPDOWN}
         empty="No Committees Available"
       />
     </div>

src/components/dynamic/admin/dashboards/dashboard/Modal.jsx

@@ -1,4 +1,5 @@
 import { FaTimes } from "react-icons/fa";
+import Image from "next/image";
 
 const Modal = ({ data, setModal }) => {
   return (
@@ -11,7 +12,12 @@ const Modal = ({ data, setModal }) => {
         />
       </div>
       <div className="bg-white px-3 rounded-b-xl py-2 border-x-2 border-b-2 border-hackathon-darkgray h-full w-full flex justify-center">
-        <img className="h-full" src={data.src} />
+        <Image
+          fill={true}
+          className="h-full"
+          src={data.src}
+          alt="Photo of the Judge"
+        />
       </div>
     </div>
   );

src/components/dynamic/admin/dashboards/dashboard/Toolbar.jsx

@@ -1,8 +1,8 @@
 "use client";
 import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import { FaTrashAlt, FaUndoAlt } from "react-icons/fa";
-import toast from "react-hot-toast";
+import toaster from "@/utils/toaster";
 import Popup from "../../Popup";
 import Tag from "../../Tag";
 import { COLORS } from "@/data/dynamic/Tags";
@@ -38,7 +38,7 @@ const Toolbar = ({
       url: `/api/dashboard/${page}`,
     }).then(({ items }) => {
       setData(items);
-      toast("✅ Fetched Data Successfully");
+      toaster("Fetched Data Successfully", "success");
     });
   };
 
@@ -51,14 +51,14 @@ const Toolbar = ({
       method: "DELETE",
       url: `/api/dashboard/${page}?remove=${ids.join(",")}`,
     }).then(() => {
-      toast("✅ Successfully Deleted");
+      toaster("Successfully Deleted", "success");
       toggleAllRowsSelected(false);
     });
   };
 
   const confirmDelete = () => {
     if (rows.length === 0) {
-      toast("❌ No rows selected for deletion.");
+      toaster("No rows selected for deletion.", "error");
       return;
     }
 
@@ -74,14 +74,14 @@ const Toolbar = ({
 
   const onClick = (value) => {
     if (rows.length === 0) {
-      toast("❌ No items selected.");
+      toaster("No items selected.", "error");
       return;
     }
 
     const notPending = rows.some((obj) => obj.status !== 0);
 
     if (notPending) {
-      toast("❌ Only pending items can be changed!");
+      toaster("Only pending items can be changed!", "error");
       toggleAllRowsSelected(false);
       return;
     }
@@ -94,18 +94,22 @@ const Toolbar = ({
         status: value,
         attribute: "status",
       },
-    });
+    })
+      .then(() => {
+        const ids = rows.map(({ uid }) => uid);
 
-    const ids = rows.map(({ uid }) => uid);
+        setData(
+          data.map((a) => {
+            if (ids.includes(a.uid)) a.status = value;
+            return a;
+          })
+        );
 
-    setData(
-      data.map((a) => {
-        if (ids.includes(a.uid)) a.status = value;
-        return a;
-      })
-    );
+        toggleAllRowsSelected(false);
 
-    toggleAllRowsSelected(false);
+        toaster("Operation Completed", "success");
+      })
+      .catch(() => toaster("Operation Failed", "error"));
   };
 
   useEffect(() => {

src/components/dynamic/admin/services/Upload.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { RiAttachment2 } from "react-icons/ri";
 import { FaTimes } from "react-icons/fa";
-import { toast } from "react-hot-toast";
+import toaster from "@/utils/toaster";
 import { BYTES } from "@/data/dynamic/Bytes";
 import { compress } from "@/utils/convert";
 
@@ -17,7 +17,7 @@ const Upload = ({ text, setObjects, objects, size, types }) => {
   const handleInput = (e) => {
     setUploading(true);
     if (objects.files.length + e.target.files.length > 5) {
-      toast("❌ Exceeds 5 files!");
+      toaster("Exceeds 5 files!", "error");
       setUploading(false);
       return;
     }
@@ -29,11 +29,11 @@ const Upload = ({ text, setObjects, objects, size, types }) => {
         ...Object.values(e.target.files).filter(async (file) => {
           const blob = await compress(file);
           if (blob.size > getSize(size)) {
-            toast(`❌ ${blob.name} exceeds ${size[0]} ${size[1]}`);
+            toaster(`${blob.name} exceeds ${size[0]} ${size[1]}`, "error");
             return false;
           }
           if (objects.files.map((file) => file.name).includes(file.name)) {
-            toast(`❌ ${file.name} is already uploaded`);
+            toaster(`${file.name} is already uploaded`, "error");
             return false;
           }
           return true;

src/components/dynamic/admin/services/calendar/Event.jsx

@@ -2,16 +2,16 @@ const Event = ({ event, view }) => {
   return (
     <div className="p-0.5">
       <p className="inline text-xs">
-        {event.summary}
         {view === "month" && (
           <>
-            {" - "}
             {new Date(event.start).toLocaleTimeString(navigator.language, {
               hour: "2-digit",
               minute: "2-digit",
             })}
+            {" - "}
           </>
         )}
+        {event.summary}
       </p>
     </div>
   );

src/components/dynamic/admin/services/calendar/Events.jsx

@@ -28,14 +28,22 @@ const CalendarEvents = () => {
   };
 
   useEffect(() => {
+    const min = new Date(
+      new Date().getTime() - 20 * 7 * 24 * 60 * 60 * 1000
+    ).toISOString();
+
+    const max = new Date(
+      new Date().getTime() + 20 * 7 * 24 * 60 * 60 * 1000
+    ).toISOString();
+
     const hackathon = api({
       method: "GET",
-      url: `https://www.googleapis.com/calendar/v3/calendars/${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR}/events?key=${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY}&singleEvents=true&orderBy=startTime`,
+      url: `https://www.googleapis.com/calendar/v3/calendars/${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR}/events?key=${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY}&singleEvents=true&orderBy=startTime&timeMin=${min}&timeMax=${max}`,
     });
 
     const leads = api({
       method: "GET",
-      url: `https://www.googleapis.com/calendar/v3/calendars/${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_LEADS}/events?key=${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY}&singleEvents=true&orderBy=startTime`,
+      url: `https://www.googleapis.com/calendar/v3/calendars/${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_LEADS}/events?key=${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY}&singleEvents=true&orderBy=startTime&timeMin=${min}&timeMax=${max}`,
     });
 
     Promise.all([hackathon, leads]).then(([hackathonData, leadsData]) => {
@@ -81,9 +89,16 @@ const CalendarEvents = () => {
           onNavigate={(newDate) => setDate(newDate)}
           onView={(newView) => setView(newView)}
           components={{
-            event: (props) => <Event {...props} view={view} />,
-            toolbar: (props) => (
-              <Toolbar {...props} events={events} setEvents={setEvents} />
+            event: ({ event }) => <Event event={event} view={view} />,
+            toolbar: ({ onView, onNavigate, date, view }) => (
+              <Toolbar
+                onView={onView}
+                onNavigate={onNavigate}
+                date={date}
+                view={view}
+                events={events}
+                setEvents={setEvents}
+              />
             ),
           }}
           eventPropGetter={(event) => {

src/components/dynamic/admin/services/calendar/Modal.jsx

@@ -31,11 +31,6 @@ const CalendarModal = ({ event, setEvent }) => {
               hour: "numeric",
               minute: "2-digit",
             })}
-            {" - "}
-            {event.end.toLocaleString("default", {
-              hour: "numeric",
-              minute: "2-digit",
-            })}
           </div>
           <div>
             <Tag