Dashboard "Event"/Timeslot Card Updates (#121)

* Refactored EventCard

* Gap changes

* Route Admin/Volunteer

* eslint fix

* add fetching hours/days logic and small changes to header and communications page

* eslint fixes

---------

Co-authored-by: wkim10 <wonkim025@gmail.com>

Author: johnny-t06

package-lock.json

@@ -1,7 +1,7 @@
 {
   "welcome_title": "Thanks for checking in",
   "welcome_subtitle": "What's the next event you want to join",
-  "upcoming_events": "Upcoming events",
+  "upcoming_times": "Your upcoming volunteer times",
   "volunteer_hours": "Personal volunteer hours",
   "events_attended": "Events attended"
 }

public/locales/en/home.json

@@ -1,7 +1,7 @@
 {
   "welcome_title": "Gracias por visitar nuestro sitio",
   "welcome_subtitle": "¿Cuál es el próximo evento al que quieres unirte?",
-  "upcoming_events": "Próximos eventos",
+  "upcoming_times": "Tus próximos tiempos de voluntariado",
   "volunteer_hours": "Horas de voluntariado",
   "events_attended": "Eventos asistidos"
 }

public/locales/es/home.json

@@ -51,15 +51,21 @@ export const addTimeSlot = async (
   }
 ) => fetchApi("/api/timeSlot", "POST", { timeSlot, groupSignupInfo });
 
+export const getTimeSlots = async (userId: string) => {
+  const url = `/api/timeSlot?userId=${userId}`;
+  return fetchApi(url, "GET");
+};
+
 export const getTimeSlotsByDate = async (userId: string, date: Date) => {
   const isoDate = date.toISOString().split("T")[0];
-  const url = userId
-    ? `/api/timeSlot?userId=${userId}&date=${isoDate}`
-    : `/api/timeSlot?date=${isoDate}`;
-
+  const url = `/api/timeSlot?userId=${userId}&date=${isoDate}`;
   return fetchApi(url, "GET");
 };
 
+export const getTimeSlotsByStatus = async (status: string) => {
+  const url = `/api/timeSlot?status=${status}`;
+  return fetchApi(url, "GET");
+};
 export const deleteTimeSlot = async (
   userId: string,
   startTime: Date,

src/app/api/timeSlot/route.client.ts

@@ -1,4 +1,4 @@
-import { PrismaClient } from "@prisma/client";
+import { PrismaClient, TimeSlotStatus } from "@prisma/client";
 import { NextRequest, NextResponse } from "next/server";
 import { sendGroupSignupMail } from "../../../lib/groupSignupMail";
 
@@ -47,10 +47,11 @@ export const POST = async (request: NextRequest) => {
 export const GET = async (request: NextRequest) => {
   const { searchParams } = new URL(request.url);
 
-  const userId = searchParams.get("userId");
-  const date = searchParams.get("date");
+  const userId: string | undefined = searchParams.get("userId") || undefined;
+  const date: string | undefined = searchParams.get("date") || undefined;
+  const status: string | undefined = searchParams.get("status") || undefined;
 
-  if (!userId || !date) {
+  if (!userId && !date && !status) {
     return NextResponse.json(
       {
         code: "BAD_REQUEST",
@@ -60,23 +61,19 @@ export const GET = async (request: NextRequest) => {
     );
   }
 
-  const [year, month, day] = date.split("-").map(Number);
-  const start = new Date(year, month - 1, day);
-  start.setHours(0, 0, 0, 0);
-  const end = new Date(start);
-  end.setDate(start.getDate() + 1);
-
   try {
     const slots = await prisma.timeSlot.findMany({
       where: {
-        userId,
-        date: {
-          gte: start,
-          lt: end,
-        },
+        ...(userId && { userId }),
+        ...(date && {
+          date: {
+            gte: new Date(date),
+            lt: new Date(new Date(date).setDate(new Date(date).getDate() + 1)),
+          },
+        }),
+        ...(status && { status: status as TimeSlotStatus }),
       },
     });
-
     return NextResponse.json(
       {
         code: "SUCCESS",

src/app/api/timeSlot/route.ts

@@ -51,3 +51,8 @@ export const getVolunteerSessions = async (userId: string) => {
   const url = `/api/volunteerSession?userId=${userId}`;
   return fetchApi(url, "GET");
 };
+
+export const getAllVolunteerSessions = async () => {
+  const url = `/api/volunteerSession`;
+  return fetchApi(url, "GET");
+};

src/app/api/volunteerSession/route.client.ts

@@ -113,22 +113,36 @@ export const GET = async (request: NextRequest) => {
   const { searchParams } = new URL(request.url);
   const userId: string | undefined = searchParams.get("userId") || undefined;
 
-  if (!userId) {
-    return NextResponse.json(
-      {
-        code: "BAD_REQUEST",
-        message: "User ID is required.",
-      },
-      {
-        status: 400,
+  try {
+    if (userId) {
+      const volunteerSessions = await prisma.volunteerSession.findMany({
+        where: {
+          userId: userId,
+          NOT: [{ checkOutTime: null }, { durationHours: null }],
+        },
+      });
+
+      if (!volunteerSessions) {
+        return NextResponse.json(
+          {
+            code: "NOT_FOUND",
+            message: "No volunteer sessions found",
+          },
+          { status: 404 }
+        );
       }
-    );
-  }
 
-  try {
+      return NextResponse.json(
+        {
+          code: "SUCCESS",
+          data: volunteerSessions,
+        },
+        { status: 200 }
+      );
+    }
+
     const volunteerSessions = await prisma.volunteerSession.findMany({
       where: {
-        userId: userId,
         NOT: [{ checkOutTime: null }, { durationHours: null }],
       },
     });

src/app/api/volunteerSession/route.ts

@@ -197,6 +197,7 @@ export default function CommunicationPage() {
                 placeholder="Type your email content"
                 value={text}
                 onChange={(e) => setText(e.target.value)}
+                rows={10}
               />
             </div>
           </div>

src/app/private/communication/page.tsx

@@ -15,13 +15,17 @@ import {
 } from "@api/timeSlot/route.client";
 import VolunteerTable from "@components/VolunteerTable";
 import { getUsersByDate } from "@api/user/route.client";
+import { useSearchParams } from "next/navigation";
+import { getStandardDate } from "../../utils";
 import { getCustomDay } from "@api/customDay/route.client";
 
 export default function EventsPage() {
   const { data: session } = useSession();
+  const searchParams = useSearchParams();
+  const date = searchParams.get("date");
 
   const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(
-    new Date()
+    getStandardDate(date ?? "")
   );
   const [timeSlots, setTimeSlots] = React.useState([
     { start: "", end: "", submitted: false },