DiscussionListPane: Inject state, extract method

js/src/forum/components/DiscussionListPane.js

@@ -5,13 +5,22 @@ const hotEdge = (e) => {
   if (e.pageX < 10) app.pane.show();
 };
 
+/**
+ * The `DiscussionListPane` component displays the list of previously viewed
+ * discussions in a panel that can be displayed by moving the mouse to the left
+ * edge of the screen, where it can also be pinned in place.
+ *
+ * ### Props
+ *
+ * - `state` A DiscussionListState object that represents the discussion lists's state.
+ */
 export default class DiscussionListPane extends Component {
   view() {
-    if (!app.discussions.hasDiscussions()) {
+    if (!this.attrs.state.hasDiscussions()) {
       return;
     }
 
-    return <div className="DiscussionPage-list">{!$('.App-navigation').is(':visible') && <DiscussionList state={app.discussions} />}</div>;
+    return <div className="DiscussionPage-list">{this.enoughSpace() && <DiscussionList state={this.attrs.state} />}</div>;
   }
 
   oncreate(vnode) {
@@ -46,4 +55,13 @@ export default class DiscussionListPane extends Component {
   onremove() {
     $(document).off('mousemove', hotEdge);
   }
+
+  /**
+   * Are we on a device that's larger than we consider "mobile"?
+   *
+   * @returns {boolean}
+   */
+  enoughSpace() {
+    return !$('.App-navigation').is(':visible');
+  }
 }

js/src/forum/components/DiscussionPage.js

@@ -70,7 +70,7 @@ export default class DiscussionPage extends Page {
 
     return (
       <div className="DiscussionPage">
-        <DiscussionListPane />
+        <DiscussionListPane state={app.discussions} />
         <div className="DiscussionPage-discussion">
           {discussion
             ? [