Fix everything

@types/nextjs-routes.d.ts

@@ -12,10 +12,11 @@ declare module "nextjs-routes" {
 
   export type Route =
     | StaticRoute<"/">
-    | StaticRoute<"/building">
     | DynamicRoute<"/event/[slug]/preview", { "slug": string }>
     | DynamicRoute<"/event/[slug]/settings", { "slug": string }>
-    | StaticRoute<"/rooms">;
+    | DynamicRoute<"/rejestracja/[participationSlug]", { "participationSlug": string }>
+    | DynamicRoute<"/rejestracja/[participationSlug]/[blockId]/[reservationId]", { "participationSlug": string; "blockId": string; "reservationId": string }>
+    | DynamicRoute<"/rejestracja/[participationSlug]/[blockId]/formularz", { "participationSlug": string; "blockId": string }>;
 
   interface StaticRoute<Pathname> {
     pathname: Pathname;

next.config.mjs

@@ -6,7 +6,11 @@ const withRoutes = nextRoutes();
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: ["cms.solvro.pl"],
+    remotePatterns: [
+      {
+        hostname: "cms.solvro.pl",
+      },
+    ],
   },
 };
 

package.json

@@ -1,6 +1,7 @@
 {
   "name": "my-app",
   "version": "0.1.0",
+  "type": "module",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/components/Block.tsx

@@ -0,0 +1,20 @@
+import { cva } from "class-variance-authority";
+import React, { type ComponentProps } from "react";
+
+export const blockCardVariants = cva(
+  "flex h-72 w-72 border-spacing-1 rounded-md border border-[#71717A] transition-all duration-300 ease-in-out hover:shadow-md",
+);
+
+export const BlockCard = ({
+  className,
+  ...props
+}: ComponentProps<"button">) => {
+  return (
+    <button
+      {...props}
+      className={blockCardVariants({
+        className,
+      })}
+    />
+  );
+};

src/lib/useIsClient.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+export const useIsClient = () => {
+  const [isClient, setIsClient] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return isClient;
+};

src/lib/useUserEvent.ts

@@ -0,0 +1,31 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { supabase } from "./supabase";
+import type { Tables } from "./types";
+
+export const useUserEvent = (
+  participationSlug: string,
+  initialData?: Tables<"events">,
+) => {
+  const query = useQuery({
+    queryKey: ["event-user", participationSlug],
+    initialData,
+    queryFn: async () => {
+      const event = await supabase
+        .from("events")
+        .select("*")
+        .eq("participantsSlug", participationSlug)
+        .single()
+        .throwOnError();
+
+      if (!event.data) {
+        throw new Error("Event not found");
+      }
+
+      return event.data;
+    },
+    refetchInterval: 1000,
+  });
+
+  return query;
+};

src/pages/event/[slug]/preview.tsx

@@ -11,6 +11,7 @@ import React, { type ReactNode, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { z } from "zod";
 
+import { BlockCard } from "@/components/Block";
 import { ReservationsTable } from "@/components/ContactTable";
 import { Layout } from "@/components/Layout";
 import { Button } from "@/components/ui/button";
@@ -335,9 +336,9 @@ const Preview = ({
         )}
 
         {currentBlocks?.map((block) => (
-          <button
+          <BlockCard
+            className="items-center justify-center hover:scale-[1.02]"
             key={block.blockId}
-            className="flex h-72 w-72 border-spacing-1 items-center justify-center rounded-md border border-[#71717A] transition-all duration-300 ease-in-out hover:scale-[1.02] hover:shadow-md"
             onClick={() => {
               void setBlockId(block.blockId);
             }}
@@ -350,7 +351,7 @@ const Preview = ({
                 </p>
               ) : null}
             </div>
-          </button>
+          </BlockCard>
         ))}
       </div>
     </Layout>

src/pages/event/[slug]/settings.tsx

@@ -2,7 +2,7 @@ import { CalendarIcon, ReloadIcon } from "@radix-ui/react-icons";
 import { useMutation } from "@tanstack/react-query";
 import { format } from "date-fns";
 import type { InferGetServerSidePropsType } from "next";
-import type { GetServerSidePropsContext } from "nextjs-routes";
+import { type GetServerSidePropsContext, route } from "nextjs-routes";
 import { parseAsString, useQueryState } from "nuqs";
 import { useEffect } from "react";
 import { toast } from "sonner";
@@ -33,6 +33,7 @@ import { supabase } from "@/lib/supabase";
 import { createSSRClient } from "@/lib/supabaseSSR";
 import type { TablesUpdate } from "@/lib/types";
 import { useEvent } from "@/lib/useEvent";
+import { useIsClient } from "@/lib/useIsClient";
 import { useZodForm } from "@/lib/useZodForm";
 import { cn } from "@/lib/utils";
 
@@ -96,6 +97,8 @@ export default function Dashboard({
     },
   });
 
+  const isClient = useIsClient();
+
   return (
     <Layout ownersSlug={ownersSlug}>
       <Tabs
@@ -263,17 +266,33 @@ export default function Dashboard({
             <div className="grid w-full max-w-sm items-center gap-1.5">
               <Label htmlFor="email">Link do wydarzenia</Label>
               <div className="flex w-full max-w-sm items-center space-x-2">
-                <Input
-                  type="url"
-                  disabled={true}
-                  className="cursor-copy"
-                  value={`https://eventownik.solvro.pl/event/${event.data?.participantsSlug}`}
-                />
+                {isClient ? (
+                  <Input
+                    type="url"
+                    disabled={true}
+                    className="cursor-copy"
+                    value={`${window.location.origin}${route({
+                      pathname: "/rejestracja/[participationSlug]",
+                      query: {
+                        participationSlug: encodeURIComponent(
+                          event.data?.participantsSlug ?? "",
+                        ),
+                      },
+                    })}`}
+                  />
+                ) : null}
                 <Button
                   onClick={() => {
                     void navigator.clipboard
                       .writeText(
-                        `https://eventownik.solvro.pl/event/${event.data?.participantsSlug}`,
+                        `${window.location.origin}${route({
+                          pathname: "/rejestracja/[participationSlug]",
+                          query: {
+                            participationSlug: encodeURIComponent(
+                              event.data?.participantsSlug ?? "",
+                            ),
+                          },
+                        })}`,
                       )
                       .then(() => {
                         toast("Link skopiowany do schowka");

src/pages/rejestracja/[participationSlug]/[blockId]/[reservationId].tsx

@@ -0,0 +1,106 @@
+import { CircleCheck } from "lucide-react";
+import type { InferGetServerSidePropsType } from "next";
+import Link from "next/link";
+import type { GetServerSidePropsContext } from "nextjs-routes";
+import React from "react";
+import { z } from "zod";
+
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { createSSRClient } from "@/lib/supabaseSSR";
+
+const Success = ({
+  block,
+  reservation,
+  event,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-stretch">
+      <div className="w-full bg-gray-200 pb-4 pt-8 text-center text-xl font-bold">
+        {event.name}
+      </div>
+      <div className="mt-8 flex flex-col items-center gap-4">
+        <CircleCheck strokeWidth={1.25} className="h-24 w-24 text-green-500" />
+
+        <Card className="w-80">
+          <CardHeader>
+            <CardTitle>Zapisano!</CardTitle>
+            <CardDescription>Podgląd zapisanych informacji</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-2">
+            <p>{block.name}</p>
+            <hr />
+            <p>
+              {reservation.firstName} {reservation.lastName}
+            </p>
+          </CardContent>
+        </Card>
+        <Link
+          className={buttonVariants({ className: "w-full" })}
+          href={{
+            pathname: "/rejestracja/[participationSlug]",
+            query: {
+              participationSlug: event.participantsSlug,
+              blockId: block.parentBlockId ?? undefined,
+            },
+          }}
+        >
+          Powrót
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export const getServerSideProps = async (
+  ctx: GetServerSidePropsContext<"/rejestracja/[participationSlug]/[blockId]/[reservationId]">,
+) => {
+  const blockId = z.string().parse(ctx.params.blockId);
+  const participationSlug = z.string().parse(ctx.params.participationSlug);
+  const reservationId = z.string().parse(ctx.params.reservationId);
+
+  const block = await createSSRClient(ctx)
+    .from("blocks")
+    .select("*")
+    .eq("blockId", blockId)
+    .single()
+    .throwOnError();
+
+  const event = await createSSRClient(ctx)
+    .from("events")
+    .select("*")
+    .eq("participantsSlug", participationSlug)
+    .single()
+    .throwOnError();
+
+  const reservation = await createSSRClient(ctx)
+    .from("reservations")
+    .select("*")
+    .eq("reservationId", reservationId)
+    .single()
+    .throwOnError();
+
+  if (!block.data || !event.data || !reservation.data) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: {
+      block: block.data,
+      blockId,
+      event: event.data,
+      reservation: reservation.data,
+      participationSlug,
+    },
+  };
+};
+
+export default Success;