imp: Improve the feedback of the news button

src/Router.php

@@ -115,6 +115,7 @@ public static function load(): \Minz\Router
         // News page
         $router->addRoute('GET', '/news', 'News#index', 'news');
         $router->addRoute('POST', '/news', 'News#create', 'fill news');
+        $router->addRoute('GET', '/news/available.json', 'News#showAvailable', 'news available');
 
         // Collections
         $router->addRoute('GET', '/collections', 'Collections#index', 'collections');

src/assets/javascripts/application.js

@@ -14,6 +14,7 @@ import InputPasswordController from 'js/controllers/input_password_controller.js
 import LinkSuggestionController from 'js/controllers/link_suggestion_controller.js';
 import ModalController from 'js/controllers/modal_controller.js';
 import ModalOpenerController from 'js/controllers/modal_opener_controller.js';
+import NewsRefresherController from 'js/controllers/news_refresher_controller.js';
 import PopupController from 'js/controllers/popup_controller.js';
 import TextEditorController from 'js/controllers/text_editor_controller.js';
 
@@ -33,6 +34,7 @@ application.register('input-password', InputPasswordController);
 application.register('link-suggestion', LinkSuggestionController);
 application.register('modal', ModalController);
 application.register('modal-opener', ModalOpenerController);
+application.register('news-refresher', NewsRefresherController);
 application.register('popup', PopupController);
 application.register('text-editor', TextEditorController);
 

src/assets/javascripts/controllers/news_refresher_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static values = {
+        url: String,
+    };
+
+    static get targets () {
+        return ['button'];
+    }
+
+    connect () {
+        this.checkAvailableNews();
+        setInterval(this.checkAvailableNews.bind(this), 5 * 60 * 1000);
+    }
+
+    async checkAvailableNews () {
+        const response = await fetch(this.urlValue);
+        const data = await response.json();
+        if (data.available) {
+            this.buttonTarget.classList.add('button--primary');
+        } else {
+            this.buttonTarget.classList.remove('button--primary');
+        }
+    }
+};

src/assets/stylesheets/custom/news.css

@@ -1,3 +1,7 @@
+.news__refresh-button[disabled] .icon {
+    animation: icon-spin 5s linear infinite;
+}
+
 @media (max-width: 799px) {
     .news-selection__button {
         display: flex;

src/controllers/News.php

@@ -135,4 +135,25 @@ public function create(Request $request): Response
 
         return Response::redirect('news');
     }
+
+    public function showAvailable(Request $request): Response
+    {
+        $user = auth\CurrentUser::get();
+
+        if (!$user) {
+            return Response::redirect('login', [
+                'redirect_to' => \Minz\Url::for('news'),
+            ]);
+        }
+
+        $news_picker = new services\NewsPicker($user, [
+            'number_links' => 1,
+            'from' => 'followed',
+        ]);
+        $links = $news_picker->pick();
+
+        return Response::json(200, [
+            'available' => count($links) > 0,
+        ]);
+    }
 }

src/views/news/index.phtml

@@ -210,12 +210,23 @@
         <?= $this->include('alerts/_info.phtml', ['message' => no_news_sentence($beta_enabled)]) ?>
     <?php endif; ?>
 
-    <form class="text--centered" method="post" action="<?= url('fill news') ?>">
+    <form
+        class="text--centered"
+        method="post"
+        action="<?= url('fill news') ?>"
+        data-controller="news-refresher"
+        data-news-refresher-url-value="<?= url('news available') ?>"
+    >
         <?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>
 
         <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
 
-        <button class="button--primary" name="type" value="newsfeed">
+        <button
+            class="news__refresh-button"
+            name="type"
+            value="newsfeed"
+            data-news-refresher-target="button"
+        >
             <?= icon('sync') ?>
             <?= _('Refresh the news') ?>
         </button>