React Query Migration

src/components/admin/services/calendar/Calendar.jsx

@@ -48,22 +48,16 @@ const Calendar = () => {
     <>
       {event && <Modal event={event} setEvent={setEvent} />}
       <ReactBigCalendar
+        startAccessor="startDate"
+        endAccessor="endDate"
         date={date}
         view={view}
         className="py-4"
         step={15}
         events={
           tag === "all"
             ? events
-            : events.filter(
-                ({ description }) =>
-                  description
-                    .split("\n")[0]
-                    .split("#")
-                    .filter((item) => item !== "")[0]
-                    .trim()
-                    .toLowerCase() === tag,
-              )
+            : events.filter((event) => event.category === tag)
         }
         localizer={mLocalizer}
         defaultView="month"

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

@@ -4,7 +4,7 @@ const Event = ({ event, view }) => {
       <p className="inline text-xs" data-cy="event">
         {view === "month" && (
           <>
-            {new Date(event.start).toLocaleTimeString(navigator.language, {
+            {new Date(event.startDate).toLocaleTimeString(navigator.language, {
               hour: "2-digit",
               minute: "2-digit",
             })}

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

@@ -18,14 +18,14 @@ const CalendarModal = ({ event, setEvent }) => {
       <div className="border-hackathon-darkgray rounded-b-xl border-x-2 border-b-2 bg-white px-3 py-2">
         <div className="flex items-center justify-between">
           <div>
-            {event.start.toLocaleString("default", {
+            {event.startDate.toLocaleString("default", {
               month: "long",
               weekday: "long",
               day: "2-digit",
               year: "numeric",
             })}
             <br />
-            {event.start.toLocaleString("default", {
+            {event.startDate.toLocaleString("default", {
               hour: "numeric",
               minute: "2-digit",
             })}

src/components/admin/services/calendar/actions.ts

@@ -1,6 +1,6 @@
-import { LABELS } from "@/data/admin/Calendar";
+import { LABELS, label } from "@/data/admin/Calendar";
 import { api } from "@/utils/api";
-
+import { Event } from "@/types/calendar";
 const min = new Date(
   new Date().getTime() - 20 * 7 * 24 * 60 * 60 * 1000,
 ).toISOString();
@@ -20,20 +20,28 @@ export const getEvents = async () => {
     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}`,
   });
 
-  console.log(leadsResponse, hackathonResponse);
-
-  const items = [...hackathonResponse.items, leadsResponse.items];
-
-  items.forEach((item: any) => {
-    item.start = new Date(item.start.dateTime);
-    item.end = new Date(item.end.dateTime);
-    const [category, assignee] = item.description
-      .split("\n")[0]
-      .split("#")
-      .map((item: any) => item.trim())
-      .filter((item: any) => item !== "");
+  const items = [...hackathonResponse.items, leadsResponse.items][0];
+  items.forEach((item: Event) => {
+    item.startDate = new Date(item.start.dateTime);
+    item.endDate = new Date(item.end.dateTime);
+    let category: string = "other";
+    let assignee: string = "";
+    if (item.description) {
+      [category, assignee] = item.description
+        .split("\n")[0]
+        .split("#")
+        .map((item: string) => item.trim())
+        .filter((item: string) => item !== "");
+    } else {
+      item.description = "N/A";
+    }
+    if (category in LABELS) {
+      item.color = LABELS[category as keyof label].background;
+    } else {
+      category = "other";
+      item.color = "!bg-hackathon-tags-gray-text";
+    }
     item.category = category;
-    item.color = LABELS[item.category].background;
     item.assignee = assignee;
     item.hidden = false;
   });

src/components/admin/services/checkin/actions.tsx → src/components/admin/services/checkin/actions.ts

@@ -1,12 +1,12 @@
 import { api } from "@/utils/api";
-
+import { Event } from "@/types/calendar";
 export const getEvents = async () => {
   const { items } = await 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`,
   });
 
-  return items.map((event: any) => ({
+  return items.map((event: Event) => ({
     id: event.id,
     name: event.summary,
     hidden: false,

src/components/admin/services/statistics/actions.ts

@@ -1,33 +1,65 @@
-import { api } from "@/utils/api";
-import { authenticate } from "@/utils/auth";
 import { db } from "@/utils/firebase";
 import { collection, doc, getDoc, getDocs } from "firebase/firestore";
 
+type Status = {
+  pending: number;
+  accepted: number;
+  rejected: number;
+};
+
+type Sizes = {
+  XS?: number;
+  S?: number;
+  M?: number;
+  L?: number;
+  XL?: number;
+  XXL?: number;
+};
+
+interface Stats {
+  teams: Status | Sizes;
+  participants: Status | Sizes;
+  volunteers: Status | Sizes;
+  judges: Status | Sizes;
+  mentors: Status | Sizes;
+  committees: Status | Sizes;
+  sponsors: Status | Sizes;
+  panels: Status | Sizes;
+  admins: Status | Sizes;
+}
+
+type Event = {
+  attendance: number;
+  name: string;
+};
+
 export const getStats = async () => {
   const [statistics, events] = await Promise.all([
     getDoc(doc(db, "statistics", "statistics")),
     getDocs(collection(db, "events")),
   ]);
+
   const {
-    teams,
     participants,
+    teams,
     volunteers,
     judges,
     mentors,
     committees,
     sponsors,
     panels,
     admins,
-  } = statistics.data();
+  } = statistics.data() as Stats;
 
-  const attendees = {};
+  const attendees: Record<string, number> = {};
 
   events.forEach((doc) => {
-    const { name, attendance } = doc.data();
+    const { name, attendance } = doc.data() as Event;
     attendees[name] = attendance;
   });
 
   const users = {
+    admins,
     participants,
     teams,
     judges,
@@ -36,23 +68,60 @@ export const getStats = async () => {
     committees,
     sponsors,
     panels,
-    admins,
   };
 
   const sizeData = ["XS", "S", "M", "L", "XL", "XXL"];
   const statusData = ["1", "0", "-1"];
 
-  const size = {};
-  const status = {};
+  const defaultShirts: Sizes = {
+    XS: 0,
+    S: 0,
+    M: 0,
+    L: 0,
+    XL: 0,
+    XXL: 0,
+  };
+
+  const size = {
+    teams: { ...defaultShirts },
+    participants: { ...defaultShirts },
+    volunteers: { ...defaultShirts },
+    judges: { ...defaultShirts },
+    mentors: { ...defaultShirts },
+    committees: { ...defaultShirts },
+    sponsors: { ...defaultShirts },
+    panels: { ...defaultShirts },
+    admins: { ...defaultShirts },
+  };
+
+  const defaultRoles: Status = {
+    pending: 0,
+    accepted: 0,
+    rejected: 0,
+  };
+
+  const status = {
+    teams: { ...defaultRoles },
+    participants: { ...defaultRoles },
+    volunteers: { ...defaultRoles },
+    judges: { ...defaultRoles },
+    mentors: { ...defaultRoles },
+    committees: { ...defaultRoles },
+    sponsors: { ...defaultRoles },
+    panels: { ...defaultRoles },
+    admins: { ...defaultRoles },
+  };
 
   Object.entries(users).forEach(([group, entries]) => {
-    size[group] = Object.fromEntries(
+    const role = group as keyof Stats;
+
+    size[role] = Object.fromEntries(
       Object.entries(entries).filter(([key]) => sizeData.includes(key)),
-    );
+    ) as Sizes;
 
-    status[group] = Object.fromEntries(
+    status[role] = Object.fromEntries(
       Object.entries(entries).filter(([key]) => statusData.includes(key)),
-    );
+    ) as Status;
   });
 
   return { users: { status, size }, events: attendees };

src/data/admin/Calendar.ts

@@ -4,7 +4,8 @@ interface types {
   type: string;
 }
 
-interface label {
+export interface label {
+  other: types;
   directors: types;
   marketing: types;
   operations: types;
@@ -61,6 +62,11 @@ export const LABELS: label = {
     background: "!bg-hackathon-tags-red-text",
     type: "leads",
   },
+  other: {
+    color: "gray",
+    background: "!bg-hackathon-tags-gray-text",
+    type: "leads",
+  },
   workshop: {
     color: "grayblue",
     background: "!bg-hackathon-tags-grayblue-text",

src/types/calendar.ts

@@ -0,0 +1,19 @@
+export type Event = {
+  assignee?: string;
+  category?: string;
+  color?: string;
+  description: string;
+  end: {
+    dateTime: string;
+    timeZone: string;
+  };
+  hidden: boolean;
+  id: string;
+  start: {
+    dateTime: string;
+    timeZone: string;
+  };
+  startDate?: Date;
+  endDate?: Date;
+  summary: string;
+};