add notice for no local events found

WordPress · Dec 15, 2023 · ef3cbbc · ef3cbbc
1 parent dd8fb97
commit ef3cbbc
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 24 deletions.
diff --git a/public_html/wp-content/themes/wporg-events-2023/functions.php b/public_html/wp-content/themes/wporg-events-2023/functions.php
@@ -18,6 +18,7 @@
 add_filter( 'jetpack_open_graph_tags', __NAMESPACE__ . '\add_meta_description' );
 add_filter( 'jetpack_open_graph_output', __NAMESPACE__ . '\add_generic_meta_description' );
 
+
 /**
  * Register theme supports.
  */

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
@@ -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
@@ -38,16 +38,12 @@ function enqueue_assets() {
 	require_once ABSPATH . 'wp-admin/includes/class-wp-community-events.php';
 
 	$data = array(
-		//'nonce'       => wp_create_nonce( 'community_events' ), // wont need b/c fetching via  api directly?
-		//'time_format' => get_option( 'time_format' ), // wont need b/c the block uses js?
-		'ip'		  => WP_Community_Events::get_unsafe_client_ip(),
-			// for... ugh now i've forgotten b/c copilot is so distracting
+		'ip' => WP_Community_Events::get_unsafe_client_ip(),
 	);
 
 	if ( is_user_logged_in() ) {
 		$data['locale'] = get_user_locale( get_current_user_id() );
 	}
-	// test logged in and out
 
 	wp_add_inline_script(
 		'wporg-event-list-view-script',
@@ -67,7 +63,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 +117,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
@@ -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() {
@@ -41,6 +42,7 @@ document.addEventListener( 'DOMContentLoaded', function() {
 
 		const payload = {
 			ip: communityEventsData.ip,
+			//location: 'nowheresville',
 			timezone: window.Intl ? window.Intl.DateTimeFormat().resolvedOptions().timeZone : '',
 			number: 10,
 		};
@@ -59,7 +61,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 +72,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).