feat: draft of search page

package.json

@@ -41,6 +41,7 @@
  "lucide-react": "^0.309.0",
  "micro": "^9.4.1",
  "next": "14.0.4",
+ "qs": "^6.11.2",
  "react": "^18",
  "react-day-picker": "^8.10.0",
  "react-dom": "^18",
@@ -58,6 +59,7 @@
  "@graphql-codegen/typescript-react-apollo": "^4.1.0",
  "@types/better-sqlite3": "^7.6.9",
  "@types/node": "^20",
+ "@types/qs": "^6.9.11",
  "@types/react": "^18",
  "@types/react-dom": "^18",
  "autoprefixer": "^10.0.1",

src/components/DateRange.tsx

@@ -1,15 +1,14 @@
-import * as React from "react";
-import { addDays, format } from "date-fns";
+import { format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import {
  Popover,
  PopoverContent,
  PopoverTrigger,
 } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
 import type { DateRange, SelectRangeEventHandler } from "react-day-picker";
 
 type DateRangeProps = {

src/components/PreviewCard.tsx

@@ -17,7 +17,9 @@ export function PreviewCard({ className, glamp, ...props }: CardProps) {
  return (
  <Card className={cn("w-[380px]", className)} {...props}>
  <CardHeader>
- <CardTitle>{glamp.title}</CardTitle>
+ <CardTitle className={cn({ "text-yellow-600": glamp.isLuxury })}>
+ {glamp.title}
+ </CardTitle>
  <CardDescription>{glamp.description}</CardDescription>
  </CardHeader>
  <CardContent className="grid gap-4"></CardContent>

src/components/SeachBar.tsx

@@ -5,28 +5,70 @@ import { z } from "zod";
 import { Button } from "@/components/ui/button";
 import {
  Form,
+ FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
 } from "@/components/ui/form";
 import { toast } from "@/components/ui/use-toast";
+import { searchParamsSchema } from "@/lib/validators/searchParams";
+import { useRouter } from "next/router";
+import { isDateRange } from "react-day-picker";
 import { DateRange } from "./DateRange";
+import { Checkbox } from "./ui/checkbox";
 
 const FormSchema = z.object({
  dateRange: z.object({
  from: z.date({ required_error: "A date of birth is required." }),
  to: z.date({ required_error: "A date to is required" }),
  }),
+ isLuxury: z.boolean().default(false).optional(),
 });
 
-function SearchBar() {
+type SearchBarProps = {
+ onSearch: ({ variables, dateRange }) => void;
+};
+
+function SearchBar({ onSearch }: SearchBarProps) {
+ const router = useRouter();
+
+ const searchParamsResult = searchParamsSchema.safeParse(router.query);
+
+ let defaultValues = {
+ dateRange: {
+ from: undefined,
+ to: undefined,
+ },
+ isLuxury: false,
+ };
+
+ if (searchParamsResult.success) {
+ const { dateFrom, dateTo, isLuxury } = searchParamsResult.data;
+ defaultValues = {
+ dateRange: {
+ from: dateFrom ? new Date(dateFrom) : undefined,
+ to: dateTo ? new Date(dateTo) : undefined,
+ },
+ isLuxury,
+ };
+ }
  const form = useForm<z.infer<typeof FormSchema>>({
  resolver: zodResolver(FormSchema),
+ defaultValues,
  });
 
  function onSubmit(data: z.infer<typeof FormSchema>) {
+ onSearch({
+ dateRange: data.dateRange,
+ variables: {
+ offset: 0,
+ limit: 3,
+ isLuxury: data.isLuxury,
+ },
+ });
+
  toast({
  title: "You submitted the following values:",
  description: (
@@ -44,14 +86,39 @@ function SearchBar() {
  <FormField
  control={form.control}
  name="dateRange"
+ render={({ field }) => {
+ const validDateRange = isDateRange(field.value)
+ ? field.value
+ : { 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>
+ );
+ }}
+ />
+ <FormField
+ control={form.control}
+ name="isLuxury"
  render={({ field }) => (
- <FormItem className="flex flex-col">
- <FormLabel>Date of birth</FormLabel>
- <DateRange selected={field.value} onSelect={field.onChange} />
- <FormDescription>
- Your date of birth is used to calculate your age.
- </FormDescription>
- <FormMessage />
+ <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+ <FormControl>
+ <Checkbox
+ checked={field.value}
+ onCheckedChange={field.onChange}
+ />
+ </FormControl>
+ <div className="space-y-1 leading-none">
+ <FormLabel>Luxury Glamping</FormLabel>
+ </div>
  </FormItem>
  )}
  />