add minimal working version where we fetch data and visualize it corectly

This commit is contained in:
Viktor Barzin 2025-06-15 12:48:52 +00:00
parent b995bc2286
commit 4c7fe8927b
No known key found for this signature in database
GPG key ID: 4056458DBDBF8863
8 changed files with 1110 additions and 293 deletions

View file

@ -1,8 +1,11 @@
import { useState } from "react";
import { useAuth } from "react-oidc-context";
export function Parameters() {
const [data, setData] = useState({});
export function Parameters(
props: {
setListingData: (data: any) => void,
}
) {
const [error, setError] = useState('')
const [isLoading, setIsLoading] = useState(false)
const { user } = useAuth(); // Get user data (includes token)
@ -11,7 +14,7 @@ export function Parameters() {
try {
const accessToken = user?.access_token;
const response = await fetch('/api/listing',
const response = await fetch('/api/listing_geojson',
{
method: 'GET',
headers: {
@ -22,14 +25,14 @@ export function Parameters() {
);
if (!response.ok) throw new Error('Error: ' + response.json());
const data: Response = await response.json();
setData(data);
props.setListingData(data);
} catch (err) {
setError('Failed to fetch data: ' + err);
alert(error)
} finally {
setIsLoading(false);
}
};
console.log(data)
return <>
<div className="modal modal-open" id="modal_overlay">
@ -65,8 +68,8 @@ export function Parameters() {
<hr className="modal-buttons-seperator" />
<label >What to visualize?</label>
<select className="u-full-width" id="heatmap_type" rv-value="filter.mode">
<option selected={true} value="qmprice">Price per squaremeter</option>
<select defaultValue={'qmprice'} className="u-full-width" id="heatmap_type" rv-value="filter.mode">
<option value="qmprice">Price per squaremeter</option>
<option value="rooms">Number of rooms</option>
<option value="qm">Squaremeter</option>
<option value="total_price">Price</option>