add worker api to refresh data in the background

crawler/frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import './App.css';
 import { AppSidebar } from './AppSidebar';
 import { getUser, handleCallback, logout } from './auth/authService';
+import ActiveQuery from './components/ActiveQuery';
 import LoginModal from './components/LoginModal';
 import { Map } from './components/Map';
 import { Parameters, type ParameterValues } from './components/Parameters';
@@ -13,6 +14,7 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from './components/ui/s
 
 function App() {
   const [listingData, setListingData] = useState({});
+  const [taskID, setTaskID] = useState<string | null>(null);
   const [user, setUser] = useState<User | null>(null);
 
   useEffect(() => {
@@ -29,9 +31,8 @@ function App() {
   }, []);
 
   const [isParametersModalOpen, setIsParametersModalOpen] = useState(true)
-  const [error, setError] = useState('')
   const [queryParameters, setQueryParameters] = useState<ParameterValues | null>(null)
-  const fetchData = async (parameters: ParameterValues) => {
+  const fetchData = async (baseQueyrUri: string, parameters: ParameterValues, method: string = 'GET') => {
     const accessToken = user?.access_token;
     const queryString = new URLSearchParams();
     queryString.append('listing_type', parameters.listing_type)
@@ -51,34 +52,39 @@ function App() {
       queryString.append("min_sqm", parameters.min_sqm.toString());
     }
 
-
-    try {
-      const response = await fetch("/api/listing_geojson?" + queryString,
-        {
-          method: 'GET',
-          headers: {
-            'Authorization': `Bearer ${accessToken}`, // Pass the token
-            'Content-Type': 'application/json',
-          },
-        }
-      );
-      if (!response.ok) throw new Error('Error: ' + response.json());
-      const data: Response = await response.json();
-      return data;
-    } catch (err) {
-      setError('Failed to fetch data: ' + err);
-      alert(JSON.stringify(err))
-    } finally {
+    const response = await fetch(baseQueyrUri + '?' + queryString,
+      {
+        method: method,
+        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;
   };
-  const onSubmit = async (parameters: ParameterValues) => {
+  const onSubmit = async (action: 'fetch-data' | 'visualize', parameters: ParameterValues) => {
     // Fetch listing data
     setQueryParameters(parameters)
-    const data = await fetchData(parameters);
-    console.log(data)
-    if (data) {
-      setListingData(data);
+    setIsParametersModalOpen(false)
+    let data = null;
+    if (action === 'visualize') {
+      data = await fetchData("/api/listing_geojson", parameters);
+      if (data) {
+        setListingData(data);
+      }
+    } else if (action === 'fetch-data') {
+      data = await fetchData("/api/refresh_listings", parameters, 'POST');
+      if (data) {
+        // @ts-expect-error
+        setTaskID(data.task_id)
+      }
     }
+    console.log(data)
     setIsParametersModalOpen(false)
 
   }
@@ -116,6 +122,7 @@ function App() {
               <h1>Welcome, {user.profile.name}!</h1>
               <Button onClick={logout}>Logout</Button>
               <Parameters onSubmit={onSubmit} isOpen={isParametersModalOpen} />
+              <ActiveQuery taskID={taskID} />
             </div>
             {Object.keys(listingData).length > 0 &&
               <div className="flex-1 w-full relative" style={{ minHeight: 0, marginBottom: '8rem' }}>