feat: add glamp detail

src/components/PreviewCard.tsx

@@ -9,27 +9,42 @@ import {
 import { Glamp } from "@/generated/graphql";
 import { cn } from "@/lib/utils";
 import { formatDate } from "date-fns";
+import Link from "next/link";
+import { ParsedUrlQuery } from "querystring";
 
 type CardProps = React.ComponentProps<typeof Card> & {
  glamp: Glamp;
+ queryParams?: ParsedUrlQuery;
 };
 
-export function PreviewCard({ className, glamp, ...props }: CardProps) {
+export function PreviewCard({
+ className,
+ glamp,
+ queryParams,
+ ...props
+}: CardProps) {
+ const linkHref = {
+ pathname: `/glamps/${glamp.id}`,
+ query: queryParams,
+ };
+
  return (
  <Card className={cn(className)} {...props}>
- <CardHeader>
- <CardTitle className={cn({ "text-yellow-600": glamp.isLuxury })}>
- {glamp.title}
- </CardTitle>
- <CardDescription>{glamp.description}</CardDescription>
- </CardHeader>
- <CardContent className="grid gap-4"></CardContent>
- <CardFooter>
- <p>
- {formatDate(new Date(glamp.availableFrom), "dd.MMMM yyyy")} -{" "}
- {formatDate(new Date(glamp.availableTo), "dd.MMMM yyyy")}
- </p>
- </CardFooter>
+ <Link href={linkHref}>
+ <CardHeader>
+ <CardTitle className={cn({ "text-yellow-600": glamp.isLuxury })}>
+ {glamp.title}
+ </CardTitle>
+ <CardDescription>{glamp.description}</CardDescription>
+ </CardHeader>
+ <CardContent className="grid gap-4"></CardContent>
+ <CardFooter>
+ <p>
+ {formatDate(new Date(glamp.availableFrom), "dd.MMMM yyyy")} -{" "}
+ {formatDate(new Date(glamp.availableTo), "dd.MMMM yyyy")}
+ </p>
+ </CardFooter>
+ </Link>
  </Card>
  );
 }

src/components/SeachBar.tsx

@@ -92,14 +92,10 @@ function SearchBar({ onSearch }: SearchBarProps) {
  : { from: undefined, to: undefined };
  return (
  <FormItem className="flex flex-col">
- <FormLabel>Date of birth</FormLabel>
  <DateRange
  selected={validDateRange}
  onSelect={field.onChange}
  />
- <FormDescription>
- Your date of birth is used to calculate your age.
- </FormDescription>
  <FormMessage />
  </FormItem>
  );

src/graphql/query/getGlamp.gql

@@ -0,0 +1,14 @@
+query getGlamp($glampId: Int) {
+ glamp(glampId: $glampId) {
+ id
+ title
+ description
+ type
+ price
+ availableFrom
+ availableTo
+ adultCapacity
+ childCapacity
+ isLuxury
+ }
+}

src/graphql/schema/glamps/glamps.resolver.ts

@@ -1,7 +1,7 @@
 import { db } from "@/db/db";
 import { glamps as dbGlamps } from "@/db/schema";
 import { and, count, eq, gte, lte } from "drizzle-orm";
-import { Arg, Ctx, Float, Int, Query, Resolver } from "type-graphql";
+import { Arg, Args, Ctx, Float, Int, Query, Resolver } from "type-graphql";
 import { Glamp, GlampsResponse } from "./glamps";
 import type { MyContext } from "@/pages/api/graphql";
 import { z } from "zod";
@@ -21,6 +21,19 @@ export class GlampResolver {
  return glamps;
  }
 
+ @Query(() => Glamp)
+ async glamp(
+ @Arg("glampId", () => Int)
+ glampId: number
+ ): Promise<Glamp> {
+ const glamp = await db
+ .select()
+ .from(dbGlamps)
+ .where(eq(dbGlamps.id, glampId));
+
+ return glamp[0];
+ }
+
  @Query(() => GlampsResponse)
  async searchGlamps(
  @Arg("offset", () => Int) offset: number,

src/pages/glamps/[glampId]/index.tsx

@@ -0,0 +1,51 @@
+import { Shell } from "@/components/Shell";
+import {
+ GetGlampDocument,
+ GetGlampQuery,
+ GetGlampQueryVariables,
+ useGetGlampQuery,
+} from "@/generated/graphql";
+import { addApolloState, initializeApollo } from "@/utils/apolloClient";
+import { GetServerSidePropsContext } from "next";
+import { useRouter } from "next/router";
+
+const GlampDetailPage = () => {
+ const router = useRouter();
+
+ const { glampId } = router.query;
+
+ const { data, loading } = useGetGlampQuery({
+ variables: {
+ glampId: Number(glampId),
+ },
+ });
+
+ if (loading) {
+ <div>loading</div>;
+ }
+
+ return (
+ <Shell>
+ <pre>{JSON.stringify(data, null, 2)}</pre>
+ </Shell>
+ );
+};
+
+export default GlampDetailPage;
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ const apolloClient = initializeApollo({ context });
+
+ const { glampId } = context.query;
+
+ await apolloClient.query<GetGlampQuery, GetGlampQueryVariables>({
+ query: GetGlampDocument,
+ variables: {
+ glampId: Number(glampId),
+ },
+ });
+
+ return addApolloState(apolloClient, {
+ props: {},
+ });
+}

src/pages/glamps/index.tsx

@@ -61,7 +61,11 @@ export default function GlampsSearchPage() {
  <SearchBar onSearch={handleSearch} />
  <div className="grid md:grid-cols-3 gap-3">
  {data?.searchGlamps.glamps.map((glamp) => (
- <PreviewCard key={glamp.id} glamp={glamp} />
+ <PreviewCard
+ key={glamp.id}
+ glamp={glamp}
+ queryParams={router.query}
+ />
  ))}
  </div>
  </Shell>