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