Add nuqs and tabs to switch between events user was reserved and in waitlist for in profile page

apps/web/package.json

@@ -54,6 +54,7 @@
     "next": "^15.3.6",
     "next-plausible": "^3.12.4",
     "next-themes": "^0.4.6",
+    "nuqs": "^2.8.9",
     "qrcode.react": "^4.0.0",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",

apps/web/src/app/NuqsProvider.tsx

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from "react"
+import { NuqsAdapter } from "nuqs/adapters/next/app"
+
+export const NuqsProvider = ({ children }: PropsWithChildren) => {
+  return <NuqsAdapter>{children}</NuqsAdapter>
+}

apps/web/src/app/layout.tsx

@@ -4,14 +4,15 @@ import { Navbar } from "@/components/Navbar/Navbar"
 import { QueryProvider } from "@/utils/trpc/QueryProvider"
 import { SessionProvider } from "@dotkomonline/oauth2/react"
 import { cn } from "@dotkomonline/ui"
-import { ThemeProvider } from "next-themes"
-import { Figtree, Inter } from "next/font/google"
-import type { PropsWithChildren } from "react"
-import "../globals.css"
 import { setDefaultOptions as setDateFnsDefaultOptions } from "date-fns"
 import { nb } from "date-fns/locale"
 import type { Metadata } from "next"
 import PlausibleProvider from "next-plausible"
+import { ThemeProvider } from "next-themes"
+import { Figtree, Inter } from "next/font/google"
+import type { PropsWithChildren } from "react"
+import "../globals.css"
+import { NuqsProvider } from "./NuqsProvider"
 
 setDateFnsDefaultOptions({ locale: nb })
 
@@ -43,11 +44,13 @@ export default async function RootLayout({ children }: PropsWithChildren) {
           <SessionProvider session={session}>
             <QueryProvider>
               <ThemeProvider defaultTheme="system" enableSystem attribute="data-theme">
-                <div className="min-h-screen flex flex-col gap-8 w-full max-w-screen-xl mx-auto px-4 lg:px-12">
-                  <Navbar />
-                  <main className="grow">{children}</main>
-                  <Footer />
-                </div>
+                <NuqsProvider>
+                  <div className="min-h-screen flex flex-col gap-8 w-full max-w-screen-xl mx-auto px-4 lg:px-12">
+                    <Navbar />
+                    <main className="grow">{children}</main>
+                    <Footer />
+                  </div>
+                </NuqsProvider>
               </ThemeProvider>
             </QueryProvider>
           </SessionProvider>

apps/web/src/app/profil/[profileSlug]/ProfilePage.tsx

@@ -9,27 +9,31 @@ import { useTRPC } from "@/utils/trpc/client"
 import { useFullPathname } from "@/utils/use-full-pathname"
 import { useSession } from "@dotkomonline/oauth2/react"
 import {
-  type Membership,
-  type VisiblePersonalMarkDetails,
   createGroupPageUrl,
   findActiveMembership,
   getMembershipTypeName,
   getSpecializationName,
+  type Membership,
+  type VisiblePersonalMarkDetails,
 } from "@dotkomonline/types"
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
   Button,
+  cn,
   RadialProgress,
   ReadMore,
   RichText,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
   Text,
   Title,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-  cn,
 } from "@dotkomonline/ui"
 import {
   capitalizeFirstLetter,
@@ -57,12 +61,24 @@ import { useQueries } from "@tanstack/react-query"
 import { differenceInMilliseconds, formatDate, formatDistanceToNowStrict, isPast } from "date-fns"
 import { nb } from "date-fns/locale"
 import Link from "next/link"
-import { notFound, useParams, useSearchParams } from "next/navigation"
+import { notFound, useParams, useRouter, useSearchParams } from "next/navigation"
 import { type ElementType, useMemo } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { z } from "zod"
 import { PenaltyDialog } from "./components/PenaltyDialog"
 import SkeletonProfilePage from "./loading"
 import { useIsAdminQuery } from "./queries"
 
+const EventListTabSchema = z.enum(["reserved", "waitlist"])
+type EventListTab = z.infer<typeof EventListTabSchema>
+
+const EVENT_LIST_TAB_QUERY_PARAM_KEY = "eventListTab"
+const eventListTabFormSchema = z.object({
+  eventListTab: EventListTabSchema.default("reserved"),
+})
+
+export type EventListTabFormSchema = z.infer<typeof eventListTabFormSchema>
+
 const UserProp = (props: { label: string; value: string | number | null; icon: ElementType }) => {
   const Icon = props.icon
 
@@ -195,6 +211,8 @@ export function ProfilePage() {
   const trpc = useTRPC()
   const session = useSession()
   const fullPathname = useFullPathname()
+  const router = useRouter()
+  const searchParams = useSearchParams()
 
   const [userResult] = useQueries({
     queries: [trpc.user.findByProfileSlug.queryOptions(profileSlug)],
@@ -210,7 +228,9 @@ export function ProfilePage() {
   const [{ data: groups }, { data: futureEventWithAttendances }, { data: marks }, { data: eventsMissingFeedback }] =
     useQueries({
       queries: [
-        trpc.group.allByMember.queryOptions(user?.id ?? "", { enabled: isLoggedIn && Boolean(user?.id) }),
+        trpc.group.allByMember.queryOptions(user?.id ?? "", {
+          enabled: isLoggedIn && Boolean(user?.id),
+        }),
         trpc.event.allSummariesByAttendingUserId.queryOptions(
           {
             id: user?.id ?? "",
@@ -239,6 +259,25 @@ export function ProfilePage() {
     enabled: isLoggedIn && Boolean(user?.id),
   })
 
+  const futureEventsReservedFor =
+    futureEventWithAttendances?.items.filter(
+      (eventWithAttendance) => eventWithAttendance.attendance?.currentUserAttendee?.reserved
+    ) ?? []
+  const pastEventsReservedFor =
+    pastEventWithAttendances.filter(
+      (eventWithAttendance) => eventWithAttendance.attendance?.currentUserAttendee?.reserved
+    ) ?? []
+
+  const futureEventsInWaitlistFor =
+    futureEventWithAttendances?.items.filter(
+      (eventWithAttendance) => !eventWithAttendance.attendance?.currentUserAttendee?.reserved
+    ) ?? []
+
+  const pastEventsInWaitlistFor =
+    pastEventWithAttendances.filter(
+      (eventWithAttendance) => !eventWithAttendance.attendance?.currentUserAttendee?.reserved
+    ) ?? []
+
   const allGroups = useMemo(
     () =>
       groups
@@ -254,6 +293,19 @@ export function ProfilePage() {
 
   const { isAdmin } = useIsAdminQuery()
 
+  const eventListTabQueryParam =
+    EventListTabSchema.safeParse(searchParams.get(EVENT_LIST_TAB_QUERY_PARAM_KEY)).data ?? "reserved"
+
+  const eventTabsForm = useForm<EventListTabFormSchema>({
+    defaultValues: {
+      eventListTab: eventListTabQueryParam,
+    },
+  })
+
+  const submitEventTabsForm = eventTabsForm.handleSubmit(({ eventListTab }) => {
+    router.replace(`?eventListTab=${eventListTab}`, { scroll: false })
+  })
+
   if (user === undefined || userLoading) {
     return <SkeletonProfilePage />
   }
@@ -328,7 +380,12 @@ export function ProfilePage() {
               <Tooltip delayDuration={100}>
                 <TooltipTrigger>
                   <Text>
-                    {capitalizeFirstLetter(formatDistanceToNowStrict(user.createdAt, { locale: nb }))} i Online
+                    {capitalizeFirstLetter(
+                      formatDistanceToNowStrict(user.createdAt, {
+                        locale: nb,
+                      })
+                    )}{" "}
+                    i Online
                   </Text>
                 </TooltipTrigger>
                 <TooltipContent>
@@ -464,7 +521,9 @@ export function ProfilePage() {
                     <Text className="text-lg">{event.title}</Text>
                     <Text className="text-sm text-wrap overflow-hidden line-clamp-2">
                       Gi tilbakemelding på {event.title} som du deltok på{" "}
-                      {formatDate(event.start, "dd. MMM yyyy", { locale: nb })}
+                      {formatDate(event.start, "dd. MMM yyyy", {
+                        locale: nb,
+                      })}
                     </Text>
                     <Text className="text-sm text-red-400">
                       Fristen for å svare er{" "}
@@ -510,12 +569,55 @@ export function ProfilePage() {
 
         {isLoggedIn ? (
           futureEventWithAttendances !== undefined && pastEventWithAttendances !== undefined ? (
-            <EventList
-              futureEventWithAttendances={futureEventWithAttendances.items}
-              pastEventWithAttendances={pastEventWithAttendances}
-              onLoadMore={fetchNextPage}
-              viewMode="CHRONOLOGICAL"
-            />
+            <form
+              onSubmit={(event) => {
+                event.preventDefault()
+                void submitEventTabsForm()
+              }}
+            >
+              <Controller
+                control={eventTabsForm.control}
+                name="eventListTab"
+                render={({ field }) => (
+                  <Tabs
+                    value={field.value}
+                    onValueChange={(value) => {
+                      field.onChange(value as EventListTab)
+                      void submitEventTabsForm()
+                    }}
+                  >
+                    <TabsList className="w-full sm:w-fit">
+                      <TabsTrigger className="w-full sm:w-fit" value="reserved">
+                        Påmeldt
+                      </TabsTrigger>
+                      <TabsTrigger className="w-full sm:w-fit" value="waitlist">
+                        I venteliste
+                      </TabsTrigger>
+                    </TabsList>
+
+                    <TabsContent value="reserved" className="p-0 border-none mt-4">
+                      <EventList
+                        futureEventWithAttendances={futureEventsReservedFor}
+                        pastEventWithAttendances={pastEventsReservedFor}
+                        onLoadMore={fetchNextPage}
+                        viewMode="CHRONOLOGICAL"
+                      />
+                    </TabsContent>
+
+                    <TabsContent value="waitlist" className="p-0 border-none mt-4">
+                      <div>
+                        <EventList
+                          futureEventWithAttendances={futureEventsInWaitlistFor}
+                          pastEventWithAttendances={pastEventsInWaitlistFor}
+                          onLoadMore={fetchNextPage}
+                          viewMode="CHRONOLOGICAL"
+                        />
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                )}
+              />
+            </form>
           ) : (
             <div className="flex flex-col gap-1">
               <EventListItemSkeleton />