decoupling auth from scheduler navigation

making url params the single source of truth to support guest and auth
flows

Author: martin0he

apps/searchneu/app/api/scheduler/saved-plans/route.ts

@@ -1,13 +1,13 @@
 import { verifyUser } from "@/lib/dal/audits";
+import { getTerm } from "@/lib/dal/terms";
 import {
   db,
-  savedPlansT,
   savedPlanCoursesT,
   savedPlanSectionsT,
+  savedPlansT,
 } from "@/lib/db";
-import { eq, and } from "drizzle-orm";
+import { and, eq } from "drizzle-orm";
 import { NextRequest } from "next/server";
-import { getTerm } from "@/lib/dal/terms";
 
 interface SavePlanSection {
   sectionId: number;
@@ -55,6 +55,11 @@ export async function POST(req: NextRequest) {
   }
 
   try {
+    const term = await getTerm(body.term);
+    if (!term) {
+      return Response.json({ error: "term not found" }, { status: 400 });
+    }
+
     // Auto-generate name if not provided
     let planName = body.name;
     if (!planName) {
@@ -64,17 +69,12 @@ export async function POST(req: NextRequest) {
         .where(
           and(
             eq(savedPlansT.userId, user.id),
-            eq(savedPlansT.termId, parseInt(body.term, 10)),
+            eq(savedPlansT.termId, term.id),
           ),
         );
       planName = `Plan ${existingPlans.length + 1}`;
     }
 
-    const term = await getTerm(body.term);
-    if (!term) {
-      return Response.json({ error: "term not found" }, { status: 400 });
-    }
-
     // Create the saved plan
     const [savedPlan] = await db
       .insert(savedPlansT)

apps/searchneu/app/scheduler/generator/loading.tsx

@@ -0,0 +1,36 @@
+export default function Loading() {
+  return (
+    <div className="bg-secondary flex h-full w-full gap-6 px-4 pt-4 xl:px-6">
+      {/* Left sidebar skeleton */}
+      <div className="bg-background h-[calc(100vh-72px)] w-75 shrink-0 animate-pulse rounded-lg p-6">
+        <div className="mb-6 flex gap-4">
+          <div className="bg-neu2 h-4 w-16 rounded" />
+          <div className="bg-neu2 h-4 w-12 rounded" />
+        </div>
+        <div className="space-y-3">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="bg-neu2 h-16 rounded-lg" />
+          ))}
+        </div>
+      </div>
+
+      {/* Calendar skeleton */}
+      <div className="flex min-w-0 flex-1 gap-6">
+        <div className="min-w-0 flex-1">
+          <div className="bg-neu2 mb-2 h-4 w-24 animate-pulse rounded" />
+          <div className="bg-background h-[calc(100vh-100px)] animate-pulse rounded-lg" />
+        </div>
+
+        {/* Right sidebar skeleton */}
+        <div className="w-48 shrink-0 space-y-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div
+              key={i}
+              className="bg-background h-24 animate-pulse rounded-lg"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/searchneu/app/scheduler/generator/page.tsx

@@ -1,68 +1,22 @@
 import { SchedulerWrapper } from "@/components/scheduler/generator/SchedulerWrapper";
-import { getTerms } from "@/lib/dal/terms";
+import { auth } from "@/lib/auth/auth";
 import { getCampuses } from "@/lib/dal/campuses";
 import { getNupaths } from "@/lib/dal/nupaths";
-
-import { db, nupathsT, savedPlansT } from "@/lib/db";
-import { auth } from "@/lib/auth/auth";
+import { getTerms } from "@/lib/dal/terms";
+import { db, nupathsT } from "@/lib/db";
 import { headers } from "next/headers";
-import { notFound, redirect } from "next/navigation";
-import { eq, and } from "drizzle-orm";
-
-export default async function Page({
-  searchParams,
-}: {
-  searchParams: Promise<{
-    planId: string;
-  }>;
-}) {
-  const session = await auth.api.getSession({
-    headers: await headers(),
-  });
-
-  if (!session) {
-    redirect("/");
-  }
-
-  const params = await searchParams;
-  const planId = params.planId ? parseInt(params.planId) : null;
-
-  if (!planId || isNaN(planId)) {
-    return <div>Invalid or missing plan ID</div>;
-  }
-
-  let plan;
-
-  try {
-    plan = await db.query.savedPlansT.findFirst({
-      where: and(
-        eq(savedPlansT.id, planId),
-        eq(savedPlansT.userId, session.user.id),
-      ),
-    });
-  } catch (error) {
-    console.error("Error loading plan:", error);
-    return notFound();
-  }
-
-  if (!plan) {
-    return notFound();
-  }
-
-  // Fetch available NUPath options
-  const nupathOptions = await db
-    .selectDistinct({ short: nupathsT.short, name: nupathsT.name })
-    .from(nupathsT)
-    .then((c) => c.map((e) => ({ label: e.name, value: e.short })));
-
-  // Fetch terms from the db
-  const terms = await getTerms();
-
-  // Fetch campuses for the mapping
-  const campuses = await getCampuses();
 
-  // Fetch nupaths for the mapping
-  const nupaths = await getNupaths();
+export default async function Page() {
+  const [session, nupathOptions, terms, campuses, nupaths] = await Promise.all([
+    auth.api.getSession({ headers: await headers() }),
+    db
+      .selectDistinct({ short: nupathsT.short, name: nupathsT.name })
+      .from(nupathsT)
+      .then((c) => c.map((e) => ({ label: e.name, value: e.short }))),
+    getTerms(),
+    getCampuses(),
+    getNupaths(),
+  ]);
 
   return (
     <div className="bg-secondary h-full w-full px-4 pt-4 xl:px-6">
@@ -71,6 +25,7 @@ export default async function Page({
         terms={terms}
         campuses={campuses}
         nupaths={nupaths}
+        isLoggedIn={!!session?.user?.id}
       />
     </div>
   );

apps/searchneu/app/scheduler/page.tsx

@@ -1,11 +1,10 @@
-import { getTerms } from "@/lib/dal/terms";
-import { getCampuses } from "@/lib/dal/campuses";
-import { getNupaths } from "@/lib/dal/nupaths";
 import { DashboardClient } from "@/components/scheduler/dashboard/Dashboard";
 import { auth } from "@/lib/auth/auth";
-import { headers } from "next/headers";
-import { redirect } from "next/navigation";
+import { getCampuses } from "@/lib/dal/campuses";
+import { getNupaths } from "@/lib/dal/nupaths";
+import { getTerms } from "@/lib/dal/terms";
 import { unstable_cache } from "next/cache";
+import { headers } from "next/headers";
 
 const cachedCampuses = unstable_cache(getCampuses, [], {
   revalidate: 3600,
@@ -18,23 +17,19 @@ const cachedNupaths = unstable_cache(getNupaths, [], {
 });
 
 export default async function Dashboard() {
-  const session = await auth.api.getSession({
-    headers: await headers(),
-  });
-
-  if (!session) {
-    redirect("/");
-  }
-
   const terms = getTerms();
   const campuses = cachedCampuses();
   const nupaths = cachedNupaths();
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
 
   return (
     <DashboardClient
       termsPromise={terms}
       campusesPromise={campuses}
       nupathsPromise={nupaths}
+      isLoggedIn={!!session}
     />
   );
 }

apps/searchneu/components/navigation/Footer.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import Link from "next/link";
-import { Logo } from "../icons/logo";
 import { Footskie } from "../icons/Footskie";
+import { Logo } from "../icons/logo";
 
 export function LinkColumn({
   name,

apps/searchneu/components/navigation/Header.tsx

@@ -1,12 +1,12 @@
-import Link from "next/link";
-import { Logo } from "../icons/logo";
-import { UserIcon } from "./UserMenu";
 import { graduateFlag, roomsFlag } from "@/lib/flags";
+import Link from "next/link";
 import { Suspense } from "react";
+import { Logo } from "../icons/logo";
 import { NavBar } from "./NavBar";
 import { MobileNav } from "./MobileNav";
 import { auth } from "@/lib/auth/auth";
 import { headers } from "next/headers";
+import { UserIcon } from "./UserMenu";
 
 export async function Header() {
   const enableRoomsPage = roomsFlag();

apps/searchneu/components/navigation/NavBar.tsx

@@ -1,18 +1,18 @@
 "use client";
+import { cn } from "@/lib/cn";
+import { FlagValues } from "flags/react";
 import {
+  Bell,
+  BookMarked,
+  Calendar,
   CircleQuestionMark,
   DoorOpen,
   GraduationCapIcon,
-  Bell,
-  BookMarked,
 } from "lucide-react";
-import { type ReactNode, use } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { FlagValues } from "flags/react";
+import { type ReactNode, use } from "react";
 import { SheetClose } from "../ui/sheet";
-import { SchedulerButton } from "./SchedulerButton";
-import { cn } from "@/lib/cn";
 
 export function NavBar({
   flags,
@@ -70,7 +70,14 @@ export function NavBar({
         </Link>
       </LinkWrapper>
       <LinkWrapper mobileNav={closeable}>
-        <SchedulerButton pathname={pathname} />
+        <Link
+          href="/scheduler"
+          data-active={pathname === "/scheduler"}
+          className="bg-neu1 data-[active=true]:border-neu3 flex w-full cursor-pointer items-center justify-center gap-2 rounded-full border-1 p-2 px-4 text-sm"
+        >
+          <Calendar className="size-4" />
+          Scheduler
+        </Link>
       </LinkWrapper>
       <LinkWrapper mobileNav={closeable}>
         <Link

apps/searchneu/components/navigation/SchedulerButton.tsx

@@ -1,17 +1,17 @@
 "use client";
 
+import { authClient } from "@/lib/auth/auth-client";
+import { useState } from "react";
+import { Iconskie } from "../icons/Iconskie";
 import { SignIn } from "../SignIn";
+import { Avatar, AvatarFallback } from "../ui/avatar";
 import { Button } from "../ui/button";
-import { useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
-import { Avatar, AvatarFallback } from "../ui/avatar";
-import { Iconskie } from "../icons/Iconskie";
-import { authClient } from "@/lib/auth/auth-client";
 
 export function UserIcon() {
   const [showSI, setShowSI] = useState(false);
@@ -52,7 +52,10 @@ function UserMenu() {
         </DropdownMenuTrigger>
         <DropdownMenuContent>
           <DropdownMenuItem
-            onClick={() => authClient.signOut()}
+            onClick={async () => {
+              await authClient.signOut();
+              window.location.reload();
+            }}
             variant="destructive"
           >
             Sign Out