diff --git a/frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js b/frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js
index 2dc6860b..47b1899c 100644
--- a/frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js
+++ b/frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js
@@ -65,6 +65,8 @@ const AOI = (props) => {
const [openSnack, setOpenSnack] = useState(false);
const [fileError, setFileError] = useState(null);
const [geoJsonFile, setGeoJsonFile] = useState(null);
+ const [fetchError, setFetchError] = useState(null);
+
let _DATA = usePagination(
props.mapLayers.filter((e) => e.type === "aoi"),
PER_PAGE
@@ -80,6 +82,7 @@ const AOI = (props) => {
const { accessToken } = useContext(AuthContext);
const fetchOSMLebels = async (aoiId) => {
+ setFetchError(null);
try {
const headers = {
"access-token": accessToken,
@@ -91,15 +94,21 @@ const AOI = (props) => {
if (res.error) {
console.log(res.error.response.statusText);
+ setFetchError("Failed to fetch OSM data. Please try again.");
} else {
return res.data;
}
} catch (e) {
console.log("isError", e);
+ setFetchError("Failed to fetch OSM data. Please check your connection.");
}
};
- const { mutate: mutateFetch, data: fetchResult } =
- useMutation(fetchOSMLebels);
+
+ const { mutate: mutateFetch } = useMutation(fetchOSMLebels, {
+ onError: () => {
+ setFetchError("Failed to fetch OSM data. Please try again.");
+ },
+ });
const DeleteAOI = async (id, leafletId) => {
try {
@@ -408,6 +417,11 @@ const AOI = (props) => {
))}
+ {fetchError && (
+
+ {fetchError}
+
+ )}
{props.mapLayers && props.mapLayers.length === 0 && (
No TAs yet, start creating one by clicking Draw a rectangle, 3rd