Realtime refreshing implementation

extend.php

@@ -28,6 +28,8 @@
 
     new Extend\Locales(__DIR__.'/locale'),
 
+    (new Extend\Routes('api'))
+        ->get('/online-users', 'afrux.online-users.list', Api\Controller\ListOnlineUsersController::class),
     (new Extend\ApiSerializer(FlarumSerializer\ForumSerializer::class))
         ->attribute('canViewOnlineUsersWidget', function ($serializer) {
             return $serializer->getActor()->hasPermission('viewOnlineUsersWidget');
@@ -44,5 +46,6 @@
     (new Extend\Settings)
         ->default('afrux-online-users-widget.max_users', 15)
         ->default('afrux-online-users-widget.cache_ttl', 30)
-        ->default('afrux-online-users-widget.last_seen_interval', 5),
+        ->default('afrux-online-users-widget.last_seen_interval', 5)
+        ->serializeToForum('afrux-online-users-widget.maxUsers', 'afrux-online-users-widget.max_users', 'intval'),
 ];

js/src/common/components/OnlineUsersWidget.tsx

@@ -10,6 +10,17 @@ import type User from 'flarum/common/models/User';
 import Widget, { type WidgetAttrs } from 'flarum/extensions/afrux-forum-widgets-core/common/components/Widget';
 
 export default class OnlineUsersWidget extends Widget<WidgetAttrs> {
+
+  oncreate(vnode): void {
+    this.attrs.state.users = app.forum.onlineUsers() || [];
+    this.attrs.state.total = app.forum.totalOnlineUsers() || 0;
+    if (!this.attrs.state.timerAdded) {
+    console.log("onliner timer added");
+        setInterval(this.load.bind(this), 120000);
+        this.attrs.state.timerAdded = true;
+    }
+  }
+
   className(): string {
     return 'Afrux-OnlineUsersWidget';
   }
@@ -26,9 +37,11 @@ export default class OnlineUsersWidget extends Widget<WidgetAttrs> {
     if (this.attrs.state.isLoading) {
       return <LoadingIndicator />;
     }
-
-    const users = app.forum.onlineUsers() || [];
-    const total = app.forum.totalOnlineUsers() || 0;
+
+    this.attrs.state.users = (this.attrs.state.users || app.forum.onlineUsers()) || [];
+    const users = this.attrs.state.users;
+    this.attrs.state.total = (this.attrs.state.total || app.forum.totalOnlineUsers()) || 0;
+    const total = this.attrs.state.total;
 
     return (
       <div className="Afrux-OnlineUsersWidget-users">
@@ -43,11 +56,48 @@ export default class OnlineUsersWidget extends Widget<WidgetAttrs> {
           ))}
           {total > users.length ? (
             <span className="Afrux-OnlineUsersWidget-users-item Afrux-OnlineUsersWidget-users-item--plus">
-              <span className="Avatar">{`+${total - users.length}`}</span>
+              <span className="Avatar">{total < 50? `+${total - users.length}` : `+${50 - users.length}...`}</span>
             </span>
           ) : null}
         </div>
       </div>
     );
   }
+
+  async load(): Promise<void> {
+    if (this.loadWithInitialResponse) {
+      this.setResults(app.forum.onlineUsers());
+      return;
+    }
+
+    this.attrs.state.isLoading = true;
+
+    try {
+      const response = await app.request<OnlineUsersResponse>({
+        method: 'GET',
+        url: app.forum.attribute('apiUrl') + '/online-users'
+      });
+
+      app.store.pushPayload(response);
+
+      const users = response.data.map(userData => 
+        app.store.getById('users', userData.id)
+      );
+
+      this.setResults(users, response.meta);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      this.attrs.state.isLoading = false;
+    }
+  }
+
+  setResults(data, meta) {
+    this.attrs.state.users = data;
+    this.attrs.state.total = meta?.totalCount;
+    this.attrs.state.isLoading = false;
+    this.attrs.state.hasLoaded = true;
+    m.redraw();
+    console.log("redrew");
+  }
 }

src/Api/Controller/ListOnlineUsersController.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace Afrux\OnlineUsers\Api\Controller;
+
+use Flarum\Api\Controller\AbstractListController;
+use Flarum\Http\RequestUtil;
+use Psr\Http\Message\ServerRequestInterface;
+use Tobscure\JsonApi\Document;
+use Afrux\OnlineUsers\UserRepository;
+use Flarum\Api\Serializer\UserSerializer;
+
+class ListOnlineUsersController extends AbstractListController
+{
+    public $serializer = UserSerializer::class;
+
+    protected $repository;
+
+    public function __construct(UserRepository $repository)
+    {
+        $this->repository = $repository;
+    }
+
+    protected function data(ServerRequestInterface $request, Document $document)
+    {
+        $actor = RequestUtil::getActor($request);
+        $actor->assertCan('viewOnlineUsersWidget');
+
+        $limit = $this->extractLimit($request);
+        $offset = $this->extractOffset($request);
+
+        $result = $this->repository->getOnlineUsers($actor);
+        $document->setMeta([
+            'totalCount' => $result['count'],
+        ]);
+        return $result['users'];
+    }
+}