squash parametrs form to take less space

crawler/frontend/src/App.tsx

@@ -39,6 +39,9 @@ const fetchData = async (user: User, baseQueyrUri: string, parameters: Parameter
   if (parameters.available_from) {
     queryString.append("let_date_available_from", parameters.available_from.toISOString());
   }
+  if (parameters.district) {
+    queryString.append("district_names", parameters.district);
+  }
 
   const response = await fetch(baseQueyrUri + '?' + queryString,
     {

crawler/frontend/src/components/Parameters.tsx

@@ -1,6 +1,8 @@
+import { getUser } from "@/auth/authService";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogTitle } from "@radix-ui/react-dialog";
-import { useState } from "react";
+import type { User } from "oidc-client-ts";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Button } from "./ui/button";
@@ -33,8 +35,28 @@ export interface ParameterValues {
     min_sqm?: number
     last_seen_days?: number
     available_from?: Date
+    district: string
 }
 
+const fetchDistricts = async (user: User | null) => {
+    const accessToken = user?.access_token;
+
+    const response = await fetch('/api/get_districts',
+        {
+            method: 'GET',
+            headers: {
+                'Authorization': `Bearer ${accessToken}`, // Pass the token
+                'Content-Type': 'application/json',
+            },
+        }
+    );
+    if (!response.ok) {
+        throw new Error('Error: ' + response.status);
+    }
+    const data: Response = await response.json();
+    return data;
+};
+
 export function Parameters(
     props: {
         isOpen: boolean,
@@ -47,6 +69,16 @@ export function Parameters(
     } = useForm<ParameterValues>()
     const [action, setAction] = useState<'fetch-data' | 'visualize' | null>(null)
     const [availableFromRawInput, setAvailableFromRawInput] = useState("now");
+    const [districts, setDistricts] = useState<string[]>([]);
+    console.log(districts)
+
+    useEffect(() => {
+        getUser().then(user => {
+            fetchDistricts(user).then(data => {
+                setDistricts(Object.keys(data));
+            })
+        })
+    }, []);
 
     const formSchema = z.object({
         metric: z.nativeEnum(Metric, { required_error: "Metric is required" }),
@@ -58,6 +90,7 @@ export function Parameters(
         min_sqm: z.number().optional(),
         last_seen_days: z.number().min(0).optional(),
         available_from: z.date(),
+        district: z.string()
     })
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
@@ -71,6 +104,7 @@ export function Parameters(
             min_sqm: 50,
             last_seen_days: 7,
             available_from: new Date(),
+            district: ''
         },
     })
     // 2. Define a submit handler.
@@ -97,12 +131,12 @@ export function Parameters(
                 </DialogTitle>
 
                 <Form {...form}>
-                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                         <FormField
                             control={form.control}
                             name="metric"
                             render={({ field }) => (
-                                <FormItem>
+                                <FormItem className="flex flex-row items-center gap-4">
                                     <FormLabel>Metric to visualize</FormLabel>
                                     <Select onValueChange={field.onChange} defaultValue={field.value}>
                                         <FormControl>
@@ -125,7 +159,7 @@ export function Parameters(
                             control={form.control}
                             name="listing_type"
                             render={({ field }) => (
-                                <FormItem>
+                                <FormItem className="flex flex-row items-center gap-4">
                                     <FormLabel>Listing Type</FormLabel>
                                     <FormControl >
                                         <Select onValueChange={field.onChange} defaultValue={field.value}>
@@ -144,11 +178,34 @@ export function Parameters(
                                 </FormItem>
                             )}
                         />
+                        {/* <FormField # listings don't have district stored as metadata; so only useful in rightmove querying
+                            control={form.control}
+                            name="district"
+                            render={({ field }) => (
+                                <FormItem className="flex flex-row items-center gap-4">
+                                    <FormLabel>District</FormLabel>
+                                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                        <FormControl>
+                                            <SelectTrigger className="w-[180px]">
+                                                <SelectValue placeholder="District" />
+                                            </SelectTrigger>
+                                        </FormControl>
+                                        <SelectContent {...register('district')} >
+                                            {districts.map((district, index) => (
+                                                <SelectItem key={index} value={district}>{district}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        /> */}
                         <FormField
                             control={form.control}
                             name="min_sqm"
                             render={({ field }) => (
-                                <FormItem>
+                                <FormItem className="flex flex-row items-center gap-4">
                                     <FormLabel>Min square meters</FormLabel>
                                     <FormControl >
                                         <Input type="number" placeholder={"m²"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
@@ -161,7 +218,7 @@ export function Parameters(
                             control={form.control}
                             name="min_bedrooms"
                             render={({ field }) => (
-                                <FormItem>
+                                <FormItem className="flex flex-row items-center gap-4">
                                     <FormLabel>Minimum number of bedrooms</FormLabel>
                                     <FormControl >
                                         <Input type="number" placeholder={"# bedrooms"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
@@ -174,7 +231,7 @@ export function Parameters(
                             control={form.control}
                             name="max_bedrooms"
                             render={({ field }) => (
-                                <FormItem>
+                                <FormItem className="flex flex-row items-center gap-4">
                                     <FormLabel>Maximum number of bedrooms</FormLabel>
                                     <FormControl >
                                         <Input type="number" placeholder={"# bedrooms"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
@@ -187,7 +244,7 @@ export function Parameters(
                             control={form.control}
                             name="min_price"
                             render={({ field }) => (
-                                <FormItem>
+                                <FormItem className="flex flex-row items-center gap-4">
                                     <FormLabel>Min price</FormLabel>
                                     <FormControl >
                                         <Input type="number" placeholder={"£"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
@@ -200,7 +257,7 @@ export function Parameters(
                             control={form.control}
                             name="max_price"
                             render={({ field }) => (
-                                <FormItem>
+                                <FormItem className="flex flex-row items-center gap-4">
                                     <FormLabel>Max price</FormLabel>
                                     <FormControl >
                                         <Input type="number" placeholder={"£"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
@@ -229,7 +286,7 @@ export function Parameters(
                             control={form.control}
                             name="last_seen_days"
                             render={({ field }) => (
-                                <FormItem>
+                                <FormItem className="flex flex-row items-center gap-4">
                                     <FormLabel>Last seen days</FormLabel>
                                     <FormControl >
                                         <Input type="number" placeholder={"days"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />