viktor/wrongmove
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

handle errors better in the ui with an alert component

Browse source
This commit is contained in:
Viktor Barzin 2025-06-21 17:26:45 +00:00
parent 5bd4562205
commit b1cbe8505a
No known key found for this signature in database
GPG key ID: 4056458DBDBF8863
8 changed files with 351 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

103
crawler/frontend/src/App.tsx
View file

@ -4,6 +4,7 @@ import './App.css';
import { AppSidebar } from './AppSidebar';
import { getUser, handleCallback, logout } from './auth/authService';
import ActiveQuery from './components/ActiveQuery';
import AlertError from './components/AlertError';
import LoginModal from './components/LoginModal';
import { Map } from './components/Map';
import { Parameters, type ParameterValues } from './components/Parameters';
@ -12,10 +13,51 @@ import { Button } from './components/ui/button';
import { Separator } from './components/ui/separator';
import { SidebarInset, SidebarProvider, SidebarTrigger } from './components/ui/sidebar';
const fetchData = async (user: User, baseQueyrUri: string, parameters: ParameterValues, method: string = 'GET') => {
const accessToken = user.access_token;
const queryString = new URLSearchParams();
queryString.append('listing_type', parameters.listing_type)
if (parameters.min_bedrooms) {
queryString.append('min_bedrooms', parameters.min_bedrooms.toString());
}
if (parameters.max_bedrooms) {
queryString.append('max_bedrooms', parameters.max_bedrooms.toString())
}
if (parameters.max_price) {
queryString.append("max_price", parameters.max_price.toString());
}
if (parameters.min_price) {
queryString.append("min_price", parameters.min_price.toString());
}
if (parameters.min_sqm) {
queryString.append("min_sqm", parameters.min_sqm.toString());
}
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;
};
function App() {
const [listingData, setListingData] = useState({});
const [taskID, setTaskID] = useState<string | null>(null);
const [user, setUser] = useState<User | null>(null);
const [isParametersModalOpen, setIsParametersModalOpen] = useState(true);
const [queryParameters, setQueryParameters] = useState<ParameterValues | null>(null);
const [submitError, setSubmitError] = useState<string | null>(null);
const [alertDialogIsOpen, setAlertDialogIsOpen] = useState(false);
useEffect(() => {
// Check if this is a callback from Authentik (after login)
@ -30,68 +72,40 @@ function App() {
getUser().then(setUser);
}, []);
const [isParametersModalOpen, setIsParametersModalOpen] = useState(true)
const [queryParameters, setQueryParameters] = useState<ParameterValues | null>(null)
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)
if (parameters.min_bedrooms) {
queryString.append('min_bedrooms', parameters.min_bedrooms.toString());
}
if (parameters.max_bedrooms) {
queryString.append('max_bedrooms', parameters.max_bedrooms.toString())
}
if (parameters.max_price) {
queryString.append("max_price", parameters.max_price.toString());
}
if (parameters.min_price) {
queryString.append("min_price", parameters.min_price.toString());
}
if (parameters.min_sqm) {
queryString.append("min_sqm", parameters.min_sqm.toString());
}
if (!user) {
return <LoginModal isOpen={user === null} />
}
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 (action: 'fetch-data' | 'visualize', parameters: ParameterValues) => {
// Fetch listing data
setQueryParameters(parameters)
setIsParametersModalOpen(false)
let data = null;
if (action === 'visualize') {
data = await fetchData("/api/listing_geojson", parameters);
try {
data = await fetchData(user, "/api/listing_geojson", parameters);
} catch (error) {
setSubmitError(error.message)
setAlertDialogIsOpen(true)
}
if (data) {
setListingData(data);
}
} else if (action === 'fetch-data') {
data = await fetchData("/api/refresh_listings", parameters, 'POST');
try {
data = await fetchData(user, "/api/refresh_listings", parameters, 'POST');
} catch (error) {
setSubmitError(error.message)
setAlertDialogIsOpen(true)
}
if (data) {
// @ts-expect-error
setTaskID(data.task_id)
}
}
console.log(data)
setIsParametersModalOpen(false)
}
if (!user) {
return <LoginModal isOpen={user === null} />
}
return (
<>
<SidebarProvider defaultOpen={false}>
@ -121,8 +135,9 @@ function App() {
<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} />
<Parameters onSubmit={onSubmit} isOpen={isParametersModalOpen} setIsOpen={setIsParametersModalOpen} />
<ActiveQuery taskID={taskID} />
<AlertError message={submitError} open={alertDialogIsOpen} setIsOpen={setAlertDialogIsOpen} />
</div>
{Object.keys(listingData).length > 0 &&
<div className="flex-1 w-full relative" style={{ minHeight: 0, marginBottom: '8rem' }}>