add filters feature

Author: nainemom

client/api/divar.ts

@@ -17,6 +17,27 @@ const httpClient = ofetch.create({
 
 export type ProgressFunction<T> = (value: number, max: number, title: string, lastValue: T) => void;
 
+export type City = {
+  name: string,
+  id: string,
+}
+
+export const getCities = async (): Promise<City[]> => {
+  // https://api.divar.ir/v8/search-bookmark/web/get-search-bar-empty-state
+  const response = await ofetch('./divar_cities.json' , {
+    baseURL: window.location.origin + window.location.pathname,
+    responseType: 'json',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return response.map((row: any) => ({
+    id: row.city_id,
+    name: row.city_slug.split('-').map((x: string) => `${x[0].toUpperCase()}${x.slice(1)}`).join(' '),
+  }) satisfies City);
+}
+
 export type House = {
   token: string,
   location: {
@@ -239,6 +260,7 @@ export const getDistrictHouses = async (filters: GetDistrictHousesFilters): Prom
 
 export type GetAllHousesFilters = Omit<GetDistrictHousesFilters, 'district'> & {
   cityId: string,
+  exact: boolean;
 };
 
 export const getAllCityHouses = async (filters: GetAllHousesFilters, progressFn?: ProgressFunction<House[]>): Promise<House[]> => {
@@ -248,15 +270,17 @@ export const getAllCityHouses = async (filters: GetAllHousesFilters, progressFn?
   }
   progress(0, 1, '');
 
+  const totalSteps = filters.exact ? 3 : 2;
+
   // Step 1: prepare
   const districts = await getDistricts(filters.cityId, (a, b, t) => {
-    progress((a / b), 3, t);
+    progress((a / b), totalSteps, t);
   });
 
   // Step 2: fetch
   let passedDistricts = 0;
   for (const district of districts) {
-    progress((passedDistricts / districts.length) + 1, 3, 'Fetching Districts Houses');
+    progress((passedDistricts / districts.length) + 1, totalSteps, 'Fetching Districts Houses');
     const districtHouses = await getDistrictHouses({
       ...filters,
       district,
@@ -266,23 +290,25 @@ export const getAllCityHouses = async (filters: GetAllHousesFilters, progressFn?
     passedDistricts+=1;
   }
 
-  // Step 3: verify
-  let passedHouses = 0;
-  const approximateHouses = [...returnValue];
-  for (const approximateHouse of approximateHouses) {
-    progress((passedHouses / approximateHouses.length) + 2, 3, 'Verifying Houses Data');
-    try {
-      const validatedHouse = await getHouse(approximateHouse.token);
-      returnValue = [
-        ...returnValue.filter(x => x !== approximateHouse),
-        validatedHouse,
-      ];
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    } catch (_e) {
-      continue;
+  if (filters.exact) {
+    // Step 3: verify
+    let passedHouses = 0;
+    const approximateHouses = [...returnValue];
+    for (const approximateHouse of approximateHouses) {
+      progress((passedHouses / approximateHouses.length) + 2, totalSteps, 'Verifying Houses Data');
+      try {
+        const validatedHouse = await getHouse(approximateHouse.token);
+        returnValue = [
+          ...returnValue.filter(x => x !== approximateHouse),
+          validatedHouse,
+        ];
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      } catch (_e) {
+        continue;
+      }
+      passedHouses += 1;
+      await new Promise((r) => setTimeout(r, 1100));
     }
-    passedHouses += 1;
-    await new Promise((r) => setTimeout(r, 1100));
   }
   return returnValue;
 }

client/components/HousesFilters.tsx

@@ -0,0 +1,55 @@
+import { getCities, type GetAllHousesFilters } from "@/api";
+import { useEffect, useState } from "react";
+import { useAsync } from "react-use";
+
+export function HousesFilters({ value: _value, onChange }: { value: GetAllHousesFilters, onChange?: (newValue: GetAllHousesFilters) => void }) {
+  const [value, setValue] = useState<GetAllHousesFilters>(_value);
+
+  const cities = useAsync(() => getCities());
+
+  useEffect(() => {
+    onChange?.(value);
+  }, [onChange, value]);
+  return (
+    <div className="flex flex-col justify-between items-stretch gap-6">
+      <label className="select w-full">
+        <span className="label">City</span>
+        <select value={value.cityId} onChange={e => setValue(p => ({ ...p, cityId: e.target.value}))}>
+          { cities.value?.map((opt) => (
+            <option key={opt.id} value={opt.id}>{opt.name}</option>
+          ))}
+        </select>
+      </label>
+
+      <label className="input w-full">
+        <span className="label">Minimum Size</span>
+        <input type="number" min={10} max={value.size?.[1] ?? 400} value={value.size?.[0] ?? 30} onChange={e => setValue(p => ({ ...p, size: [(e.target.valueAsNumber ?? 0), p?.size?.[1] ?? (e.target.valueAsNumber ?? 0) + 10]}))} step="5" />
+      </label>
+
+      <label className="input w-full">
+        <span className="label">Maximum Size</span>
+        <input type="number" min={value.size?.[0] ?? 10} max={400} value={value.size?.[1] ?? 120} onChange={e => setValue(p => ({ ...p, size: [p?.size?.[0] ?? (e.target.valueAsNumber ?? 0) - 10, (e.target.valueAsNumber ?? 0)]}))} step="5" />
+      </label>
+
+      <div className="flex items-center gap-2 flex-nowrap w-full justify-between">
+        <label className="label">
+          <input type="checkbox" defaultChecked={value.parking} onChange={e => setValue(p => ({ ...p, parking: e.target.checked || undefined }))} className="toggle" />
+          Parking
+        </label>
+        <label className="label">
+          <input type="checkbox" defaultChecked={value.elevator} onChange={e => setValue(p => ({ ...p, elevator: e.target.checked || undefined }))} className="toggle" />
+          Elevator
+        </label>
+        <label className="label">
+          <input type="checkbox" defaultChecked={value.balcony} onChange={e => setValue(p => ({ ...p, balcony: e.target.checked || undefined }))} className="toggle" />
+          Balcony
+        </label>
+      </div>
+
+      <label className="label w-full">
+        <input type="checkbox" defaultChecked={!value.exact} onChange={e => setValue(p => ({ ...p, exact: e.target.checked}))} className="checkbox" />
+        Approximate Search
+      </label>
+    </div>
+  )
+}

client/components/HousesMap.tsx

@@ -6,13 +6,13 @@ import {
 } from "@/api";
 
 
+const mapStyle = 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
+
 export function HousesMap({
   houses,
-  mapStyle,
   children,
 }: {
   houses: House[],
-  mapStyle: string,
   children?: ReactNode,
 }) {
 
@@ -39,8 +39,8 @@ const gradientStops = useMemo<{ t: number; color: [number, number, number] }[]>(
       data,
       min: sortedPrices[Math.floor((sortedPrices.length - 1) * gradientStops[1].t)],
       max: sortedPrices[Math.floor((sortedPrices.length - 1) * gradientStops[gradientStops.length - 2].t)],
-      longitude: isNaN(center[0]) ? 0 : center[0],
-      latitude: isNaN(center[1]) ? 0 : center[1],
+      longitude: isNaN(center[0]) ? 51.3347 : center[0],
+      latitude: isNaN(center[1]) ? 35.7219 : center[1],
     };
   }, [houses, gradientStops]);
 

client/components/MapStyleSelect.tsx

@@ -1,2 +1,3 @@
 @import "tailwindcss";
-@import "maplibre-gl/dist/maplibre-gl.css"
+@plugin "daisyui";
+@import "maplibre-gl/dist/maplibre-gl.css";

client/main.css

@@ -1,14 +1,9 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import '@/main.css'
-import "@radix-ui/themes/styles.css";
-import { Theme } from '@radix-ui/themes';
 import { Root } from '@/views/Root'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <Theme>
-      <Root />
-    </Theme>
+    <Root />
   </StrictMode>,
 )

client/main.tsx

@@ -1,35 +1,28 @@
-import { Button, Progress } from "@radix-ui/themes";
 import { useEffect, useState } from "react";
-import { VscRunAbove, VscStopCircle } from "react-icons/vsc";
 import {
   getAllCityHouses,
   type GetAllHousesFilters,
   type House,
 } from "@/api";
-import { useAsync, useAsyncFn, useLocalStorage } from "react-use";
-import { MapStyleSelect } from "@/components/MapStyleSelect";
+import { useAsync, useAsyncFn } from "react-use";
 import { ofetch } from "ofetch";
 import { HousesMap } from "@/components/HousesMap";
-
+import { VscPlay, VscSaveAll, VscSettingsGear } from "react-icons/vsc";
+import { HousesFilters } from "@/components/HousesFilters";
 
 
 export function Root() {
-  const [filters] = useState<GetAllHousesFilters>(
+  const [filters, setFilters] = useState<GetAllHousesFilters>(
     {
       cityId: '1',
-      size: [30, 200],
+      exact: false,
+      size: [30, 120],
     }
   );
 
-  const [mapStyle, setMapStyle] = useLocalStorage<string>('map-style');
-
   const [progress, setProgress] = useState<number>(0);
   const [progressText, setProgressText] = useState('');
 
-  useEffect(() => {
-    console.log(progressText);
-  }, [progressText]);
-
   const lastSavedHouses = useAsync(() => ofetch<House[]>(new URL('./tehran.json', window.location.origin + window.location.pathname).href));
   const [houses, setHouses] = useState<House[]>([]);
   useEffect(() => {
@@ -41,41 +34,53 @@ export function Root() {
       setProgress(a / b);
       setProgressText(progressText);
       setHouses(currentHouses);
+    }).then(() => {
+      setProgress(0);
+      setProgressText('');
     });
   }, [filters]);
 
   return (
-    <div className="w-svw h-svh relative">
-      <HousesMap
-        houses={houses ?? []}
-        mapStyle={mapStyle!}
-      />
-      <div className="absolute top-0 left-0 w-full p-2 flex items-center justify-center gap-2 backdrop-contrast-50 backdrop-blur-sm">
-        <Progress size="2" max={1} value={progress} color="green" variant="classic" />
-        <Button
+    <div className="h-svh w-svw relative">
+      <div className="flex items-center justify-between backdrop-blur-sm bg-black z-10 absolute top-0 left-0 w-full p-2 gap-2">
+        <div className="flex items-center flex-col justify-between grow gap-1 h-full">
+          <label htmlFor="progress-bar" className="text-xs h-4">{progressText ? `${progressText}...` : ''}</label>
+          <progress id="progress-bar" value={progress} max="1" className="progress w-full h-2" />
+        </div>
+        <button
+          onClick={()=>document.querySelector<HTMLDialogElement>('#filters-dialog')!.showModal()}
+          disabled={crawlHouses.loading}
+          className="shrink-0 btn btn-sm btn-soft"
+        >
+          <VscSettingsGear className="size-4" /> Settings
+        </button>
+        <button
           onClick={() => {
             startCrawl();
           }}
-          color={crawlHouses.loading ? 'gray' : 'green'}
-          size="2"
-          variant="classic"
+          disabled={crawlHouses.loading}
+          className="shrink-0 btn btn-sm btn-primary"
         >
-          
-          {crawlHouses.loading ? (
-            <>
-              <VscStopCircle />
-              Stop
-            </>
-          ) : (
-            <>
-              <VscRunAbove />
-              Start Crawl Divar
-            </>
-          )}
-        </Button>
-        |
-        <MapStyleSelect value={mapStyle} onValueChange={setMapStyle} size="2" />
+          <VscPlay className="size-4" /> Run
+        </button>
       </div>
+
+      <dialog id="filters-dialog" className="modal">
+        <div className="modal-box">
+          <h3 className="font-bold text-lg">Filters</h3>
+          <div className="modal-action">
+            <form method="dialog" className="w-full">
+              <HousesFilters value={filters} onChange={setFilters} />
+              <div className="divider" />
+              <button className="btn btn-block btn-primary"><VscSaveAll /> OK</button>
+            </form>
+          </div>
+        </div>
+      </dialog>
+
+      <HousesMap
+        houses={houses ?? []}
+      />
     </div>
   );
 }

client/views/Root.tsx

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="/client/main.css" rel="stylesheet">
     <title>Melk-Map</title>
   </head>
   <body>