diff --git a/mapper/src/App.js b/mapper/src/App.js index bbc7a27..10e7f1c 100644 --- a/mapper/src/App.js +++ b/mapper/src/App.js @@ -315,6 +315,23 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm const [showRange, setShowRange] = useState(false); const [isSearching, setIsSearching] = useState(false); const [searchResults, setSearchResults] = useState(null); + const scrollContainerRef = useRef(null); + const scrollPositionRef = useRef(0); + + useEffect(() => { + const container = scrollContainerRef.current; + if (container) { + // Restore scroll position when results are shown + container.scrollTop = scrollPositionRef.current; + } + + return () => { + // Save scroll position when results are hidden + if (container) { + scrollPositionRef.current = container.scrollTop; + } + }; + }, [searchResults]); const chooseDuration = (x) => { setSubmenu(false); @@ -648,10 +665,12 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm )} {searchResults ? ( - <> +
{searchResults.length > 0 ? ( (() => { - const groupedResults = searchResults.reduce((acc, result) => { + const sortedResults = [...searchResults].sort((a, b) => b.start - a.start); + + const groupedResults = sortedResults.reduce((acc, result) => { const groupKey = moment.unix(result.start).format('YYYY'); if (!acc[groupKey]) { acc[groupKey] = []; @@ -669,7 +688,9 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm } }; - return Object.entries(groupedResults).map(([groupKey, results]) => ( + return Object.entries(groupedResults) + .sort(([yearA], [yearB]) => yearB - yearA) + .map(([groupKey, results]) => (

{groupKey}

{results.map((result, index) => ( @@ -683,7 +704,7 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm ) : (

No results found.

)} - +
) : ( <>