Add load previous button to DiscussionList

js/src/forum/components/DiscussionList.js

@@ -41,13 +41,28 @@ 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 pg.items.map((discussion) => (
-              <li key={discussion.id()} data-id={discussion.id()}>
-                {DiscussionListItem.component({ discussion, params })}
-              </li>
-            ));
+            return [
+              <hr key={`page-${pg.number}`} data-page={pg.number} />,
+              ...pg.items.map((discussion) => (
+                <li key={discussion.id()} data-id={discussion.id()}>
+                  {DiscussionListItem.component({ discussion, params })}
+                </li>
+              )),
+            ];
           })}
         </ul>
         <div className="DiscussionList-loadMore">{loading}</div>

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;