Moviendo la paigna de tickets a full client side

app/(transition)/(root)/eventos/[id]/tickets/page.tsx

@@ -1,16 +1,14 @@
-import { getApolloClientForRSC } from "@/api/ApolloClientForRSC";
+"use client";
+import { AnimatePresence, motion } from "framer-motion";
+import { useParams } from "next/navigation";
+import { Suspense } from "react";
+
 import { EventStatus } from "@/api/gql/graphql";
 import { Badge } from "@/components/ui/badge";
-import {
-  GetEventAndTicketsDocument,
-  GetEventAndTicketsQuery,
-} from "@/features/TicketsSaleFlow/graphql/getEventAndTickets.generated";
+import { useGetEventAndTicketsSuspenseQuery } from "@/features/TicketsSaleFlow/graphql/getEventAndTickets.generated";
+import { TicketsSaleFlowSkeleton } from "@/features/TicketsSaleFlow/skeleton";
 import Tickets from "@/features/TicketsSaleFlow/ticketSaleFlow";
 
-interface SearchParams {
-  id: string;
-}
-
 const StatusBadge = ({
   status,
   hasFinished,
@@ -27,55 +25,57 @@ const StatusBadge = ({
   return null;
 };
 
-export default async function EventPage({
-  searchParams,
-}: {
-  searchParams: SearchParams;
-}) {
-  const c = getApolloClientForRSC();
-  const { id } = searchParams;
-
-  const { data, error } = await c.query<GetEventAndTicketsQuery>({
-    query: GetEventAndTicketsDocument,
+const LoadTickets = ({ id }: { id: string | null }) => {
+  const { data, error } = useGetEventAndTicketsSuspenseQuery({
     variables: {
-      input: id,
+      input: id!,
     },
+    skip: !id,
   });
 
-  if (error) {
-    return <h2>Ocurrió un error cargando el evento</h2>;
-  }
-
   const { event } = data;
-
-  if (!event) {
-    return <h2>No pudimos encontrar el evento que estás buscando</h2>;
+  if (!event || error) {
+    throw new Error("No pudimos encontrar el evento que estás buscando");
   }
-
-  const { name, tickets = [], status: eventStatus } = event;
-
+  const isActive = event.status === EventStatus.Active;
   const parsedStartTimeStamp = new Date(
     event.startDateTime as string,
   ).getTime();
-  const isActive = event.status === EventStatus.Active;
   const hasFinished = parsedStartTimeStamp <= Date.now();
   return (
-    <main className="flex w-full max-w-[1360px] flex-col gap-10 px-6 py-12">
+    <>
       <h1 className="text-center text-5xl font-extrabold">
         <span className="inline-flex flex-wrap items-center justify-center gap-4">
-          {name}
-          <StatusBadge status={eventStatus} hasFinished={hasFinished} />
+          {event.name}
+          <StatusBadge status={event.status} hasFinished={hasFinished} />
         </span>
       </h1>
-      {/* <h2 className="mb-8 text-center text-2xl">
-          {formattedStartDate}{" "}
-          {formattedEndDate ? `- ${formattedEndDate}` : null}
-        </h2> */}
       <Tickets
         isActive={isActive}
         hasFinished={hasFinished}
-        tickets={tickets}
+        tickets={event.tickets}
       />
+    </>
+  );
+};
+
+export default function EventPage() {
+  const { id } = useParams<{ id: string }>();
+  return (
+    <main className="flex w-full max-w-[1360px] px-6 py-12">
+      <AnimatePresence mode="popLayout">
+        <Suspense fallback={<TicketsSaleFlowSkeleton />}>
+          <motion.div
+            className="flex flex-col gap-10"
+            key="lazyComponent"
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -50 }}
+          >
+            <LoadTickets id={id} />
+          </motion.div>
+        </Suspense>
+      </AnimatePresence>
     </main>
   );
 }

src/api/ApolloWrapper.tsx

@@ -11,8 +11,8 @@ import { setContext } from "@apollo/client/link/context";
 import { onError } from "@apollo/client/link/error";
 import { RetryLink } from "@apollo/client/link/retry";
 
-import { useSetTokenRef, useTokenRef } from "../utils/supabase/AuthProvider";
-import { supabaseClient } from "../utils/supabase/client";
+import { useSetTokenRef, useTokenRef } from "@/utils/supabase/AuthProvider";
+import { supabaseClient } from "@/utils/supabase/client";
 
 const retryLink = new RetryLink();
 

src/api/gql/graphql.ts

@@ -610,6 +610,10 @@ export enum SearchableUserTags {
   Donor = 'DONOR'
 }
 
+export enum ServiceErrors {
+  Unauthenticated = 'UNAUTHENTICATED'
+}
+
 /** Representation of a tag. Tags can be associated to many things. An event, a community, etc. */
 export type Tag = {
   description: Maybe<Scalars['String']['output']>;

src/api/gql/schema.gql

@@ -461,6 +461,10 @@ enum SearchableUserTags {
   DONOR
 }
 
+enum ServiceErrors {
+  UNAUTHENTICATED
+}
+
 """
 Representation of a tag. Tags can be associated to many things. An event, a community, etc.
 """

src/features/TicketsSaleFlow/skeleton.tsx

@@ -0,0 +1,34 @@
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export const TicketsSaleFlowSkeleton = () => {
+  return (
+    <div className="flex w-full flex-col gap-10">
+      <h1 className="text-center text-5xl font-extrabold">
+        <span className="inline-flex flex-wrap items-center justify-center gap-4">
+          <Skeleton className="h-12 w-44" />
+          <Skeleton className="h-12 w-20" />
+          <Skeleton className="h-12 w-72" />
+        </span>
+      </h1>
+      <div>
+        <Skeleton className="h-10 w-48" />
+        <Card className="flex flex-col gap-4 p-4">
+          <Skeleton className="h-10 w-36" />
+          <Skeleton className="h-4 w-56" />
+          <Skeleton className="h-4 w-72" />
+        </Card>
+        <Card className="flex flex-col gap-4 p-4">
+          <Skeleton className="h-8 w-40" />
+          <Skeleton className="h-4 w-56" />
+          <Skeleton className="h-4 w-96" />
+        </Card>
+        <Card className="flex flex-col gap-4 p-4">
+          <Skeleton className="h-8 w-44" />
+          <Skeleton className="h-4 w-56" />
+          <Skeleton className="h-4 w-72" />
+        </Card>
+      </div>
+    </div>
+  );
+};