Merge remote-tracking branch 'origin/dev' into feat/refactor-user-schema

apps/web/src/app/admin/events/new/page.tsx

@@ -1,4 +1,4 @@
-import NewEventForm from "@/components/admin/events/NewEventForm";
+import NewEventForm from "@/components/events/admin/NewEventForm";
 
 export default function Page() {
 	const defaultDate = new Date();

apps/web/src/app/admin/events/page.tsx

@@ -1,12 +1,11 @@
-import { db } from "db";
-import { DataTable } from "@/components/admin/events/EventDataTable";
-import { columns } from "@/components/admin/events/EventColumns";
+import { EventDataTable } from "@/components/events/shared/EventDataTable";
+import { columns } from "@/components/events/shared/EventColumns";
 import { Button } from "@/components/shadcn/ui/button";
 import { PlusCircle } from "lucide-react";
 import Link from "next/link";
-
+import { getAllEvents } from "db/functions";
 export default async function Page() {
-	const events = await db.query.events.findMany();
+	const events = await getAllEvents();
 
 	return (
 		<div className="mx-auto max-w-7xl px-5 pt-44">
@@ -17,7 +16,7 @@ export default async function Page() {
 							Events
 						</h2>
 						<p className="text-sm text-muted-foreground">
-							{events.length} Event{events.length != 1 ? "s" : ""}
+							{events.length} Event{events.length != 1 && "s"}
 						</p>
 					</div>
 				</div>
@@ -30,7 +29,7 @@ export default async function Page() {
 					</Link>
 				</div>
 			</div>
-			<DataTable columns={columns} data={events} />
+			<EventDataTable columns={columns} data={events} />
 		</div>
 	);
 }

apps/web/src/app/api/admin/events/create/route.ts

@@ -9,6 +9,7 @@ import { z } from "zod";
 import superjson from "superjson";
 import c from "config";
 
+// Make this a server action
 export async function POST(req: Request) {
 	const { userId } = auth();
 
@@ -25,9 +26,8 @@ export async function POST(req: Request) {
 		return new Response("Unauthorized", { status: 401 });
 	}
 
-	// console.log(await req.json());
 	const body = superjson.parse(await req.text());
-	const parsedBody = newEventValidator.safeParse(body);
+	const parsedBody = newEventFormSchema.safeParse(body);
 
 	if (!parsedBody.success) {
 		return new Response("Malformed request body.", { status: 400 });

apps/web/src/app/dash/layout.tsx

@@ -45,12 +45,15 @@ export default async function DashLayout({ children }: DashLayoutProps) {
 				<ClientToast />
 				<div className="grid h-16 w-full grid-cols-2 bg-nav px-5">
 					<div className="flex items-center gap-x-4">
-						<Image
-							src={c.icon.svg}
-							alt={c.hackathonName + " Logo"}
-							width={32}
-							height={32}
-						/>
+						<Link href="/">
+							<Image
+								src={c.icon.svg}
+								alt={c.hackathonName + " Logo"}
+								width={32}
+								height={32}
+							/>
+						</Link>
+
 						<div className="h-[45%] w-[2px] rotate-[25deg] bg-muted-foreground" />
 						<h2 className="font-bold tracking-tight">Dashboard</h2>
 					</div>
@@ -81,7 +84,9 @@ export default async function DashLayout({ children }: DashLayoutProps) {
 						</Link>
 						<ProfileButton />
 					</div>
-					<div className="flex items-center justify-end gap-x-4 md:hidden"></div>
+					<div className="flex items-center justify-end gap-x-4 md:hidden">
+						<ProfileButton />
+					</div>
 				</div>
 				<div className="flex h-12 w-full border-b border-b-border bg-nav px-5">
 					{Object.entries(c.dashPaths.dash).map(([name, path]) => (

apps/web/src/app/dash/schedule/page.tsx

@@ -1,21 +1,11 @@
-import c from "config";
-import Day from "@/components/schedule/Day";
-import { db } from "db";
-import { format, compareAsc } from "date-fns";
-import { type ReactNode } from "react";
-import { formatInTimeZone } from "date-fns-tz";
-import { redirect } from "next/navigation";
-
-export default async function Page() {
-	const events = await db.query.events.findMany();
-
+import { Suspense } from "react";
+import UserScheduleView from "@/components/schedule/UserScheduleView";
+import Loading from "@/components/shared/Loading";
+export default function Page() {
 	return (
-		<main className="mx-auto mt-16 flex min-h-[70%] w-full max-w-5xl flex-col items-center">
-			<h1 className="text-center text-4xl font-black">
-				Bug with Scheduling was found. Fix Coming soon!
-			</h1>
-			<h3 className="text-xl font-bold">- Christian</h3>
-		</main>
+		<Suspense fallback={<Loading />}>
+			<UserScheduleView />
+		</Suspense>
 	);
 }
 

apps/web/src/app/schedule/[id]/page.tsx

@@ -2,7 +2,7 @@ import { db } from "db";
 import { eq } from "db/drizzle";
 import { events } from "db/schema";
 import FullScreenMessage from "@/components/shared/FullScreenMessage";
-import EventFull from "@/components/schedule/EventFull";
+import EventDetails from "@/components/events/admin/EventDetails";
 import Navbar from "@/components/shared/Navbar";
 
 export default async function Page({ params }: { params: { id: string } }) {
@@ -33,7 +33,7 @@ export default async function Page({ params }: { params: { id: string } }) {
 	return (
 		<>
 			<Navbar />
-			<EventFull event={event} />
+			<EventDetails event={event} />
 		</>
 	);
 }

apps/web/src/components/schedule/EventFull.tsx → apps/web/src/components/events/admin/EventDetails.tsx

@@ -1,15 +1,17 @@
-import { events } from "db/schema";
-import { InferModel } from "db/drizzle";
 import c from "config";
 import { Badge } from "@/components/shadcn/ui/badge";
 import Balancer from "react-wrap-balancer";
 import { formatInTimeZone } from "date-fns-tz";
+import { getClientTimeZone } from "@/lib/utils/client/shared";
+import { EventType } from "@/lib/types/events";
+import { headers } from "next/headers";
+import { VERCEL_IP_TIMEZONE_HEADER_KEY } from "@/lib/constants";
+
+export default function EventDetails({ event }: { event: EventType }) {
+	const userTimeZoneHeaderKey = headers().get(VERCEL_IP_TIMEZONE_HEADER_KEY);
+
+	const userTimeZone = getClientTimeZone(userTimeZoneHeaderKey);
 
-export default function EventFull({
-	event,
-}: {
-	event: InferModel<typeof events>;
-}) {
 	return (
 		<div className="relative w-screen">
 			<div
@@ -37,13 +39,13 @@ export default function EventFull({
 					</Badge>
 					<p className="text-xs font-bold md:text-sm">{`${formatInTimeZone(
 						event.startTime,
-						c.hackathonTimezone,
+						userTimeZone,
 						"EEEE MMMM do",
 					)}, ${formatInTimeZone(
 						event.startTime,
-						c.hackathonTimezone,
+						userTimeZone,
 						"h:mm a",
-					)} - ${formatInTimeZone(event.endTime, c.hackathonTimezone, "h:mm a")}`}</p>
+					)} - ${formatInTimeZone(event.endTime, userTimeZone, "h:mm a")}`}</p>
 				</div>
 
 				<h1 className="mb-2 text-7xl font-black">

apps/web/src/components/admin/events/NewEventForm.tsx → apps/web/src/components/events/admin/NewEventForm.tsx

@@ -25,45 +25,43 @@ import { Textarea } from "@/components/shadcn/ui/textarea";
 import c from "config";
 import { DateTimePicker } from "@/components/shadcn/ui/date-time-picker/date-time-picker";
 import { parseAbsolute, getLocalTimeZone } from "@internationalized/date";
-import { newEventValidator } from "@/validators/shared/newEvent";
 import { zpostSafe } from "@/lib/utils/client/zfetch";
 import { BasicRedirValidator } from "@/validators/shared/basicRedir";
 import { useState } from "react";
-import { Shell } from "lucide-react";
+import { LoaderPinwheel } from "lucide-react";
 import { useRouter } from "next/navigation";
-
-interface NewEventFormProps {
-	defaultDate: Date;
-}
-
-const formSchema = newEventValidator.merge(
-	z.object({
-		type: z.enum(Object.keys(c.eventTypes) as any),
-	}),
-);
+import { ONE_HOUR_IN_MILLISECONDS } from "@/lib/constants";
+import { NewEventFormProps } from "@/lib/types/events";
+import { newEventFormSchema } from "@/validators/event";
+import { useAction } from "next-safe-action/hook";
+import { eventType } from "@/lib/utils/shared/types";
+import { useEffect } from "react";
+import { ThreeCircles } from "react-loader-spinner";
 
 export default function NewEventForm({ defaultDate }: NewEventFormProps) {
 	const [loading, setLoading] = useState(false);
 	const router = useRouter();
-	const form = useForm<z.infer<typeof formSchema>>({
-		resolver: zodResolver(formSchema),
+	const userLocalTimeZone = getLocalTimeZone();
+
+	const form = useForm<z.infer<typeof newEventFormSchema>>({
+		resolver: zodResolver(newEventFormSchema),
 		defaultValues: {
 			title: "",
 			description: "",
 			type: "" as any,
 			host: "",
 			startTime: defaultDate,
-			endTime: defaultDate,
+			endTime: new Date(defaultDate.getTime() + ONE_HOUR_IN_MILLISECONDS),
 		},
 	});
 
-	async function onSubmit(values: z.infer<typeof formSchema>) {
+	async function onSubmit(values: z.infer<typeof newEventFormSchema>) {
 		setLoading(true);
 		const res = await zpostSafe({
 			url: "/api/admin/events/create",
 			body: values,
 			superReq: true,
-			vReq: formSchema,
+			vReq: newEventFormSchema,
 			vRes: BasicRedirValidator,
 		});
 		setLoading(false);
@@ -91,8 +89,7 @@ export default function NewEventForm({ defaultDate }: NewEventFormProps) {
 								<Input {...field} />
 							</FormControl>
 							<FormDescription>
-								Generally its best to keep this short and
-								consise
+								Keep title short and concise
 							</FormDescription>
 							<FormMessage />
 						</FormItem>
@@ -105,10 +102,7 @@ export default function NewEventForm({ defaultDate }: NewEventFormProps) {
 						<FormItem>
 							<FormLabel>Description</FormLabel>
 							<FormControl>
-								<Textarea
-									placeholder="You can also include any resources / links that would be helpful for the event here!"
-									{...field}
-								/>
+								<Textarea {...field} />
 							</FormControl>
 							<FormMessage />
 						</FormItem>
@@ -178,18 +172,27 @@ export default function NewEventForm({ defaultDate }: NewEventFormProps) {
 										!!field.value
 											? parseAbsolute(
 													field.value.toISOString(),
-													getLocalTimeZone(),
+													userLocalTimeZone,
 												)
 											: null
 									}
 									onChange={(date) => {
-										field.onChange(
-											!!date
-												? date.toDate(
-														getLocalTimeZone(),
-													)
-												: null,
-										);
+										const newDate = !!date
+											? date.toDate(userLocalTimeZone)
+											: null;
+										field.onChange(newDate);
+										const isEventStartBeforeEnd =
+											newDate &&
+											newDate > form.getValues("endTime");
+										if (isEventStartBeforeEnd) {
+											form.setValue(
+												"endTime",
+												new Date(
+													newDate.getTime() +
+														ONE_HOUR_IN_MILLISECONDS,
+												),
+											);
+										}
 									}}
 									shouldCloseOnSelect={false}
 									granularity={"minute"}
@@ -210,18 +213,28 @@ export default function NewEventForm({ defaultDate }: NewEventFormProps) {
 										!!field.value
 											? parseAbsolute(
 													field.value.toISOString(),
-													getLocalTimeZone(),
+													userLocalTimeZone,
 												)
 											: null
 									}
 									onChange={(date) => {
-										field.onChange(
-											!!date
-												? date.toDate(
-														getLocalTimeZone(),
-													)
-												: null,
-										);
+										const newDate = !!date
+											? date.toDate(userLocalTimeZone)
+											: null;
+										field.onChange(newDate);
+										const isEventEndBeforeStart =
+											newDate &&
+											newDate <
+												form.getValues("startTime");
+										if (isEventEndBeforeStart) {
+											form.setValue(
+												"startTime",
+												new Date(
+													newDate.getTime() -
+														ONE_HOUR_IN_MILLISECONDS,
+												),
+											);
+										}
 									}}
 									shouldCloseOnSelect={false}
 									granularity={"minute"}
@@ -234,7 +247,16 @@ export default function NewEventForm({ defaultDate }: NewEventFormProps) {
 				</div>
 				{loading ? (
 					<p className="flex justify-center gap-x-1">
-						Creating Event <Shell className="animate-spin" />
+						Creating Event{" "}
+						<ThreeCircles
+							visible={true}
+							height="20"
+							width="20"
+							color="#4fa94d"
+							ariaLabel="three-circles-loading"
+							wrapperStyle={{}}
+							wrapperClass=""
+						/>
 					</p>
 				) : (
 					<Button type="submit">Create Event</Button>

apps/web/src/components/admin/events/EventColumns.tsx → apps/web/src/components/events/shared/EventColumns.tsx

@@ -1,13 +1,11 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { z } from "zod";
-import { createSelectSchema } from "drizzle-zod";
-import { events } from "db/schema";
 import Link from "next/link";
 import { Button } from "@/components/shadcn/ui/button";
 import { Badge } from "@/components/shadcn/ui/badge";
 import c from "config";
+import { eventTableValidatorType } from "@/lib/types/events";
 
 const eventValidator = createSelectSchema(events);
 
@@ -42,7 +40,7 @@ export const columns: ColumnDef<eventTableValidatorType>[] = [
 		accessorKey: "startTime",
 		header: "Start",
 		cell: ({ row }) => (
-			<span suppressHydrationWarning={true}>
+			<span>
 				{new Date(row.original.startTime).toLocaleDateString() + " "}
 				{new Date(row.original.startTime).toLocaleTimeString("en-US", {
 					hour: "2-digit",
@@ -55,7 +53,7 @@ export const columns: ColumnDef<eventTableValidatorType>[] = [
 		accessorKey: "endTime",
 		header: "End",
 		cell: ({ row }) => (
-			<span suppressHydrationWarning={true}>
+			<span>
 				{new Date(row.original.endTime).toLocaleDateString() + " "}
 				{new Date(row.original.endTime).toLocaleTimeString("en-US", {
 					hour: "2-digit",