feat: display area search results in misc submenu

mapper/src/App.js

@@ -314,6 +314,7 @@ function Map({data, loading, end, duration, slider, mapState, setMapState, setSu
 function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, submenu, setSubmenu, showDirection, setShowDirection, setMapState, shareStart, shareEnd, drawnItems}) {
 	const [showRange, setShowRange] = useState(false);
 	const [isSearching, setIsSearching] = useState(false);
+	const [searchResults, setSearchResults] = useState(null);
 
 	const chooseDuration = (x) => {
 		setSubmenu(false);
@@ -451,7 +452,6 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 		const drawnRectangles = drawnItems.map(item => item.bounds);
 		if (!drawnRectangles.length) {
 			alert("Please draw one or more rectangles on the map first.");
-			setSubmenu(false);
 			return;
 		}
 
@@ -474,16 +474,13 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 				{ params: params }
 			);
 
-			console.log('Search results:', res.data);
-			alert('Search complete. Check the browser console for results.');
+			setSearchResults(res.data);
 		} catch (error) {
 			console.error('Error during area search:', error);
 			alert('An error occurred during the search.');
 		} finally {
 			setIsSearching(false);
 		}
-
-		setSubmenu(false);
 	};
 
 	const range = parseSlider(end, duration, slider);
@@ -643,24 +640,44 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 					{submenu === 'misc' &&
 						<>
 							<div className='submenu-header'>
-								<h2>Misc</h2>
-								<button onClick={() => setSubmenu(false)}>×</button>
+								<h2>{searchResults ? 'Search Results' : 'Misc'}</h2>
+								{searchResults ? (
+									<button onClick={() => setSearchResults(null)}>&lt; Back</button>
+								) : (
+									<button onClick={() => setSubmenu(false)}>×</button>
+								)}
 							</div>
-							<label className="submenu-checkbox-label">
-								<input
-									type="checkbox"
-									checked={showDirection}
-									onChange={e => setShowDirection(e.target.checked)}
-								/>
-								Show direction
-							</label>
-							<button onClick={recentreView}>Recentre view</button>
-							<button onClick={excludeArea}>Exclude area</button>
-							<button onClick={searchArea} disabled={isSearching}>
-								{isSearching ? 'Searching...' : 'Search area'}
-							</button>
-							<button onClick={shareRange}>Share range</button>
-							<button onClick={resetToDefaults}>Reset page</button>
+							{searchResults ? (
+								<>
+									{searchResults.length > 0 ? (
+										searchResults.map((result, index) => (
+											<button key={index}>
+												{rangeTime(moment.unix(result.start))} - {rangeTime(moment.unix(result.end))}
+											</button>
+										))
+									) : (
+										<p style={{color: 'white', textAlign: 'center', padding: '1em 0'}}>No results found.</p>
+									)}
+								</>
+							) : (
+								<>
+									<label className="submenu-checkbox-label">
+										<input
+											type="checkbox"
+											checked={showDirection}
+											onChange={e => setShowDirection(e.target.checked)}
+										/>
+										Show direction
+									</label>
+									<button onClick={recentreView}>Recentre view</button>
+									<button onClick={excludeArea}>Exclude area</button>
+									<button onClick={searchArea} disabled={isSearching}>
+										{isSearching ? 'Searching...' : 'Search area'}
+									</button>
+									<button onClick={shareRange}>Share range</button>
+									<button onClick={resetToDefaults}>Reset page</button>
+								</>
+							)}
 						</>
 					}
 				</div>