feat: group search results by month and year

mapper/src/App.js

@@ -650,11 +650,36 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 							{searchResults ? (
 								<>
 									{searchResults.length > 0 ? (
-										searchResults.map((result, index) => (
-											<button key={index}>
-												{rangeTime(moment.unix(result.start))} - {rangeTime(moment.unix(result.end))}
-											</button>
-										))
+										(() => {
+											const groupedResults = searchResults.reduce((acc, result) => {
+												const groupKey = moment.unix(result.start).format('MMMM YYYY');
+												if (!acc[groupKey]) {
+													acc[groupKey] = [];
+												}
+												acc[groupKey].push(result);
+												return acc;
+											}, {});
+
+											const formatShortTime = (unixTimestamp) => {
+												const m = moment.unix(unixTimestamp);
+												if (new Date().getTimezoneOffset()) {
+													return m.format('D, h:mm A');
+												} else {
+													return m.tz('America/Edmonton').format('D, h:mm A');
+												}
+											};
+
+											return Object.entries(groupedResults).map(([groupKey, results]) => (
+												<div key={groupKey}>
+													<h3 style={{ color: 'white', margin: '0.5em 0 0.25em', fontSize: '1em', fontWeight: 'normal', textAlign: 'center' }}>{groupKey}</h3>
+													{results.map((result, index) => (
+														<button key={index}>
+															{formatShortTime(result.start)} - {formatShortTime(result.end)}
+														</button>
+													))}
+												</div>
+											));
+										})()
 									) : (
 										<p style={{color: 'white', textAlign: 'center', padding: '1em 0'}}>No results found.</p>
 									)}