From 0035cefa14f101983d5a04dd6068441f4ae74960 Mon Sep 17 00:00:00 2001
From: David Sevilla Martin <me@datitisev.me>
Date: Mon, 10 May 2021 16:58:19 -0400
Subject: [PATCH] Add load previous button to DiscussionList

---
 js/src/forum/components/DiscussionList.js | 12 ++++++++++++
 less/forum/DiscussionList.less            | 10 +++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/js/src/forum/components/DiscussionList.js b/js/src/forum/components/DiscussionList.js
index 052d40d70..25023fdc6 100644
--- a/js/src/forum/components/DiscussionList.js
+++ b/js/src/forum/components/DiscussionList.js
@@ -41,6 +41,18 @@ export default class DiscussionList extends Component {
 
     return (
       <div className={'DiscussionList' + (state.isSearchResults() ? ' DiscussionList--searchResults' : '')}>
+        {state.hasPrev() && (
+          <div className="DiscussionList-loadPrev">
+            {state.isLoadingPrev() ? (
+              <LoadingIndicator />
+            ) : (
+              <Button className="Button" onclick={state.loadPrev.bind(state)}>
+                {app.translator.trans('core.forum.discussion_list.load_prev_button')}
+              </Button>
+            )}
+          </div>
+        )}
+
         <ul className="DiscussionList-discussions">
           {state.getPages().map((pg) => {
             return [
diff --git a/less/forum/DiscussionList.less b/less/forum/DiscussionList.less
index 2ca828234..6ce5036ad 100644
--- a/less/forum/DiscussionList.less
+++ b/less/forum/DiscussionList.less
@@ -7,8 +7,12 @@
   list-style-type: none;
   position: relative;
 }
-.DiscussionList-loadMore {
+
+.DiscussionList-loadMore, .DiscussionList-loadPrev {
   text-align: center;
+}
+
+.DiscussionList-loadMore {
   margin-top: 10px;
 
   .LoadingIndicator-container {
@@ -16,6 +20,10 @@
   }
 }
 
+.DiscussionList-loadPrev .LoadingIndicator-container {
+  height: 36px;
+}
+
 @media @phone {
   .DiscussionList {
     margin: 0 -15px;