Add show more events button below the events list #22 (#24)

source/changelog.txt

@@ -1,5 +1,6 @@
 ### [Unreleased]
 #### Added
+- Display "Show more events" button below the events list
 #### Changed
 #### Deprecated
 #### Removed

source/connector-mobilizon.php

@@ -56,7 +56,8 @@ final class Mobilizon_Connector {
     $settings = array(
       'isShortOffsetNameShown' => MobilizonConnector\Settings::isShortOffsetNameShown(),
       'locale' => str_replace('_', '-', get_locale()),
-      'timeZone' => wp_timezone_string()
+      'timeZone' => wp_timezone_string(),
+      'url' => MobilizonConnector\Settings::getUrl()
     );
     wp_add_inline_script($scriptName, 'var MOBILIZON_CONNECTOR = ' . json_encode($settings), 'before');
   }

source/front/blocks/events-list/edit.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable @wordpress/i18n-ellipsis */
 import {
   clearEventsList,
@@ -30,9 +31,12 @@ export default ({ attributes, setAttributes }) => {
         clearEventsList(container)
         showLoadingIndicator(container)
         let url = `/wp-json/connector-mobilizon/v1/events?eventsCount=${eventsCount}`
+        let showMoreUrl = window.MOBILIZON_CONNECTOR.url
         if (groupName) {
+          showMoreUrl += '/@' + groupName + '/events'
           url += `&groupName=${groupName}`
         }
+        container.querySelector('a').href = showMoreUrl
         await fetch(url)
           .then((response) => response.text())
           .then((data) => {
@@ -55,7 +59,9 @@ export default ({ attributes, setAttributes }) => {
   }, [])
   function updateEventsCount(event) {
     let newValue = Number(event.target.value)
-    if (newValue < 1) newValue = 1
+    if (newValue < 1) {
+      newValue = 1
+    }
     setAttributes({ eventsCount: newValue })
     reloadEventList(newValue, attributes.groupName)
   }
@@ -108,6 +114,13 @@ export default ({ attributes, setAttributes }) => {
         {__('Loading...', '<wordpress-name>')}
       </div>
       <ul style={{ 'list-style-type': 'none', 'padding-left': 0 }}></ul>
+      <a
+        href=""
+        target="_blank"
+        style={{ display: 'inline-block', 'margin-top': '20px;' }}
+      >
+        {__('Show more events', '<wordpress-name>')}
+      </a>
     </div>,
   ]
 }

source/includes/EventsListBlock.php

@@ -43,8 +43,10 @@ class EventsListBlock {
 
     ob_start();
     try {
+      $showMoreUrl = Settings::getUrl();
       if ($groupName) {
         $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+        $showMoreUrl .= '/@' . $groupName . '/events';
       } else {
         $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
       }

source/includes/EventsListShortcut.php

@@ -26,8 +26,10 @@ class EventsListShortcut {
 
     ob_start();
     try {
+      $showMoreUrl = Settings::getUrl();
       if ($groupName) {
         $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+        $showMoreUrl .= '/@' . $groupName . '/events';
       } else {
         $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
       }

source/includes/EventsListWidget.php

@@ -26,8 +26,10 @@ class EventsListWidget extends \WP_Widget {
     $classNamePrefix = NAME;
 
     try {
+      $showMoreUrl = Settings::getUrl();
       if ($groupName) {
         $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+        $showMoreUrl .= '/@' . $groupName . '/events';
       } else {
         $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
       }

source/view/events-list.php

@@ -23,4 +23,7 @@ if (!defined('ABSPATH')) {
     </li>
     <?php } ?>
   </ul>
+  <a href="<?php echo esc_attr($showMoreUrl); ?>" class="button" style="display:inline-block; margin-top: 20px;">
+    <?php esc_html_e('Show more events', 'connector-mobilizon'); ?>
+  </a>
 </div>