Add manual refresh to Beatmap Discussions page

app/Http/Controllers/BeatmapDiscussionsController.php

@@ -11,7 +11,6 @@
 use App\Models\BeatmapDiscussion;
 use App\Models\Beatmapset;
 use Auth;
-use Request;
 
 /**
  * @group Beatmapset Discussions
@@ -173,7 +172,7 @@ public function vote($id)
 
         priv_check('BeatmapDiscussionVote', $discussion)->ensureCan();
 
-        $params = get_params(Request::all(), 'beatmap_discussion_vote', ['score:int']);
+        $params = get_params(\Request::all(), 'beatmap_discussion_vote', ['score:int']);
         $params['user_id'] = Auth::user()->user_id;
 
         if ($discussion->vote($params)) {

app/Http/Controllers/BeatmapsetsController.php

@@ -129,40 +129,37 @@ public function search()
 
     public function discussion($id)
     {
-        $returnJson = Request::input('format') === 'json';
-        $requestLastUpdated = get_int(Request::input('last_updated'));
-
         $beatmapset = Beatmapset::findOrFail($id);
 
-        if ($returnJson) {
-            $lastDiscussionUpdate = $beatmapset->lastDiscussionTime();
-            $lastEventUpdate = $beatmapset->events()->max('updated_at');
-
-            if ($lastEventUpdate !== null) {
-                $lastEventUpdate = Carbon::parse($lastEventUpdate);
-            }
-
-            $latestUpdate = max($lastDiscussionUpdate, $lastEventUpdate);
-
-            if ($latestUpdate === null || $requestLastUpdated >= $latestUpdate->timestamp) {
-                return response([], 304);
-            }
-        }
-
         $initialData = [
             'beatmapset' => $beatmapset->defaultDiscussionJson(),
             'reviews_config' => Review::config(),
         ];
 
         BeatmapsetWatch::markRead($beatmapset, Auth::user());
 
-        if ($returnJson) {
+        if (is_json_request()) {
             return $initialData;
         } else {
             return ext_view('beatmapsets.discussion', compact('beatmapset', 'initialData'));
         }
     }
 
+    public function discussionCheckUpdates($id)
+    {
+        $beatmapset = Beatmapset::findOrFail($id);
+        $lastDiscussionUpdate = $beatmapset->lastDiscussionTime();
+        $lastEventUpdate = $beatmapset->events()->max('updated_at');
+
+        if ($lastEventUpdate !== null) {
+            $lastEventUpdate = Carbon::parse($lastEventUpdate);
+        }
+
+        $latestUpdate = max($lastDiscussionUpdate, $lastEventUpdate);
+
+        return response(['last_update' => $latestUpdate]);
+    }
+
     public function discussionUnlock($id)
     {
         priv_check('BeatmapsetDiscussionLock')->ensureCan();

resources/css/bem-index.less

@@ -21,7 +21,6 @@
 @import "bem/audio-player";
 @import "bem/audio-player-floating";
 @import "bem/avatar";
-@import "bem/back-to-top";
 @import "bem/badge-achievement";
 @import "bem/bar";
 @import "bem/bbcode-editor";
@@ -156,6 +155,8 @@
 @import "bem/fileupload";
 @import "bem/fixed-bar";
 @import "bem/flag-country";
+@import "bem/floating-toolbar";
+@import "bem/floating-toolbar-button";
 @import "bem/follow-mapper";
 @import "bem/follows-table";
 @import "bem/footer";

resources/css/bem/floating-toolbar-button.less

@@ -0,0 +1,31 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.floating-toolbar-button {
+  --circle-size: 50px;
+
+  .reset-input();
+  .center-content();
+  .default-box-shadow();
+  .circle(var(--circle-size));
+
+  font-size: calc(var(--circle-size) * 0.48);
+  background-color: hsl(var(--hsl-b5));
+  color: #fff;
+
+  &--updates {
+    &::before {
+      .circle(calc(var(--circle-size) * 0.2));
+      content: "";
+      position: absolute;
+      display: block;
+      top: 0;
+      right: 0;
+      background: hsl(var(--hsl-h1));
+    }
+  }
+
+  @media @mobile {
+    --circle-size: 40px;
+  }
+}

resources/css/bem/back-to-top.less → resources/css/bem/floating-toolbar.less

@@ -1,23 +1,19 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
-.back-to-top {
-  .reset-input();
-  .center-content();
-  .circle(50px);
-  .default-box-shadow();
-
+.floating-toolbar {
   position: fixed;
   bottom: 40px;
   right: 20px;
 
-  background-color: @osu-colour-b5;
-  color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
 
-  font-size: @font-size--title;
-  z-index: @z-index--back-to-top;
+  z-index: @z-index--floating-toolbar;
 
   @media @mobile {
-    display: none;
+    bottom: 10px;
+    right: 10px;
   }
 }

resources/css/variables.less

@@ -105,7 +105,7 @@
 @z-index--simple-menu: 101;
 @z-index--simple-menu-hover-object: 102;
 @z-index--admin-menu: 499;
-@z-index--back-to-top: 500;
+@z-index--floating-toolbar: 500;
 @z-index--audio-player-floating: 501;
 @z-index--fixed-bar: 502;
 @z-index--nav-bar: 509;

resources/js/beatmap-discussions/discussions-state.ts

@@ -236,16 +236,24 @@ export default class DiscussionsState {
 
   @computed
   get lastUpdate() {
+    return moment(this.lastUpdateRaw).unix();
+  }
+
+  @computed
+  get lastUpdateDate() {
+    return new Date(this.lastUpdateRaw);
+  }
+
+  @computed
+  get lastUpdateRaw() {
     const maxDiscussions = maxBy(this.beatmapset.discussions, 'updated_at')?.updated_at;
     const maxEvents = maxBy(this.beatmapset.events, 'created_at')?.created_at;
 
-    const maxLastUpdate = Math.max(
+    return Math.max(
       Date.parse(this.beatmapset.last_updated),
       maxDiscussions != null ? Date.parse(maxDiscussions) : 0,
       maxEvents != null ? Date.parse(maxEvents) : 0,
     );
-
-    return moment(maxLastUpdate).unix();
   }
 
   get calculatedMainRuleset() {

resources/js/beatmap-discussions/main.tsx

@@ -5,7 +5,6 @@ import NewReview from 'beatmap-discussions/new-review';
 import { ReviewEditorConfigContext } from 'beatmap-discussions/review-editor-config-context';
 import BackToTop from 'components/back-to-top';
 import BeatmapsetWithDiscussionsJson from 'interfaces/beatmapset-with-discussions-json';
-import { route } from 'laroute';
 import { action, makeObservable, observable, reaction, toJS } from 'mobx';
 import { observer } from 'mobx-react';
 import core from 'osu-core-singleton';
@@ -21,9 +20,8 @@ import { Events } from './events';
 import { Header } from './header';
 import { ModeSwitcher } from './mode-switcher';
 import { NewDiscussion } from './new-discussion';
+import { Refresh } from './refresh';
 
-const checkNewTimeoutDefault = 10000;
-const checkNewTimeoutMax = 60000;
 const beatmapsetJsonId = 'json-beatmapset';
 
 interface Props {
@@ -32,10 +30,6 @@ interface Props {
   };
 }
 
-interface UpdateResponseJson {
-  beatmapset: BeatmapsetWithDiscussionsJson;
-}
-
 @observer
 export default class Main extends React.Component<Props> {
   @observable private readonly discussionsState: DiscussionsState;
@@ -45,10 +39,7 @@ export default class Main extends React.Component<Props> {
   private readonly focusNewDiscussion = currentUrl().hash === '#new';
   private readonly modeSwitcherRef = React.createRef<HTMLDivElement>();
   private readonly newDiscussionRef = React.createRef<HTMLDivElement>();
-  private nextTimeout = checkNewTimeoutDefault;
   @observable private readonly store;
-  private timeoutCheckNew?: number;
-  private xhrCheckNew?: JQuery.jqXHR<UpdateResponseJson>;
 
   constructor(props: Props) {
     super(props);
@@ -83,8 +74,6 @@ export default class Main extends React.Component<Props> {
         }),
       );
     })));
-
-    this.timeoutCheckNew = window.setTimeout(this.checkNew, checkNewTimeoutDefault);
   }
 
   componentWillUnmount() {
@@ -135,44 +124,18 @@ export default class Main extends React.Component<Props> {
             />
           </ReviewEditorConfigContext.Provider>
         )}
-        <BackToTop />
+        <div className='floating-toolbar'>
+          <Refresh discussionsState={this.discussionsState} />
+          <BackToTop />
+        </div>
       </>
     );
   }
 
-  @action
-  private readonly checkNew = () => {
-    if (this.xhrCheckNew != null) return;
-
-    window.clearTimeout(this.timeoutCheckNew);
-
-    this.xhrCheckNew = $.get(route('beatmapsets.discussion', { beatmapset: this.discussionsState.beatmapset.id }), {
-      format: 'json',
-      last_updated: this.discussionsState.lastUpdate,
-    });
-
-    this.xhrCheckNew.done((data, _textStatus, xhr) => {
-      if (xhr.status === 304) {
-        this.nextTimeout *= 2;
-        return;
-      }
-
-      this.nextTimeout = checkNewTimeoutDefault;
-      this.discussionsState.update({ beatmapset: data.beatmapset });
-    }).always(() => {
-      this.nextTimeout = Math.min(this.nextTimeout, checkNewTimeoutMax);
-
-      this.timeoutCheckNew = window.setTimeout(this.checkNew, this.nextTimeout);
-      this.xhrCheckNew = undefined;
-    });
-  };
-
   private readonly destroy = () => {
     document.removeEventListener('turbolinks:before-cache', this.destroy);
 
     document.documentElement.style.removeProperty('--scroll-padding-top-extra');
-    window.clearTimeout(this.timeoutCheckNew);
-    this.xhrCheckNew?.abort();
 
     storeJson(beatmapsetJsonId, toJS(this.store.beatmapset));
     this.discussionsState.saveState();