setup map component to render correctly and visualize all listings in scrollable components

crawler/frontend/src/App.tsx

@@ -1,10 +1,15 @@
 import type { User } from 'oidc-client-ts';
 import { useEffect, useState } from 'react';
 import './App.css';
+import { AppSidebar } from './AppSidebar';
 import { getUser, handleCallback, logout } from './auth/authService';
 import LoginModal from './components/LoginModal';
 import { Map } from './components/Map';
 import { Parameters } from './components/Parameters';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './components/ui/breadcrumb';
+import { Button } from './components/ui/button';
+import { Separator } from './components/ui/separator';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from './components/ui/sidebar';
 
 function App() {
   const [listingData, setListingData] = useState({});
@@ -23,46 +28,91 @@ function App() {
     getUser().then(setUser);
   }, []);
 
+  const [isLoading, setIsLoading] = useState(false)
+  const [isParametersModalOpen, setIsParametersModalOpen] = useState(true)
+  const [error, setError] = useState('')
+  const fetchData = async () => {
+    setIsLoading(true);
+
+    try {
+      const accessToken = user?.access_token;
+      const response = await fetch('/api/listing_geojson',
+        {
+          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(error)
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const onSubmit = async () => {
+    // Fetch listing data
+    const data = await fetchData();
+    if (data) {
+      setListingData(data);
+    }
+    setIsLoading(false);
+    setIsParametersModalOpen(false)
+
+  }
+
   if (!user) {
     return <LoginModal isOpen={user === null} />
   }
-
+  const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17];
 
   return (
     <>
-      <div>
-        <p>Welcome, {user.profile.name}!</p>
-        <button onClick={logout}>Logout</button>
-      </div>
-      {/* <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p> */}
+      <SidebarProvider defaultOpen={false}>
+        <AppSidebar />
+        <SidebarInset>
+          <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator
+              orientation="vertical"
+              className="mr-2 data-[orientation=vertical]:h-4"
+            />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </header>
+          <div className="flex flex-col h-screen w-full">
+            <div className="flex gap-2 p-2 bg-gray-100">
+              <h1>Welcome, {user.profile.name}!</h1>
+              <Button onClick={logout}>Logout</Button>
+              <Parameters onSubmit={onSubmit} isOpen={isParametersModalOpen} />
+            </div>
+            {Object.keys(listingData).length > 0 &&
+              <div className="flex-1 w-full relative" style={{ minHeight: 0, marginBottom: '8rem' }}>
+                <Map listingData={listingData} />
+              </div>
+            }
+          </div>
 
-      {/* <link href='https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css' rel='stylesheet' /> */}
-      <Parameters setListingData={setListingData} />
-      {Object.keys(listingData).length > 0 &&
 
-        <div style={{ width: '100%' }}>
-          <Map listingData={listingData} />
-        </div>
-      }
+
+        </SidebarInset>
+      </SidebarProvider>
     </>
   )
 }