From b43217fb401620ec800d4632e52afd0105b90c1c Mon Sep 17 00:00:00 2001
From: Patrik Zita <patrik.zitaa@gmail.com>
Date: Sat, 2 Mar 2024 16:15:31 +0100
Subject: [PATCH] feat: add glamp detail

---
 sqlite.db                                    | Bin 28672 -> 28672 bytes
 src/components/PreviewCard.tsx               |  43 +++++++++++-----
 src/components/SeachBar.tsx                  |   4 --
 src/graphql/query/getGlamp.gql               |  14 +++++
 src/graphql/schema/glamps/glamps.resolver.ts |  15 +++++-
 src/pages/glamps/[glampId]/index.tsx         |  51 +++++++++++++++++++
 src/pages/glamps/index.tsx                   |   6 ++-
 7 files changed, 113 insertions(+), 20 deletions(-)
 create mode 100644 src/graphql/query/getGlamp.gql
 create mode 100644 src/pages/glamps/[glampId]/index.tsx

diff --git a/sqlite.db b/sqlite.db
index 22a99580539f37d0975cc78558d4b53819ed5f7c..2cbdae7650d4a70012d3077ad83c92b7c5cfcecd 100644
GIT binary patch
delta 70
zcmV-M0J;Bw-~oW(0gxL33y~Z{0SmEUq%R5s53T?Y<qyUWuCoykpbr=p0|fvXBM3xg
cVQe5VL}hbha%pgMX>V?`#y>d_0Ry5?AnjWf2><{9

delta 43
zcmZp8z}WDBae_1>*F+g-My`zsOY}LI_>VF0KjlBRSx{jY|K?-%mI91Sivkn?IY$k{

diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
index 675c3f3..fe59dc5 100644
--- a/src/components/PreviewCard.tsx
+++ b/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>
   );
 }
diff --git a/src/components/SeachBar.tsx b/src/components/SeachBar.tsx
index ad07502..3ae8928 100644
--- a/src/components/SeachBar.tsx
+++ b/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>
               );
diff --git a/src/graphql/query/getGlamp.gql b/src/graphql/query/getGlamp.gql
new file mode 100644
index 0000000..fdddd08
--- /dev/null
+++ b/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
+  }
+}
diff --git a/src/graphql/schema/glamps/glamps.resolver.ts b/src/graphql/schema/glamps/glamps.resolver.ts
index d57f94d..36d87e4 100644
--- a/src/graphql/schema/glamps/glamps.resolver.ts
+++ b/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,
diff --git a/src/pages/glamps/[glampId]/index.tsx b/src/pages/glamps/[glampId]/index.tsx
new file mode 100644
index 0000000..864644a
--- /dev/null
+++ b/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: {},
+  });
+}
diff --git a/src/pages/glamps/index.tsx b/src/pages/glamps/index.tsx
index 3472182..a4624dd 100644
--- a/src/pages/glamps/index.tsx
+++ b/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>