Specific event page (#22)

.env.local.example

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_JSCL_API_URL='https://api.jsconf.dev/graphql'
 NEXT_PUBLIC_TOKEN_STORAGE_KEY='HS:token_storage_key'
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY='pk_test_ZnVua3ktZ3JpZmZvbi04NC5jbGVyay5hY2NvdW50cy5kZXYk'
+NEXT_PUBLIC_GOOGLE_MAPS_KEY='your_google_maps_key_here'

.prettierrc

@@ -1 +1,3 @@
-{}
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

app/(transition)/(root)/events/[id]/fixture.ts

@@ -0,0 +1,172 @@
+const information = `
+# TechCon 2023: Innovación y Futuro
+
+## Descripción del Evento
+
+Bienvenidos a TechCon 2023, el evento anual líder donde la innovación, la tecnología y las ideas del futuro se encuentran. Durante tres días emocionantes, del 10 al 12 de septiembre, nos sumergiremos en el mundo de las últimas tendencias y desarrollos en el ámbito tecnológico.
+Con la presencia de expertos reconocidos a nivel mundial, TechCon 2023 será el lugar perfecto para expandir tus conocimientos, conectar con profesionales de la industria y descubrir las tecnologías que están dando forma a nuestro futuro.
+
+
+## Ponentes Destacados
+
+- **Dr. Ana Martínez**: Pionera en inteligencia artificial y aprendizaje automático. Con más de 20 años de experiencia, la Dra. Martínez compartirá su visión sobre cómo la IA está transformando los negocios y la sociedad.
+- **Carlos Hernández**: Experto en ciberseguridad y tecnologías blockchain. Carlos discutirá las últimas tendencias en seguridad digital y cómo la blockchain está revolucionando la forma en que pensamos sobre la privacidad y las transacciones online.
+- **Sarah Lee**: Innovadora en el campo de la realidad aumentada y virtual. Sarah nos llevará a través de un viaje por las aplicaciones prácticas de AR y VR en educación y entretenimiento.
+
+
+## Talleres y Sesiones Interactivas
+
+Participa en una variedad de talleres prácticos y sesiones interactivas dirigidas por líderes de la industria. Algunos de los temas incluyen:
+Desarrollo de aplicaciones con React y TypeScript: Aprende las mejores prácticas y técnicas avanzadas de manos de desarrolladores experimentados.
+Automatización con Python y FastAPI: Descubre cómo simplificar tus flujos de trabajo y mejorar la eficiencia en tus proyectos.
+Tecnologías emergentes en Cloud Computing: Explora las últimas innovaciones y soluciones en la nube.
+
+## Networking y Exposición
+
+TechCon 2023 también ofrece amplias oportunidades para networking. Conéctate con otros profesionales, encuentra posibles colaboradores y descubre nuevas oportunidades de carrera en nuestra feria de exposiciones, donde empresas líderes en tecnología presentarán sus productos y servicios más recientes.
+
+## Registro e Información Adicional
+
+¡No te pierdas esta oportunidad única de estar a la vanguardia de la tecnología! Para más información y para registrarte, visita nuestro sitio web: www.techcon2023.com.
+`;
+
+const location = {
+  address: 'Los Jesuitas 881, 7501300 Providencia, Región Metropolitana',
+  information: 'Más descripción de como llegar al evento. Tocar la puerta X, subir por las escaleras de la derecha, etc.'
+}
+
+const organizers = [
+  {
+    id: "1",
+    name: "Pillippa",
+    lastname: "",
+    image: "string",
+  },
+  {
+    id: "2",
+    name: "Felipe",
+    lastname: "Torres",
+    image: "string",
+  },
+  {
+    id: "3",
+    name: "Rod",
+    lastname: "Bustamante",
+    image: "string",
+  },
+  {
+    id: "4",
+    name: "Claudio",
+    lastname: "Mágico",
+    image: "string",
+  },
+];
+
+const attendees = [
+  {
+    id: "1",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "2",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "3",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "4",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "5",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "6",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "7",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "8",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "9",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "10",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "11",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "12",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "13",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "14",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "15",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+  {
+    id: "16",
+    name: "Katherine",
+    lastname: "Zboncak",
+    image: "",
+  },
+];
+
+export const event = {
+  name: "Javascript Meetup — Enero",
+  organizer: "Javascript Chile",
+  datetime: "Jueves, 27 Enero, 2024 | 6:30 PM",
+  location,
+  information,
+  organizers,
+  attendees,
+};

app/(transition)/(root)/events/[id]/getEvent.generated.tsx

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+/* eslint-disable */
+/* prettier-ignore */
+/* This file is automatically generated. Please do not modify it manually. */
+import * as Types from '../../../../../src/api/gql/graphql';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+import * as ApolloReactHooks from '@apollo/experimental-nextjs-app-support/ssr';
+const defaultOptions = {} as const;
+export type GetEventQueryVariables = Types.Exact<{
+  input: Types.Scalars['String']['input'];
+}>;
+
+
+export type GetEventQuery = { __typename?: 'Query', event?: { __typename?: 'Event', name: string, address?: string | null, description?: string | null, maxAttendees?: number | null, startDateTime: any, status: Types.EventStatus, community?: { __typename?: 'Community', name?: string | null } | null, users: Array<{ __typename?: 'User', id: string, name?: string | null, lastName?: string | null }> } | null };
+
+
+export const GetEventDocument = gql`
+    query getEvent($input: String!) {
+  event(id: $input) {
+    name
+    address
+    description
+    maxAttendees
+    startDateTime
+    status
+    community {
+      name
+    }
+    users {
+      id
+      name
+      lastName
+    }
+  }
+}
+    `;
+
+/**
+ * __useGetEventQuery__
+ *
+ * To run a query within a React component, call `useGetEventQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetEventQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetEventQuery({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
+export function useGetEventQuery(baseOptions: ApolloReactHooks.QueryHookOptions<GetEventQuery, GetEventQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<GetEventQuery, GetEventQueryVariables>(GetEventDocument, options);
+      }
+export function useGetEventLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<GetEventQuery, GetEventQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<GetEventQuery, GetEventQueryVariables>(GetEventDocument, options);
+        }
+export function useGetEventSuspenseQuery(baseOptions?: ApolloReactHooks.SuspenseQueryHookOptions<GetEventQuery, GetEventQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useSuspenseQuery<GetEventQuery, GetEventQueryVariables>(GetEventDocument, options);
+        }
+export type GetEventQueryHookResult = ReturnType<typeof useGetEventQuery>;
+export type GetEventLazyQueryHookResult = ReturnType<typeof useGetEventLazyQuery>;
+export type GetEventSuspenseQueryHookResult = ReturnType<typeof useGetEventSuspenseQuery>;
+export type GetEventQueryResult = Apollo.QueryResult<GetEventQuery, GetEventQueryVariables>;

app/(transition)/(root)/events/[id]/getEvent.gql

@@ -0,0 +1,18 @@
+query getEvent($input: String!) {
+  event(id: $input) {
+    name
+    address
+    description
+    maxAttendees
+    startDateTime
+    status
+    community {
+      name
+    }
+    users {
+      id
+      name
+      lastName
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+import { gql } from "@apollo/client";
+import { getApolloClient } from "@/api/ApolloClient";
+import { MapPinIcon } from "@heroicons/react/24/outline";
+import { Attendees } from "@/components/Event/Attendees/Attendees";
+import { Hero } from "@/components/Event/Hero/Hero";
+import { Information } from "@/components/Event/Information/Information";
+import { Location } from "@/components/Event/Location/Location";
+import { Organizers } from "@/components/Event/Organizers/Organizers";
+import { Register } from "@/components/Event/Register/Register";
+import { EventType, PageProps } from "./types";
+import { GetEventDocument } from "./getEvent.generated";
+
+export default async function Event({ searchParams }: PageProps) {
+  const c = getApolloClient();
+  const { id } = searchParams;
+
+  const { data, error } = await c.query<EventType>({
+    query: GetEventDocument,
+    variables: {
+      input: 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>;
+
+  const {
+    address,
+    community,
+    description,
+    name,
+    startDateTime,
+    users,
+  } = event;
+
+  const eventDate = new Date(startDateTime).toLocaleString();
+
+  return (
+    <main className="flex w-full max-w-[1360px] flex-col items-center justify-between gap-6 px-6 py-7 transition-all md:px-10 lg:grid lg:grid-cols-5 lg:items-start lg:gap-8 lg:px-24 lg:pt-14 xl:grid-cols-6 xl:px-16">
+      <div className="order-1 w-full lg:col-span-5 xl:col-span-4">
+        <Hero>
+          <div className="mr-auto flex w-full flex-col place-self-center">
+            <h1 className="mb-4 max-w-2xl text-xl font-extrabold leading-none tracking-tight dark:text-white md:text-4xl">
+              {name}
+            </h1>
+            <div className="flex w-full justify-between">
+              <div className="flex grow flex-col">
+                <p className="font-thin">
+                  por <span className="underline">{community?.name}</span>
+                </p>
+                <p className="font-thin">{eventDate}</p>
+              </div>
+              <div className="hidden md:flex md:max-w-xs md:items-center md:gap-2">
+                <MapPinIcon className="h-8 w-8" />
+                <p className="font-thin">{address}</p>
+              </div>
+            </div>
+          </div>
+        </Hero>
+        <Register />
+      </div>
+      <div className="order-2 lg:order-4 lg:col-span-3 xl:order-3 xl:col-span-4">
+        <Information title="El evento" information={description} />
+      </div>
+      <div className="order-3 lg:order-2 lg:col-span-3 xl:col-span-2 xl:h-full">
+        <Location
+          title="Lugar"
+          location={{
+            address: "Calle falsa 123",
+            information: null,
+          }}
+        />
+      </div>
+      <div className="order-4 flex w-full flex-col gap-6 lg:order-3 lg:col-span-2">
+        <Organizers title="Organizadores" organizers={[]} />
+        <Attendees
+          title={`Asistentes (${users?.length || 0})`}
+          attendees={users}
+        />
+      </div>
+    </main>
+  );
+}
+
+export const runtime = "edge";

app/(transition)/(root)/events/[id]/types.d.ts

@@ -0,0 +1,30 @@
+type Community = {
+  name: string;
+}
+
+type EventClass = {
+  name:          string;
+  address:       null;
+  description:   string;
+  maxAttendees:  number;
+  status:        string;
+  startDateTime: Date;
+  meetingURL:    null;
+  community:     Community;
+  tags:          any[];
+  users:         any[];
+  tickets:       any[];
+}
+
+type Data = {
+  event: EventClass;
+}
+
+export type EventType = {
+  event: EventClass;
+}
+
+export type PageProps = {
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+