add support for querying buying listings as well as by max price

crawler/frontend/src/App.tsx

@@ -31,11 +31,15 @@ function App() {
   const [isParametersModalOpen, setIsParametersModalOpen] = useState(true)
   const [error, setError] = useState('')
   const [queryParameters, setQueryParameters] = useState<ParameterValues | null>(null)
-  const fetchData = async () => {
-
+  const fetchData = async (parameters: ParameterValues) => {
+    const accessToken = user?.access_token;
+    const queryString = new URLSearchParams();
+    queryString.append('listing_type', parameters.listing_type)
+    if (parameters.max_price) {
+      queryString.append("max_price", parameters.max_price.toString());
+    }
     try {
-      const accessToken = user?.access_token;
-      const response = await fetch('/api/listing_geojson',
+      const response = await fetch("/api/listing_geojson?" + queryString,
         {
           method: 'GET',
           headers: {
@@ -49,14 +53,15 @@ function App() {
       return data;
     } catch (err) {
       setError('Failed to fetch data: ' + err);
-      alert(error)
+      alert(JSON.stringify(err))
     } finally {
     }
   };
   const onSubmit = async (parameters: ParameterValues) => {
     // Fetch listing data
     setQueryParameters(parameters)
-    const data = await fetchData();
+    const data = await fetchData(parameters);
+    console.log(data)
     if (data) {
       setListingData(data);
     }

crawler/frontend/src/components/Parameters.tsx

@@ -4,7 +4,8 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Button } from "./ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "./ui/dialog";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
+import { Input } from "./ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 
 
@@ -14,10 +15,16 @@ export enum Metric {
     qm = 'qm',
     price = 'total_price',
 }
+export enum ListingType {
+    RENT = 'RENT',
+    BUY = 'BUY'
+}
 
 
 export interface ParameterValues {
     metric: Metric
+    listing_type: ListingType
+    max_price?: number
 }
 
 export function Parameters(
@@ -33,17 +40,21 @@ export function Parameters(
 
     const formSchema = z.object({
         metric: z.nativeEnum(Metric, { required_error: "Metric is required" }),
+        listing_type: z.nativeEnum(ListingType, { required_error: "Listing Type is required" }),
+        max_price: z.number().optional(),
     })
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
             metric: Metric.qmprice,
+            max_price: 3000,
         },
     })
     // 2. Define a submit handler.
     function onSubmit(values: z.infer<typeof formSchema>) {
         // Do something with the form values.
         // ✅ This will be type-safe and validated.
+        console.log(values)
         props.onSubmit(values)
     }
 
@@ -79,13 +90,49 @@ export function Parameters(
                                             <SelectItem value={Metric.price}>Price</SelectItem>
                                         </SelectContent>
                                     </Select>
-                                    <FormDescription>
-                                        This is your public display name.
-                                    </FormDescription>
                                     <FormMessage />
                                 </FormItem>
                             )}
                         />
+                        <FormField
+                            control={form.control}
+                            name="listing_type"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Listing Type</FormLabel>
+                                    <FormControl >
+                                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                            <FormControl>
+                                                <SelectTrigger className="w-[180px]">
+                                                    <SelectValue placeholder="Metric to Visualize" />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent >
+                                                <SelectItem value={ListingType.BUY}>To buy</SelectItem>
+                                                <SelectItem value={ListingType.RENT}>To rent</SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                    </FormControl>
+                                    <FormMessage />
+
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="max_price"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Max price</FormLabel>
+                                    <FormControl >
+                                        <Input type="number" placeholder={"£"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
+                                    </FormControl>
+                                    <FormMessage />
+
+                                </FormItem>
+                            )}
+                        />
+
                         <Button type="submit">Submit</Button>
                     </form>
                 </Form>