From e82865726cf109869cddbe36ed93838d1c4d81ae Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Thu, 2 Feb 2023 12:06:42 -0600
Subject: [PATCH] FIX: Back button action and position on glimmer topic
 timeline (#20121)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR introduces a proper `action` to the topic timeline `back-button` which will fix the button not being clickable (or functional) as well as removing a duplicate setting of `this.lastReadTop` which was causing odd positionings of the button.

This is very difficult to test due to the fact you have to manage the "read history" for a user to have the back button populate. We will have to move forward without one (as we did in the last version of the timeline 😅) for now.
---
 .../app/components/topic-timeline/back-button.hbs      |  2 +-
 .../app/components/topic-timeline/container.hbs        |  8 +++-----
 .../app/components/topic-timeline/container.js         | 10 +++-------
 .../app/components/topic-timeline/scroller.hbs         |  4 ++--
 4 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-timeline/back-button.hbs b/app/assets/javascripts/discourse/app/components/topic-timeline/back-button.hbs
index 5f146edd71e..4e58991621e 100644
--- a/app/assets/javascripts/discourse/app/components/topic-timeline/back-button.hbs
+++ b/app/assets/javascripts/discourse/app/components/topic-timeline/back-button.hbs
@@ -2,7 +2,7 @@
   @type="button"
   @class="btn-primary btn-small back-button"
   @title={{i18n "topic.timeline.back_description"}}
-  @onClick={{@onClick}}
+  @action={{@onGoBack}}
 >
   {{i18n "topic.timeline.back"}}
 </DButton>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/topic-timeline/container.hbs b/app/assets/javascripts/discourse/app/components/topic-timeline/container.hbs
index 56f630faa30..baf9cc09920 100644
--- a/app/assets/javascripts/discourse/app/components/topic-timeline/container.hbs
+++ b/app/assets/javascripts/discourse/app/components/topic-timeline/container.hbs
@@ -82,7 +82,7 @@
       <TopicTimeline::Scroller
         @current={{this.current}}
         @total={{this.total}}
-        @goBack={{this.goBack}}
+        @onGoBack={{this.onGoBack}}
         @fullscreen={{@fullscreen}}
         @showDockedButton={{this.showDockedButton}}
         @date={{this.date}}
@@ -96,12 +96,10 @@
         onClick={{this.updatePercentage}}
       ></div>
 
-      {{#if this.hasBackPosition}}
+      {{#if (and this.hasBackPosition this.showButton)}}
         <div class="timeline-last-read" style={{this.lastReadStyle}}>
           {{d-icon "minus" class="progress"}}
-          {{#if this.showButton}}
-            <TopicTimeline::BackButton @onClick={{this.goBack}} />
-          {{/if}}
+          <TopicTimeline::BackButton @onGoBack={{this.goBack}} />
         </div>
       {{/if}}
     </div>
diff --git a/app/assets/javascripts/discourse/app/components/topic-timeline/container.js b/app/assets/javascripts/discourse/app/components/topic-timeline/container.js
index 9ed5d571b98..3d62f950af1 100644
--- a/app/assets/javascripts/discourse/app/components/topic-timeline/container.js
+++ b/app/assets/javascripts/discourse/app/components/topic-timeline/container.js
@@ -27,6 +27,8 @@ export default class TopicTimelineScrollArea extends Component {
   @tracked total;
   @tracked date;
   @tracked lastReadPercentage = null;
+  @tracked lastRead;
+  @tracked lastReadTop;
   @tracked before;
   @tracked after;
   @tracked timelineScrollareaStyle;
@@ -171,8 +173,8 @@ export default class TopicTimelineScrollArea extends Component {
 
     this.date = date;
 
-    const lastReadId = topic.last_read_post_id;
     const lastReadNumber = topic.last_read_post_number;
+    const lastReadId = topic.last_read_post_id;
 
     if (lastReadId && lastReadNumber) {
       const idx = postStream.stream.indexOf(lastReadId) + 1;
@@ -200,12 +202,6 @@ export default class TopicTimelineScrollArea extends Component {
         this.before + SCROLLER_HEIGHT - 5 < this.lastReadTop ||
         this.before > this.lastReadTop + 25;
     }
-
-    if (this.hasBackPosition) {
-      this.lastReadTop = Math.round(
-        this.lastReadPercentage * scrollareaHeight()
-      );
-    }
   }
 
   @debounce(50)
diff --git a/app/assets/javascripts/discourse/app/components/topic-timeline/scroller.hbs b/app/assets/javascripts/discourse/app/components/topic-timeline/scroller.hbs
index 2a666eefedb..2c092052cc8 100644
--- a/app/assets/javascripts/discourse/app/components/topic-timeline/scroller.hbs
+++ b/app/assets/javascripts/discourse/app/components/topic-timeline/scroller.hbs
@@ -18,7 +18,7 @@
         </div>
       {{/if}}
       {{#if (and @showDockedButton (not @dragging))}}
-        <TopicTimeline::BackButton @onClick={{@goBack}} />
+        <TopicTimeline::BackButton @onGoBack={{@onGoBack}} />
       {{/if}}
     </div>
     <div class="timeline-handle"></div>
@@ -34,7 +34,7 @@
         </div>
       {{/if}}
       {{#if (and @showDockedButton (not @dragging))}}
-        <TopicTimeline::BackButton @onClick={{@goBack}} />
+        <TopicTimeline::BackButton @onGoBack={{@onGoBack}} />
       {{/if}}
     </div>
   {{/if}}