From 15162cf5bcdda4171411f628aaac621ac1c267c4 Mon Sep 17 00:00:00 2001
From: Ian Dunn <ian@iandunn.name>
Date: Thu, 14 Dec 2023 15:51:35 -0800
Subject: [PATCH] add notice for no local events found

---
 .../postcss/base/layout.pcss                  |  6 +++
 .../src/event-list/index.php                  | 42 +++++++++++++------
 .../wporg-events-2023/src/event-list/view.js  | 20 +++++----
 3 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss
index f952d89dba..08b17b7a08 100644
--- a/public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss
+++ b/public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss
@@ -14,3 +14,9 @@ body {
 .wporg-events__hidden {
 	display: none;
 }
+
+.wporg-marker-list__loading {
+	/* The final height could be anywhere between 50px and 750px, so split the difference in order to avoid a big
+	 * jump when it loads. */
+	height: 350px;
+}
diff --git a/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php b/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php
index e305b248fe..336f4ff693 100644
--- a/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php
+++ b/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php
@@ -67,7 +67,7 @@ function enqueue_assets() {
  */
 function render( $attributes, $content, $block ) {
 	if ( 'nearby' === $attributes['events'] ) {
-		$content = get_nearby_loading();
+		$content = get_nearby_events_markup();
 	} else {
 		$content = get_all_upcoming( $attributes['events'], $attributes['limit'], $attributes['groupByMonth'] );
 	}
@@ -121,17 +121,35 @@ function( $a, $b ) {
 }
 
 //
-function get_nearby_loading() {
-	return sprintf(
-		'<p class="wporg-marker-list__loading">
-			Loading nearby events...
-            <img src="%s" width="20" height="20" alt="" />
-        </p>
-
-        %s',
-		esc_url( includes_url( 'images/spinner-2x.gif' ) ),
-		get_list_markup( array() )
-	);
+function get_nearby_events_markup() {
+	ob_start();
+
+	?>
+
+	<p class="wporg-marker-list__loading">
+		Loading nearby events...
+		<img
+			src="<?php echo esc_url( includes_url( 'images/spinner-2x.gif' ) ); ?>>"
+			width="20"
+			height="20"
+			alt=""
+		/>
+	</p>
+
+	<?php echo get_list_markup( array() ); ?>
+
+	<!-- wp:wporg/notice {"type":"warning","className":"wporg-marker-list__no-results wporg-events__hidden"} -->
+	<div class="wp-block-wporg-notice is-warning-notice wporg-marker-list__no-results wporg-events__hidden">
+		<p>
+			There are no events scheduled near you at the moment. You can <a href="<?php echo esc_url( home_url( 'upcoming-events/' ) ); ?>">browse global events</a>, or
+			<a href="https://make.wordpress.org/community/handbook/meetup-organizer/welcome/" class="external-link">learn how to organize an event in your area</a>.
+		</p>
+	</div>
+	<!-- /wp:wporg/notice -->
+
+	<?php
+
+	return ob_get_clean();
 }
 
 /**
diff --git a/public_html/wp-content/themes/wporg-events-2023/src/event-list/view.js b/public_html/wp-content/themes/wporg-events-2023/src/event-list/view.js
index d66c90f6f0..8dae445cc0 100644
--- a/public_html/wp-content/themes/wporg-events-2023/src/event-list/view.js
+++ b/public_html/wp-content/themes/wporg-events-2023/src/event-list/view.js
@@ -4,6 +4,7 @@ document.addEventListener( 'DOMContentLoaded', function() {
 	const nearbyEventList = document.getElementById( 'front-event-list-nearby' );
 	const globalEventList = document.getElementById( 'front-event-list-global' );
 	const chipsContainer  = document.querySelector( '.wporg-events__nearby-chips' );
+	const noEventsMessage = document.querySelector( '.wporg-marker-list__no-results' );
 
 	//
 	function init() {
@@ -59,7 +60,7 @@ document.addEventListener( 'DOMContentLoaded', function() {
 		const blockContainer = document.getElementById( 'front-event-list-nearby' );
 		const loadingElement = blockContainer.querySelector( '.wporg-marker-list__loading' );
 		const listContainer = blockContainer.querySelector( '.wporg-marker-list__container' );
-//return;
+
 		try {
 			/*
 			 * This uses `fetch()` directly instead of `apifetch()`, because the latter is only intended for interacting
@@ -70,13 +71,18 @@ document.addEventListener( 'DOMContentLoaded', function() {
 			const response = await fetch( url, requestParams );
 			results = await response.json();
 
-			for ( let i = 0; i < results.events.length; i++ ) {
-				const eventDiv = document.createElement( 'li' );
-				eventDiv.classList.add( 'wporg-marker-list-item' );
-				eventDiv.innerHTML = renderEvent( results.events[ i ] );
-				listContainer.appendChild( eventDiv );
+			if ( results.events.length > 0 ) {
+				for ( let i = 0; i < results.events.length; i++ ) {
+					const eventDiv = document.createElement( 'li' );
+					eventDiv.classList.add( 'wporg-marker-list-item' );
+					eventDiv.innerHTML = renderEvent( results.events[ i ] );
+					listContainer.appendChild( eventDiv );
+					// review for security
+				}
+
+			} else {
+				noEventsMessage.classList.remove( 'wporg-events__hidden' );
 			}
-			// review for security
 
 		} catch ( error ) {
 			// This matches the format returned by the API for application-layer errors (e.g., invalid API key).